Give Your Blog a Makeover - Part I

While Blogger has several nice templates you can use for the "face" of your blog, the time may come when you want to change it to something other than what Blogger has to offer. Scary stuff, that. It means dealing with HTML and pixel counts and techie things like that. Things that send the less brave of us running and screaming in the opposite direction. How do I know? Because I was a big chicken myself once and it still frightens me a little.

You may have noticed that I recently changed the appearance of my blog. I didn't want to change everything, but I was tired of the brown and beige of Scribe. I liked the icons included in that template, which are little flowers. I liked the layout okay, but I wanted three columns instead of two. I also wanted to make the sidebars a tad bit wider to accommodate Amazon's widget and other wider things.

Since I was successful at accomplishing this, I'm going to tell you how I did it, just in case you have been thinking of doing the same, but don't know how to go about doing it. We'll start with instructions on how to change the backgrounds:

1. In your Blogger Dashboard, choose the Template tab. At the top, there will be a tab called Edit HTML. Under that tab, at the top of the page, there is a link - Download Full Template. Before you do anything, click on this tab and save your template to your Desktop. This way, if you do screw things up, you can always put things back the way they were.
   
   
2. Next, you need to decide what changes you want to make. If it's merely a change in background colors, this is very easy to do. For mine, I did a Google search for free background images and spent some time looking through what I thought would be appropriate. This is the really fun part, a lot like decorating your house!
   
   The overall background image can be pretty much whatever you want as far as pattern and color are concerned, but the post background needs to be something that doesn't interfere with the readability of the type. A solid color works best.
   
   
3. Once you find what you like, you can save the background image by right-clicking on it and then choose Save As and rename it if you want; then save it to a location on your hard drive. I'd suggest making a folder on your desktop to save all your images and files associated with the changes you want to make. That will make them easy to find when you need them later.
   
   
4. Once you've found the background images you want to use, you must upload them to a web location, such as in Photobucket or Flickr. This will give you the http: address Blogger needs to show your background on your blog.
   
   
   
5. To make the change to your blog background, go back to the Edit HTML tab in Blogger. Scroll down through the HTML until you find /* Defaults with a dotted line under it, then body. Under that, you will find a line that contains an http: location of an image. Replace this with the http: location of your new background image that you just saved to Photobucket or Flickr.
   
   
6. To make the change to the background where your posts are located as well as the sidebar(s), scroll down further until you come to /*Layout with a dotted line under it. You'll then see #main-top and then a line containing an http: location of another image. Replace this with the http: location of your other new background image that you just saved to Photobucket or Flickr.
   
   Continue on down, where you will also see #main-bot and #wrap2. You must replace the image location for these as well, with the same one you used for #main-top.
   
   
7. Check to see if you've done it correctly by clicking at the bottom on Preview. I love this feature! Before you make any permanent changes, you can always preview what you've done to see if you have done it correctly. If it's not what you want, you can always start over by clicking on Clear Edits.
   
   
8. If things look like you want them to look, click on Save Template.

Now you've got a new look!

Next post, I'll explain how I changed my two-column blog to a three-column blog. If you want to do this as well, I'd advise changing the columns before you change the backgrounds, since changing your template will change these to whatever the backgrounds are in the template you've chosen. Easiest would be to find a template that already has backgrounds you like. There will be some other precautions to take when changing your template layout that I will include in the next post as well.


DISCLAIMER: I don't promise that these instructions are all-inclusive or that you won't have problems. I had my share along the way. But to the best of my knowledge, they are correct. I can't stress enough the importance of backing up your original template so if your changes mess things up, you can go right back to what you had originally.