We took so many flower photos that I loved when we were away for a few days that I couldn't decide which to put in my header. I decided to investigate making a slideshow and discovered that it was much easier than I thought.
1. If you are using Blogger, the first thing you need to do is make some changes to your template. If you are not using Blogger, skip to step 5.
Right now Blogger is set up so that you can post a photo in your header from the internet or your computer. You need to change that so you can Add a Gadget (or several) in your header space AND Remove the Header Photo Upload Gadget. Sounds more complicated than it is.
2. From your Dashboard, click on the Blog you want to work with, click on Template. Click on Edit Html. Back up your blog.
It is scary, I know, but you are going to back up your template before making any changes :-)
3. Once you have backed up your template, you want to hit Ctrl + F and search for 'header-wrapper' or maxwidgets.
You will find code that looks something like this:
<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'><b:widget id='Header1' locked='true' title='Header (Header)' type='Header'/>
</b:section> </div>
See how the number one is in bold? Change that 1 to a 2. See how showaddelement says 'no'? Change that to a yes. See how locked='true'? Change that to locked='false'.
Now that code should look like this:
<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='2' showaddelement='yes'><b:widget id='Header1' locked='false' title='Header (Header)' type='Header'/>
</b:section> </div>
4. Save Template and Close.
Now you are ready to get to the fun part!
5. You'll need to create a header, you can do this in Photoshop or Picasa or even on Fotoflexer. Typically, I make my header 1200 pixels wide by 300 pixels high. For a slideshow header, you will need to make a header for each photo/photos you want to be part of the slideshow. For example, I had five photos that I wanted to use, so I had to make 5 headers.
2. I found the easiest way to make multiple headers was to have a frame in the header for the photo. I added one of my flower photos, saved the header as "headerorangetulips.jpg" and then just added the new flower photo to the frame in the header I had saved and saved it again with a different title and on and on five times.
3. I uploaded all of the photos to Photobucket. You could use any photo hosting site, I tend to like Photobucket.
4. I opened another window and went to Html Basix Javascript Rotator Banner Generator.
5. Enter how often you want the photos to change in the upper right. Add the image width and height (for Blogger headers, I usually make them 1200 by 300). Then, enter the Direct Image Url from Photobucket where it says Image Url. Easy Breezy. You can enter up to ten links.
6. When you have entered all of your photo links, click the Generate button to generate the html.
7. Now just copy that code
9. Now you may have two headers, the old header and your new scrolling header. Since you "unlocked" your widget, you can click on the Header widget and at the bottom you will see a Remove button, click that. Don't worry, you can get it back when and if you want to ;-)
10. Enjoy your new slideshow header.
11. This could be used to show several photos at once as well and skip to several more photos...the possibilities are endless ;-)
