Thursday, December 01, 2005

How to add a graphic (banner) to your blog

Somebody asked how I replaced the boilerplate blogger heading on my blog with an image. The basic idea, from Mirty's Codescripter post: create an image to be your new header and then call up its location in your blog template.

I wanted an easy, low-tech way to make the new banner (because I can't keep up). I went to Jan's Freeware and downloaded "Painter 25." It is a very versatile program which will do tons of fancy things, but the help file could be more helpful, so I didn't try doing any of the fancy things.

I made an image 850 pixels wide and saved it as a .gif file (flat images look much better as gifs than as jpgs).

At first, I uploaded the banner to my band's website (one of our member's husbands has his own server) but when our server went down, I uploaded the image instead to (it's free). Mirty suggests you can also upload your banner to the Picasa or Hello servers.

Next I went into the "template" section of the Blogger settings for Pratie Place. Before messing around with anything I copied the whole template onto my clipboard and pasted it into a notepad file AND SAVED IT ON MY HARD DRIVE in case I screwed up and had to put everything back the way it was.

(This is the kind of advice you ignore at your own peril. Don't say you haven't been warned.)

Then I replaced the code which follows pretty soon after <body>; (you'll see a few lines which include $BlogURL, $BlogTitle, and $BlogDescription) with the location of my new image. (If you feel unconfident, instead of deleting you can "comment out" the old code - put <!-- before it and --> after it.)

This is what the new code on my blog looks like:

 <BR><img width="850" alt="PRATIE PLACE" border='0' class='postImg' src="">

Note: having the ALT="NAME OF YOUR BLOG" is very important because if something happens to your image (mine disappeared when the band server crashed) at least the name of your blog will still be visible!

I don't think I'm very good at explaining these things, so if you have a better way of describing this process - OR, if you have tried it and are befuddled - let me know and I'll try again.

P.S. Mirty pointed to an amazing site,, which will generate nice text graphics for you online and you can cut-and-paste the code into your page!!!

Technorati Tags: , , , ,


At 3:36 PM, Blogger Amy said...

Thank you. I've been trying to find out how to do this for a long time!!

At 6:27 PM, Blogger slestat said...

aw, thanks alot!

At 10:35 PM, Blogger 2Perfect said...

i tried to find $blogURL using Ctrl+F and couldn't find it. Same with $blogtitle and $blogdescription.

Do you know if this only works on some templates? Or is this for the old blogger or something?

I'm using Minima Black, one of the default templates for the new blogger.

So far I've only been able to change the header background. But since the title has to be at least 1 character, there's an underscore on top of my banner.


At 5:42 PM, Anonymous Anonymous said...

helps Thank You, Great blog btw :)

At 1:47 PM, Blogger Writing and Living said...

Thank you! I've been trying to do this all weekend.


Post a Comment

<< Home

Find me on Google+