Thursday, November 24, 2011

7. Blog Design and Customization

by Kate Gabrielle

I personally prefer clean, bright designs with quirky flourishes, so that's what I'll be focusing on in this post. But no matter what sort of style you prefer, hopefully some of the links and tips I mention will help you out!! :)

The one thing that I think everyone with a Blogger blog should do, regardless of what style you prefer, is to make your navbar match your blog. If you have a light vintagey cream blog, the default blue and orange is going to stick out like a sore thumb! This is one of the easiest ways to give your blog a little facelift, and it doesn't require any coding knowledge. Just click "edit" on the navbar widget in your page elements tab, and select a different color when the pop-up box appears! Easy as pie! :)

I think blog design is a lot like fashion. If you're going to wear tons of color and pattern, it's better to wear tailored pieces that flatter your figure. If you're going to wear something really simple and neutral, you might want to top it off with an amazing statement necklace or add pops of color.

Similarly, if you want a bold colorful site, you should try to keep everything linear and orderly. If you have a really clean, minimal design it looks amazing if you top it off with a statement header. Here are some examples of my favorite blog designs that illustrate these examples:

Links: Little Chief Honeybee, Flowerchild Dwelling, Pretty Zoo, Sometimes Sweet

Links: Design Love Fest, A Thought is the Blossom, Goodnight Little Spoon, Fancy Fine

I really think that no matter how much you want to jam-pack into your blog design, a few simple tricks can help it stay neat and tidy! Having matching sidebar images, a cohesive theme and a navigation bar really help make it all look put-together!

While blogger *technically* gives you the ability to add a navigation bar with the pages option now, it doesn't allow you to customize the design at all. For the longest time I thought that navigation bars were impossible to design, and then I discovered this tutorial from Pugly Pixel.

Image maps are really easy once you get the hang of them, and the ability to have a pretty navigation bar makes them worth learning!! :) To make your header an image map instead of the default header blogger widget, go into Edit HTML and click on "expand widget templates" (Always make sure you backup your template before fiddling with it!!)

Change 'maxwidgets' from 1 to 2
Change 'showaddelement' from no to yes
Change 'locked' from true to false
Then save.

When you go back into your page elements tab, the header will no longer be locked in place (so you can delete it!) and the option to add a widget will now be available! Select "html/javascript" from the new widget options and insert your image map code. That's it. You'll now have a fully functional navbar in your header!

Another trick for keeping your blog looking pretty and organized is to streamline your photo size. Blogger automatically re-sizes your photos in all sorts of ways, and it can look kind of dodgy, especially if you're mixing horizontal and vertical images. Kaelah from Little Chief Honeybee did a fantastic tutorial on how to streamline your photo size on her blog here.

One more small thing that's probably just a personal preference, but I've had a lot of people ask me how I did it on my own blog so I thought I'd share it just in case! :) I'm not a big fan of the Google Friend Connect box. I don't think it's pretty, and I also don't really like having the followers number on my blog. So if you're interested in having the link for people to follow without having the huge GFC box with all the faces on it, here's how!

Go to your dashboard, and go to the design tab. In the URL, you'll find your blogID number.

I chose to create an image in photoshop for my GFC button. You can do that, or you can just create a simple text link, as well! Just paste your blogID at the end of this URL in place of the number signs: "" And voila! You have a Good Friend Connect link without having to use the standard widget!! :)

I also used this link to create a little "follow me" link at the bottom of each of my posts. And when I do giveaways that require entrants to follow my blog, I link to the GFC follow pop-up right within my post! So even if you don't want to get rid of the GFC widget, this link can really come in handy :)

There are a bunch of other little things you can do to make your blog look more professional, but I don't think Amber wanted me to write a whole book, just a blog post ;D So instead, here are some of my favorite tutorials to help improve your blog aesthetics!

Change the width of your blog
Customize your sidebar titles
How to make your blog have 3 columns
Applying shadows to blogger elements
Everything on Pugly Pixel
Revert the black youtube embedded player to gray

If you're not up for the task of tackling your blog design on your own, there are plenty of bloggers who offer design services at pretty affordable prices! There's the Freckled Nest team, My Girl Thursday, Kaelah, Amy, and then there's me :)


  1. OMG I love you. I never see tutorials for style blogs on anything but Wordpress. I am going to study this in detail. THANK YOU!!!

  2. nice entry that you want to help others^^

  3. wow, thanks for the tutorial!

    i am in the midst of launching a collaborative blog/online magazine with some of my friends.... i am, at heart, a writer, and while i have an acute eye for design, i do not know how to functionally achieve the look i want on technology platforms (usually). this will help me out so much!

  4. Yayyyy thanks so much Kate! I love the tip about changing your GFC button, how clever :)

  5. I had absolutely the worst luck with designing my own template until I got this new one. I actually love it and I really hope I don't get impatient with it again any time soon. :D

    I love your template! The illustration of you at the top is just lovely! <3

  6. This is absolutely a commendable post indeed. You share splendid piece of information here. Thank you for attributing this informative post..!
    Affordable Logo Design

  7. You presented great blog designs. I am planning to collect free web designs just to have guidelines when I create my own designs. I will consider yours as they are truly nice.


Thank you for commenting! I try to visit everyone's blog in return.