How to add a photo-bar below your header.

As most of you probably know, I'm a blog designer on the side.   I recently did a blog makeover and we put a photo bar below the header.  Well, it's been forever since I've written a blog design tutorial so I thought I'd kill two birds with one stone and show Heather how to change out her pictures and you how to add a photo-bar below your header, all at the same time. 

Adding a picture bar below your header.

The problem with having pictures in your header is updating those pictures.  Especially if you work with a designer, then you have to contact them every time you want an update.  To combat that, I'm going to show you how to add a photo-bar below your header.

It will look something like this....

Pretty blog huh?!  Yup.  I'm proud of that one!

(NOTE: I've switched to the new interface on blogger, so your screen may look different, although the process is the same)

Step 1:  First thing first, you must be able to add a gadget to the header section of your blog.  To do this go to Edit HTML and search for the following snippet of code. (remember you can bring up a search box by hitting CTRL+F)

Then right next to that change "no" to "yes" after showaddelement and erase maxwidgets='1'.  Hit save.  It should look like this.

Now when you go to your layout page, it will look like this!

Hurray!

Step 2: Next you need to load any of the pictures you want to use to photobucket.  Re-size them so they are all the same height.  In this case, I made all the pictures 160px tall.  

Once they are all loaded and re-sized you will see them in photobucket, like so...

Step 3:  Back to Blogger.  Click on "add a gadget" and add the following code to an HTML/Java Script gadget.

 You can repeat the line that you use for your image as many times as you need and you can put the code for space (repeated as needed) in between the image lines to spread the pictures out.

Step 4:  Erase the word image in the code (only the word, don't erase the " marks) and replace it with the direct link to your image from photobucket.

Here is how the code for my example blog looks.

I underlined the direct link in the first photo.  To change that photo, you would just erase that link and put the new link in.

Click Save and then drag that gadget to sit below your header.

There you have it!