10.10.2013

How to Design a Modern Blog with Blogger

It has been a week since what I'm calling our "big blog redesign," and I'm still quite happy with it all, so like I did with our wedding website, I thought I would do a little rather long post with some tips and tricks I learned while implementing all this for those of you out there who are designing your own websites/blogs and trying to make them look as pretty and professional as possible.  This post is a bit text heavy, but hopefully it will be helpful for someone out there!  Obviously this is our own experience with designing our specific blog on the Blogger platform, but I named this post "How to..." because we're thinking of starting a new series of posts (called "How to...") based on the concept of sharing all the things we have learned from blogging, reselling, thrifting, and everything else we do!

We've been talking about redesigning this bad boy for months, and I finally had a bit of extra time to focus on these sorts of things after the move, the wedding, and the second move, but it's somewhat daunting to just start messing with things, so here are the steps I took to get moving:
1. Look through all my favorite blogs and websites, and think about which ones I like looking at, and what parts I might be able to integrate into our site.  Some inspiration blogs for me were: Emily Henderson's blog, Making it Lovely, and Manhattan Nest.  Ideas I wanted to use: more streamlined and modern look (more white, smaller header, simpler sidebar), a consistent happy color palette, navigation bar at the top of the page, and the addition of ads.
2. Roughly sketch out a couple ideas on paper, and decide which direction to go (for me that was after getting Chris's input... even if you're working on your own blog, an outside perspective can be helpful though!)
3. Make sure the ideas I'm imagining are actually possible and easy enough to do in the Blogger platform.  I'm not a professional web designer, and though I can do a certain amount with html, I didn't want to do too crazy, so I still wanted to work within the boundaries of the blogger simple template.  This step involved finding tutorials online for little html changes, and trying out making the header graphic in pixlr (since I don't have Photoshop right now) to be sure it could be done.  It could.
4. Spend a day getting down to business and make it all happen!


Header

I'm a big fan of our new header, and how the white background blends in seamlessly with everything else.  We still wanted this more modern look to feel like "us" and you know how maps are kindof our go-to, so I decided to go with a simple typographic header, but to make the letters out of our most frequently used map to give it our own vintage texture.  We've been switching back and forth between using our blog title as one word and three words (alivingspace vs. a living space), and we're continuing that trend by doing our header in the one word version.  We like how it's more graphic and solid, but we're still keeping the official name of the blog and Etsy shop as "a living space" to maintain our searchability on google.  Apparently searchability isn't a word, but I say it is.  Anyway, we'll probably be referring to the blog more as one word now, but both are totally valid.





For anyone wanting to make a similar type of graphic, here's how it's done in pixlr (which is basically set up exactly like Photoshop, so these directions would work there, too):
1. Scan the image you would like to use (parts of a vintage map in our case), or upload the digital file, or whatever you need to do to get the picture available in image form on your computer.
2. Open the file(s) in pixlr, and drag them into a new image you create in the appropriate size for your final graphic.  
3. Use the text tool, and write whatever your text is going to say, in whatever font and size you want, and in a solid color like black.  It will probably already be the top layer, but if not, drag the text layer to the top, so you can see how it sits on your image(s).
4. Move around your images until they line up how you want with your text.  If you need to rotate them just a little, Edit -> Free Transform... and grab just outside the corner to rotate images to any angle.  You can also go to the text layer and make it less opaque (lower left button, slide thing, on the layers panel on the right), if you want to see through the letters to the image below.
5. Go to the text layer and use the Wand tool (Magic Wand in Photoshop, either way it looks like a magic wand) to click on each letter of the text, holding down shift so you're adding to the selected area, until you have all the letters selected.  Make sure anti-alias is checked, and adjust the tolerance as necessary.
6. Edit -> Invert Selection
7. Hide the text layer (click the check box on the right of the layer in the layers panel), and go to the other layer(s) and hit delete.  Everything around the text shapes should be erased!  You can go back and delete the text layer if you want.  If you want your background to be transparent instead of white, then you'll need to select "Transparent" when you make your new image in pixlr.

