Works For Me Wednesday - Modifying A Blogger Template

Admittedly this is sort of a weird Works For Me Wednesday, because it all starts with the pattern on these pants:

See, I was cleaning out my closet yesterday, and when I saw these pants, I thought, "You know, that's sort of the look I've wanted to have on my blog."

Oh but you think I'm kidding.

Seriously, I've wanted to change the look for awhile, but I didn't have any inspiration. But when I saw the browns and the pinks and the greens, I knew I had found a starting point. And since Addie helped me so much the first time I tried to to swap out my banner, change my background, etc., I had a pretty good idea of what I needed to do...and it's really not as hard as you might think.

So, in the spirit of WFMW, here's how I changed my template just enough to make a big difference. Keep in mind that I'm talking specifically about Blogger, so if you use TypePad or WordPress or whatever, this explanation may not work for you.

First, I set up a new blog - a test blog - really simple if you're using something free like Blogger. This is a great place to save the info in your current template and start to work with it. The best thing is that I can tinker with the test blog to my heart's content and not one letter gets changed on my "real" blog. When I get the test blog like I want it, I copy and paste any code that has changed back over here.

Second, I made sure that I knew what I was after design-wise. Find your inspiration, whether it's in a photograph, a piece of clip art, or even a pair of pants. :-)

After I figured out what kind of look I wanted, I looked at some of the free or REALLY low-cost stock photography sites. I found my new pants-inspired background illustration on iStockPhoto, and I paid a WHOLE DOLLAR for it. Once I downloaded the file, I was able to start working with it (you can use Photoshop, Illustrator, etc.). You do have to have a little knowledge about how to do text boxes and that kind of thing - but you can easily find that out online. Or, if you're me, yell "DAVID!" and let your computer-savvy hubby help.

Next, I looked at my template code to see how many pixels my banner (the place with your blog name and tagline) needed to be. See where it says 692? That means my banner needs to be at least that many pixels wide. The height is pretty flexible. You can do all the editing - inserting type, playing around with fonts, tweaking the colors - after you have the correct size set up. And as for the background image - the stuff along the sides - I just make that about 300 pixels wider than my banner. It's a separate file from the banner, and I just sort of figured out how to make it work through trial and error.

The last step in the "design" process is to save everything as JPEG files, and I use PhotoBucket to host my images. Once you've uploaded to your photo host, the bulk of your work is done.

So on to to the template. The fun part. :-) And if you try this, remember: don't even THINK about messing with your template until you have made a back-up copy of your code. That's where all your links, sidebar stuff, and any modifications are, and you don't want to lose ANY of that. So select it all, copy, and paste it in a .txt file - then SAVE IT.

Once all the code was saved and sound, I just copied and pasted the URL of where my banner image is stored into my template (you'll see that info underneath your pics in Photobucket). That place in your template will look something like this, and all you have to change is the part between the quotation marks on the "img src" line.







Finally, I put the URL for my new background image in the place that looks like this, and again, all I had to change was what's in between the quotation marks on the "background" line. (And you don't have to change the background at all if you don't want to - I just happened to like a washed out version of my banner running down the sides.)





Here's the most important thing I've learned as a VERY amateur-ish template tinkerer: stick with the horse that brung ya. I'm still using my very first Blogger template - Son of Moto, I think it's called - all I've changed are two pieces of code (the banner and the background). But doing those things will give you a whole new look. Plus, I don't have to transfer all my link and sidebar info into another template. That works for me!

Now if all this talk of downloading and editing and template changing just exhausts you, try out one of the many free Blogger templates available. I found some adorable free ones at Zoot's Designs, and I came very close to using one of those...all the code is right there on her site (remember, if you set it up on a test blog first, you can copy and paste in your links from your real blog, then, when you're finished, copy and paste all your edited code back over to the place we normally visit).

Also, there are so many talented designers / bloggers who can create custom designs for a reasonable fee, like Jules, Susie, Karin and Becky, just to name a few.

And again, PLEASE remember: ALWAYS make a copy of the code you're currently using - NEVER start to manipulate the HTML in your current template without having a back-up.

I know this is an unusually long WFMW, but I figured I'd better write down this info while it's fresh on my mind - and hopefully it will help some of you, too. That ALWAYS works for me. :-)

Happy Blogging, everybody!

For more great WFMW ideas, visit Rocks In My Dryer.