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.
allie-rotating-1allie-rotating-2allie-rotating-3
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

20 comments:

Marieanne said...

thanks for this tutorial Hannah! =)

Bella Skye said...

Thank you so much Hannah! Just one question: What do you use to make the images for the header?

Hannah Rose Beasley said...

You're both very welcome! =D Bella, I use Gimp - it's been termed the "free photoshop."

gimp.org

I really love it. ;)

Bella Skye said...

Thanks :)

Emily Grace said...

Oooooo!!! Thanks so much, Hannah! =D

Hannah Rose Beasley said...

You're all very welcome! =D

Emily Grace said...

I finally tried it, Hannah! It is up at my photography blog right now. =D

Holly said...

Hi!
Im curious about speeding up the rotator, does anyone have any clue on how to do this?

Hannah Rose Beasley said...

Hey Holly! At this point, with the resource given, I don't know of a way. Someone proficient in JavaScript might know, though...

Sereina said...

Worked perfectly! I've been wanting to create a rotating header that fades into the different photos instead of just suddenly changing. I was wondering if you had any advice or could lead me into the right direction to figure that out. I haven't been able to find anything with my Google searches....

Eve Victorie said...

Wow! And I thought you guys were using some really expensive program to make those HD picture rotating banners! lol! :D

Hannah Rose Beasley said...

Hey Sereina! Yay! =D Yes, there are ways to get the photos to fade - the best one is to use Flash. Macromedia Fireworks/Adobe Flash are great programs for doing this, although Adobe does cost a lot, of course! =D The other way is to create a GIF image with layers - start with one photo, then layer another with less transperency, and on; and then start on a new photo. The only problem with that approach is that GIF images tend not to have as many colors, making the photo look much less detailed.

Hey Eve! Haha I'm glad it's simple, too! ;)

Gloria {Lia} said...

For some reason, the image won't show up. I tried it on my control blog.

Hannah Rose Beasley said...

Hey Gloria! One or two people have said the same thing - I'd advise you to re-generate the code and be careful to paste it all in. Sometimes it can just be quirky. ;)

Liz said...

hi hannah it has been a while.. say I made a new header but I want this just on the right hand side picture to rotate... like this blog...http://essenceofevephotography.blogspot.com/2011/10/growth-photography-challenge-by-emily.html#comments

can you help me...

Hannah Rose Beasley said...

Hey Liz! What she did was to make a few different headers - keeping them all the same except for the photo - and then she created a slideshow of them using JavaScript. (Similar to the method presented here.) That's all there is to it! =D

Francesca Rescigno said...

Hannah,
I searched the code you provided above and it's not in my HTML so I can't find the width. Suggestions?

Hannah Rose Beasley said...

Hey Francesca! The reason you can't find the code is probably because of the template you're using. I use Minima (Blogger's older basic template), and based the tutorial off that one. So there are two ways to figure out your blog's width - the first one is to go into Design/Template Designer and click "Adjust Widths" on the left hand side. You'll see a scroll bar at the top of the page, and on the right of that scroll bar will be the number of pixels wide your blog is. To check the width in your html, simply find the following code -


<b:variable default='930px' name='content.width' type='length' value='

and the number after value=' will be the width of your blog. =D Let me know if you have any more questions!

Hope said...

Hey Hannah! Great tutorial! I just have a problem with the end part because it isn't allowing me to put a "gadget" where the header is. Please let me know!

Hannah Rose Beasley said...

Hey Hope! Glad you liked it! =D Try adding a gadget at the footer, then moving it up to the header. It should allow you to place it there. =)