The first time I tried adding the header to blogger, I had saved it as a jpeg, which I thought would be fine since it has a white background, but blogger disagreed, and it came out looking like this:



I swear something is up with blogger lately, as all our photos are showing up weirdly darker on the blog (just compare identical photos from our Nifty Thrifty posts to our Etsy listings--not everything is up there, and a few images have been edited, but most are identical files and look totally different), so I blame that issue, whatever it is.  Anyway, it was an easy fix.  All I did was go back and save the file as a png.  You'll definitely need to do a png if you have a transparent background, but apparently it's just the way to go in general.  Now that I just typed this, I'm wondering why I haven't tried saving our normal image files as png's... silly me.


Color Palette

Once I had the header all set, I put together a little color palette that I could use for my sidebar icons as well as all the various elements Blogger lets you adjust in the Blogger Template Designer:


I started with a nice navy blue, as I knew I wanted a good dark color like that, and all the other colors were picked straight from the header image (click the main color swatch on the left toolbar, then go to the "IMG" tab and there will be tons of swatches of color from the image you have open).  I used the Drawing tool (can't remember, but I think it's called something different in Photoshop... maybe rectangle tool?), made sure I had the right color selected in the upper Drawing toolbar, and drew long rectangles in each of the colors I wanted to use.  I used the text tool in various colors from the palette to put the number of each color right on my palette so I would be able to key those numbers into the Blogger Template Designer more efficiently.


Sidebar

One of my goals was to simplify the sidebar, partly because I think it just looks nicer and more professional to design our own widgets than to use the provided blogger ones.  Also, it was starting to drive me crazy that we had so many darn labels.  We still label each post with all the things it might fit under, and all the labels are listed at the bottom of each post, but I made sure that most posts have one of our main five labels, and just included those in the sidebar.







I made the social networking and categories graphics using a similar but simpler method as the header, and I was excited to add some simple rollovers to make it feel more interactive.  You can read more about adding rollovers in my wedding website post, but here's the basic URL formula for a rollover image that is also a link, which all of mine are:
<a href="URL ADDRESS"><img src="URL OF THE FIRST IMAGE GOES HERE" onmouseover="this.src='URL OF THE SECOND IMAGE GOES HERE'" onmouseout="this.src='URL OF THE FIRST IMAGE GOES HERE'" /></a>
I just uploaded my images into google plus, then grabbed the URLs from there.



I wanted to consolidate our "about us" info in the sidebar to one little unified spot, but I was having a hard time getting our "about" text blurb to wrap around the picture of us, but I finally figured out a method after a little trial and error.  I had the text I wanted in a text widget, then I just grabbed all the html for the text, and put it in an html widget under this piece with the image:
<img src="URL OF IMAGE" align="right" />
The align right bit was key to get the wrap action to happen, and you could also align left if you wanted the picture on the other side, like so:



Hello and welcome! We are Julia
and Christopher Hutchinson.

ALIVINGSPACE is a blog and Etsy shop
devoted to the art of vintage living.
More about us...




Removing Image Shadows

A topic I covered in my wedding website post that I had to re-add to the blog (more on that in a moment) in order to maintain the nice modern look is removing the shadows around images. I followed the deleting CSS instructions from this tutorial.


Moving Pages Above the Header

Another small html change I made to personalize our blog was moving the navigation bar above the header image.  As much as we love the blogger platform, we don't want our site to look like every other blogger blog, so we're always trying to mix things up a bit while hopefully making the overall look more professional. I think having the page tabs at the top of the page looks cleaner, and it was a super easy change following the instructions in this tutorial.


Getting Blogger Template Designer to Work

