Natural light photographer, I thrive on these fleeting moments where the love, joy, or soul shows. My artistic background is always showing through my photography work. You will get the more formal portraits, they are after all, what we are looking for at first . But beyond that, candid moments, soulful mood, unexpected places is also what I want to bring out... I hope you'll like my photographic vision...
Isabelle ♥

Monday, July 20, 2009

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.


Karin A July 23, 2009 at 12:16 a.m.  

Hello Isabelle, thanks for sharing this. It's such a great idea! :) I might do that to.

I love the new template, would like to find something similar. The original colours are not too much fun (yours are pretty!) so might have to look for other backgrounds/colours if I decide to try it.

Thank you also for giving tips about how to modify textures. Will try that!

Have a great day!

~*Patti*~ July 24, 2009 at 5:45 a.m.  

now, you are a tech guru! You are so talented Isabelle. I may even try it, you've made it sound reasonable! :)

Jackie @ Our Moments Our Memories August 2, 2009 at 11:58 a.m.  

Thank you SO much! I've been trying to find out the best way to do this for one of my design clients, and I thought I'd have to spend a few hundred on a flash program. This is fantastic!


join our mailing list
* indicates required

Sylvia Cook Photography button Chasing dreams photography I get the cutest scrapbooking fonts at Free Scrapbook Fonts!
IMPORTANT! © COPYRIGHT Isabelle Lafrance The work contained on this blog is copyrighted©Isabelle Lafrance All rights reserved. My work may not be reproduced, copied, edited, published, transmitted or uploaded in any way without my written permission.

  © Free Blogger Templates 'Photoblog II' by 2008

Back to TOP