5 Recommended Resources for Revamping Your Blog Design

One of my favorite things about having a blog is the creative freedom it provides, not only in writing content but also in presenting it. Over the past two years that I’ve had this blog, the way it has looked has gone through a handful of iterations as I’ve tweaked and honed my style to get closer to a design that feels right.

That’s one of the reasons that I chose to go with Blogger as my hosting platform, because you can change so much about the way your content is presented. The only catch is that you have to know how to do that; there isn’t a simple checkbox to click if you want a certain feature to stop showing. Things like that normally require going into the HTML code of your site and tweaking stuff. It might feel a little too technical at first, but as long as you can find a reliable source to use, it usually isn’t very difficult to make many changes!

I wanted to share some of the tutorials I’ve used for changing the way my blog looks. Each of these are the ones I found to be most helpful, easy-to-follow and have played a role in the blog design you see here today. Enjoy!

1. Before you touch anything, do this. 
One of the first things you should know about experimenting with your HTML code is that you should always back your template up first. Even a code that works on everyone else’s blog might not work on yours, so keep your original template safe and sound in case something does go wonky. Here’s a good explanation of how to back up your template.

2. Remove the Blogger navigation bar along the top. 
I’m talking about that pesky bar that floats at the top of most Blogger-hosted blogs and has the options for searching the blog, skipping to the next one, etc. Because you can load your own search bar into your blog and add a Google Friend Connect widget, I don’t think you need this navbar. Here’s how to get rid of the Blogger navigation bar entirely, which I think makes for a more sleek looking design.

3. Add a favicon to your blog.
A “favicon” is the little icon that appears in the browser tab for a particular website. Standard on Blogger blogs is an orange box with a “B” on it. But you can easily change this to personalize the favicon to your blog. For example, mine is a yellow box with “LB” written in. Here’s the site that I used to create my favicon, which allows you to upload your own image and then will provide the code necessary to add the favicon to your site.

4. Change up your links to “older posts” and “newer posts.”
When you scroll down to the bottom page of a blog hosted on Blogger, there will be links that say “Older Posts,” “Home,” or “Newer Posts.” I didn’t like the way that they were set up (“Older” was flush right, when it seems more intuitive to me for it to be flush left). So, I decided to change them (and get rid of "Home" entirely). I created my own buttons, but used this tutorial for how to switch up the code.

5. Create an image map.  
I’ve written before about how I like to use images in my sidebars for navigation. One neat thing is that instead of linking an entire image to a URL, you can actually just link a portion of the image. It’s more complicated, but it allows you to be able to create just one image, align it to your liking and then just determine which areas will be clickable. You can see an example of this in my left sidebar where I’ve created an image that links to my pages on Facebook, Twitter, Pinterest and more. Here’s the tutorial I used to create my image map.

Do you have any blogging resources that you've found especially helpful? If so, please share them in the comments. I'm always looking for new ways to spruce up the look, feel and functionality of my blog!

Please note that some of these resources are written specifically for blogs hosted on the Blogger platform, so if you’re using something else, know that they may not work on your specific blog.

Related Posts
Answering Your Questions: Blog Design
Why I Use Blogger Instead of Wordpress