How to add a flash header to your blog for Blogger

Did you know that Photobucket offers a new flash slideshow feature, that runs in Blogger?

I have been trying for weeks to add a flash header to my blog, and played with the html code over and over again.

Now, all you have to do is upload the photos you want for your slideshow to your Photobucket album (or create an account first). Click on "Create a slideshow", choose the style and transition effects you like, and save. Et voilà!

Next you click on "Share" and get the html code for Blogger, and copy this code into an "add a gadget" (html/javascript) spot.

Things to remember before creating your header:

->Create your slides first, with your editing software and give them the size you will want them to have on your blog header. (Mine is 930px by 210px). depending on the final look you want for your blog and your template you will need to find these two html codes :

The outer-wrapper gives you the entire width of your blog. If you don't find it, because not all templates are designed the same, you may look for #body.

The main wrapper is the bigger section where you post.

You may want to have a header that spreads the entire width of your blog, or to have it cover the width of the post section. It all depends if you have a one, two or three columns template. If you want it to spread the entire width of the blog, give the slides the same width than the outer-wrapper section (as seen on the code above). If you want it to cover the width of the post section, go with the main width (as seen in the code above).

->Make sure your header is moveable and can be replaced by a widget. In most of the templates the header is locked and you can't add widgets in the header section. in order to do so check for this code in your html:

->Another thing you might like to know, when copying the Photobucket code, tabs appear under the slideshow. To get rid of them, erase part of the code like this:

This is the original code from Photobucket.

This is what's left after removing the annoying tabs...

Notice that I also changed the values of the width and height in the Photobucket code, to make it fit my header section. If you don't do it, you will get the default values.



->The last but not the least, before doing any changes to your template's html, make sure you did a backup of your template, it may come in handy! Go to Layout -> Edit html ->Download Full Template. Also, before saving any changes to your html, always Preview your blog first to see how it looks like...

A good idea might be creating a new blog, they're free after all, and try all your templates fixes on it! When it looks good, copy the html into the main blog.

This was just to help you out setting your new flash header, remember, I am not a programmer.

I just wanted to share this info with you because some people were interested in knowing how to do it. I hope this helps.