How to Design a Rotating Header for Blogger

A blog header can act as the title for your Blogger.com website.

Blogger -- Google's push-button publishing website -- gives registered users all the tools they need to create a custom website. From prefabricated templates and layouts to a variety of gadgets you can add as page elements, Blogger lets you build, design and publish material to the web. To increase the aesthetic appeal of your blog, you can create a rotating header for your blog using a Blogger gadget and JavaScript.

Instructions

1. Click on the "Design" tab on the Dashboard of your Blogger account.

2. Select "Page Elements" from the list of options underneath the "Design" tab.

3. Click on the "Add a Gadget" link at the top of your blog -- where the header would go. If your blog's layout does not have the "Add a Gadget" link here, click on the link located on your blog's sidebar or footer -- you can move it to the top of your blog later.

4. Scroll down the pop-up window until you see the gadget called "HTML/JavaScript" and select.

5. Type this JavaScript code into the text box:

   <style type="text/css">

   #ran1,#ran2,#ran3{display:none;}

   </style>

   <script type="text/javascript" >

   window.onload=function(){

   var wch=(Math.floor(Math.random()*3)+1);

   document.getElementById('ran'+wch).style.display='inline';

   }

   </script>

   <p id="randomP">

   <span id="ran1">SAMPLE TEXT #1</span>

   <span id="ran2">SAMPLE TEXT #2</span>

   <span id="ran3">SAMPLE TEXT #3</span>

   </p>

   Press the save button at the bottom of the window.

6. Change the JavaScript code from Step 5 to further customize your rotating header. You can add as many or as few rotating features as you like by changing three elements. The second line of the code has the parcel "#ran3" in it; if you wanted to add more rotating elements -- four, for example -- you would add "#ran4" afterwards. If you wanted fewer elements -- two, for example -- you would delete "#ran3."

   The sixth line of the code has the number three (3) in it, reflecting the number of rotating elements in the code. If you changed the number of elements in the second line to four, you would need to change the number three to the number four (4). The number in line six should match the number of elements in line two.

   The last thing you need to change, in order to adjust the number of elements, is the second to last line of the code. If you want to add more elements, copy this line and paste it directly underneath. Change the number three to the number four. If you wanted to erase the third rotating feature, you would copy and delete that second to last line. Again, the number in that second to last line should match the numbers in the second and sixth line of the code.

7. Replace the sample text in your header with pictures. Erase the "SAMPLE TEXT #1" and replace it with the HTML code for an image, such as:

   <a><img style="float:center; margin:0 0 10px 10px; cursor:pointer; cursor:hand; width: 400px; height: 300px;" src="http://samplepictureURLgoeshere.jpg" /></a>

8. Click on the gadget you just created and drag it to the very top of your blog. Save your settings by clicking on the "Save" button at the top-right of the screen.