One thing about blogger is that it often ends up having little bugs and oddities here and there.  One of those that we have faced (along with many many other bloggers if my google searches for answers are any indication) is some spotty functionality of the Blogger Template Designer.  As in, I could change my blog widths, but that was it.  No color changes or advanced settings were working.  The weird part was, it said my color changes were applied, and I even tried to fix them in the html when they weren't showing up, and the html said they were changed... so now I don't really trust the blogger html editor, but whatever.  Anyway, I read a bunch of people's advice on fixing the problem, and tried a number of things.  I'm not exactly sure what did it--it wasn't fixed until the final step, but I don't know if the first steps were necessary or not.  I made sure to have a record of all the changes I had made to the html, and copies of all my widgets and everything that might be lost, then I cleared my internet cache, went to "Edit html" and clicked "revert widget templates to default," and then went into the Blogger Template Designer and clicked "Remove Customizations" in the Templates section.  Nothing happened.  So, I did what seemed like the last option, and with a bit of fear in my heart, I clicked on a different template, and then clicked back to the Simple template.  BOOM, all the template settings were back to default and I was able to change everything!  I wasn't sure how long it was going to last, so I typed in all the colors I wanted from my color palette as quickly as possible and applied the changes, and I haven't touched it since.  I had to redo any little html changes I had made, like getting rid of the image shadows, but luckily I had saved all that info so it was easy to fix.


Advertising

Ok, just one last thing, I swear!
As you may have noticed, we decided to add a couple ads to the blog.  We spend so much time working on this, and we're to the point where we getting over 15,000 page views a month (and climbing!), where we thought it was time to see if we can at least make a little money on this thing to make it a bit more worth all the time and energy we put into it.  After a bunch of research, I decided to go with lijit for our ads, since they seemed like the best option for a smaller blog like us, and they have awesome analytics.  We'll also be looking into doing sponsored posts (though obviously only for things actually related to our blog... you wouldn't believe the weird shit I get emails about!), and maybe small direct ads for people that want to advertise on our blog specifically.

We'll see how it goes... we definitely don't want ads to be intrusive or distract from what we're doing here, so we'd appreciate any input you guys have on that front!  I'm also really curious what ads are showing up for everyone!  It definitely looks though your cookies, as my ads get much less specific to me when I clear my cookies.  Please please let us know if you get any weird ads, so we can fix it!

And that is officially everything I can think of pertaining to our big blog redesign!  What do you think of our new look?  Important question: is everything actually working for you (rollovers, ads...)?  Have you discovered any good web design tips in your own adventures in blogging?  Will you use any of my ideas?  Did anyone actually make it through this whole post? :)

5 comments:

  1. Very clean, clear, professional, inviting redo. I will have to come back and study it/this post again.
    Joy

    ReplyDelete
  2. I really like the new look, great color palette and clean background. Thumbs up for sharing your process with the community as well.
    Regarding ads, I just don't like them, I think they are intrusive and they usually do not advertise anything I am interested in (as a follower of your blog) I think direct ads work much better. Just my opinion, I won't stop coming just because of the ads, but you wanted feedback right?

    ReplyDelete
    Replies
    1. I totally get your perspective on the ads. What I would like to do is start here, and then look for direct advertising partners, and hopefully be able to switch as we grow so we can have more control over who we are advertising for (and how the ads look!). I get annoyed when an ad shows up for something that seems so unrelated and is moving or distracting, like a few intense video game ads I've seen on here, but a lot of the ads that I've seen so far have seemed ok, and at least tangentially related. There were a bunch for uncommon goods that I liked. Anyway, thanks for sharing your opinion!

      Delete
  3. Hey, don't worry about ads. People are used to them and if they are somewhat related they can be helpful. It would take MASSIVE amounts of traffic to ever make money with blog ads. Massive. The advertising model for blogs is a rough one. It is better to have a business that you can market with your blog. Of course, I don't have one or haven't thought of one. I have GoogleAds on my blog just for fun. In a way, I think it makes the space look a little more professional and it is also interesting analytically...to look at the posts that generate more ad clicks. Doesn't hurt at all and certainly not opposed.

    ReplyDelete
  4. I really like it! Very clean and organized looking. As far as the ads, I don't think anyone notices them and turns up their nose anymore. If they do, you probably don't want that negative crap around your blog anyway!
    I pinned this so I could go back and check out your banner instructions. One of these days I might redo mine and will need a bit of help with it.

    ReplyDelete

Note: Only a member of this blog may post a comment.

Related Posts Plugin for WordPress, Blogger...