22 April 2008

If I did it...

And I did do it. Make a rotating banner image, not murder someone (but that is the joke.) Since this feature doesn't come standard with Blogger and I couldn't find an apropriate plugin, I found a way to get it working that a) doesn't require you to install anything new and b) works with any template. So here you, the public, are:

Step 1: Go to Dashboard --> Layout --> Edit HTML. You'll get a text box with a whole mess of code in it. In the Body section, find a div tag called "header." I believe it can be called something else in other templates; in the "Minima" template that I use it's called header. There should be a property to this called Locked and it is set to true. Replace it with false, and save the template.

What this does: The locked property makes it so you can't remove or change a given element. Setting it to false means you can move or delete it.

Step 2: Delete the header element. Note that regardless of whether it is there or not, it will set the title of your page, so before you kill it, make sure your title is what you want it to be. The title is what displays in the upper-left corner of the browser window, if you did not know. If you do delete the header without setting the title, you'll have to add it again, change the title, then delete it.

Step 3: Go back to Layout. Click the large "Add a Page Element" link at the bottom of the blog template. Pick "HTML/Javascript" from the list. Now you'll have a new element at the bottom of the page. Move it up to the top where the the header used to be. This will be your new header.

Step 4: Here is where it gets tricky. You'll have to add some Javascript to this, which I've provided below.

<script language="JavaScript">

<!-- hide from non-javascript browsers


images = new Array(3);


images[0]="<p align=center> <img src='Your First Image.jpg'></p>";
images[1]="<p align=center> <img src='Your Second Image.jpg'></p>";
images[2]="<p align=center> <img src='Your Third Image.jpg'></p>";

index = Math.floor(Math.random() * images.length);

document.write(images[index]);

/stop hiding-->

</script>
<noscript>Text version of your header</noscript>

What it does (JavaScript OK people can skip this): The Script tag tells the computer you'll be using script. "images" is an array, a kind of variable that has multiple values, that stores the locations of the images you want to use as banners. There is also a P tag in there to assure that the image is centered. You can change that property to "left" or "right" if you want your header on a specific side of the page. This example is set up so that there will be three rotating banners, but it can be as many as you want. Just remember that you'll have to make a new value for images for each banner, and that while the array has 3 values, images begins counting at 0, not 1. So if you had ten banners, images would be: images[0] through images[9].

The next bit sets "index" to a random number. The random function generates a value between 1 and 0, and if you multiply it by images.length, it will generate a number between 0 and whatever the amount of images you have is. Therefore, this line works with any number of banners, whether you have ten or ten thousand.

Finally, the document.write command prints the value stored in the image variable, and the number of the array is the random number generated by the math command. It actually prints the HTML code stored in the array.

Step 5: Close the script tag. The No Script tag at the end will display whatever text is inside of it if the browser does not support or allow scripts. It would be a good idea to put a text version of your header, or an image link to a default header in this case, because if the browser doesn't support JavaScript, the code won't work anyway.

So there you are. I hope whoever sees this finds it useful.

No comments: