Saturday, January 19, 2008

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.


Shady Gardener said...

You are wonderful. I may never do this, but again... someday I may. So I'm printing this posting! Now... would you like to explain about "feeds" and other things that tell you when people create new posts, etc? I'm really a "dummy." Thanks for whatever enlightenment you provide (whether it's about my request or not!) :-)

I'm just a blissful, "newbie" blogger that perhaps needs leading by the hand...

Lisa at Greenbow said...

Kylee, all I can say you are braver than I will ever I run screaming out the door. ;) said...

kylee, you're an angel to write out these instructions. Not sure I'm going to do them, mostly because I'm so fed up with Blogger and how long it takes to load the pages and how often it "blows up" on me. But you're such a doll to write out these instructions for the brave among us. I really like the look you've created but the best part (for me) is that it loads way faster than your last one did!!

I'm still likely going to switch over to WordPress :-)



Kylee Baumle said...

Shady Gardener ~ I'm sorry, but I am clueless when it comes to that feed stuff! And what you might want to do is to make another blog where you can play around with things before you do it to the real one. It's not so scary that way!

Lisa ~ Oh come on! I know you ARE braver than that! ;-)

Diane ~ I was scared too, remember? And I'm sure there are lots of Word Press tutorials out there, too, to help you if you need it.

I've had other comments that it loads faster, too. I wonder why? Oh well, that's a good thing! :-)

Mr. McGregor's Daughter said...

Kylee - on re-reading this post, I understand how to do only the part I want, but it looks like I'm going to have to mess around with re-establishing a classic template first, as I don't have any http: stuff in there. Thanks again for the explanation!

Kylee Baumle said...

Oh, MMD, I think I can help. Your blog doesn't have a background, that's why you can't find the http: stuff. Hang on, and I'll post the corresponding code from mine and you can just add it in, using an image of your own (that you've already uploaded to Photobucket or some other online photo storage).

Kylee Baumle said...

Okay, I looked at the code for your site and in the body section, replace



background:#483521 url("http://your_image_location") repeat;

See if that works. Remember to preview it before you save the template to see if it works. If not, you can just abandon your changes. Let me know!

Mr. McGregor's Daughter said...

That didn't work for my template form, which is Minima. It would've worked for a different template form. I think I'm going to try Blogger's Help to find out what to do. Thanks!

Mr. McGregor's Daughter said...

I finally got my template problems straightened out. Now, it's just a matter of doing it.

blogger templates | Make Money Online