How to Create a Rotating Header

This tutorial is specifically for Allie and Emily Grace. ;) I’m glad they asked about this – because it’s something that everyone always wants to know and should know.
Now, there are two ways to do this. One way is to use only HTML, and the other is to us JavaScript. Using just HTML means that it’ll work in any browser, but JavaScript is a bit more sophisticated looking. I’ll be giving you the JavaScript method.

Step one {creation}

Create the images will you use for the header. For example, these are the three I created for Allie’s blog.

Create anything you want, just make sure that the images are as wide as your blog is. Don’t know how wide it actually is? Check by finding the following code -

#outer-wrapper {
width:

The number just after “width:” is how wide your blog is. Make sure that every image is exactly the same width and height.

step two {uploading}

Upload all images to a host. I use Photobucket. Make sure you can find the direct links to your images.

step three {time to cheat}

Okay – it’s time to cheat. I’ve written programs with JavaScript before, but let me tell you, it ain’t easy. So in this step we’ll use a special generator to get the actual code. http://www.htmlbasix.com/banner.shtml
Now, let me warn you – this site is rife with adds. But it works. Their instructions are very simple and easy to understand – make sure you read the whole thing and put in everything asked for. And don’t forget to put in exactly what the width and height is for the images…remember, they should be the same for every image.

step three {installation}

After you’ve copied the code that the generator will give you, log into Blogger, and go to Design/Page Elements. Click “Add a Gadget” at the header, choose html/javascript, paste your code in, and hit save! It’s as simple as that.
Once again, if you have any questions don’t hesitate to ask! =D