Computer Consultant

    

   - Browse Archives -      May 2008 June 2008 November 2009 December 2009 January 2010

A reader CeElle asked how the Header banner and Blogger background picture can be rotated so that they show a different image every time the page is refreshed or reloaded. While we could use the format of a slide show, the timing of rotation would be fixed. We think we have a simple enough JavaScript that randomly calls for a new Header banner or Blog background image whenever the Blog is refreshed. This is useful if you have several background pictures which are suitable for your Blog and you want to showcase all of them.

Rotating Header Image

Just to be sure, this article is about randomly displaying different Header images upon every refresh of the page. If your intention is to have a fixed background image for your Header, the other articles Background Image for Blogger Header (New) and Background image for Blogger Header will be more relevant. In that article, you will also read about creating images and using free photo editing software like Google's Picasa to resize and crop your pictures.

After creating your images, you will have to upload them onto a server. You can read about using free hosts like Google Page Creator and Google Groups. We also have a rather comprehensive list of free Image Hosts and File Hosting Services in our article on Manage Blogger Image Storage Space. Check out those sites and choose one that is fast, reliable and enables hotlinking to the uploaded files. After uploading the pictures, take note of the Image URLs.

Login to your Dashboard. Go to Template ->Page Elements -> Add a Page Element and choose “HTML/JavaScript”. The javascript to insert is this:-

<script type="text/javascript"> var banner= new Array() banner[0]="Image01URL" banner[1]="Image02URL" banner[2]="Image03URL" banner[3]="Image04URL" banner[4]="Image05URL" banner[5]="Image06URL" banner[6]="Image07URL" banner[7]="Image08URL" banner[8]="Image09URL" banner[9]="Image10URL" var random=Math.floor(10*Math.random()); document.write("<style>"); document.write("#header {"); document.write(' background:url("' + banner[random] + '") no-repeat top left;'); document.write(" }"); document.write("</style>"); </script>

Explanatory notes:-

1. The Image01URL to Image10URL are the links to the images that are hosted on the image server. Please insert the full URL beginning with http://

2. This uses a Math object javascript. The random() code will give a random number between 0 and 1. This number is multiplied by 10 and the floor code rounds the number downwards to the nearest integer, giving a value between 0 and 9. At every pageload, the script will display one of the banners from banner[0] to banner[9].

3. The above example assumes you have 10 different images to display. If you have fewer pictures, say 5 pictures, delete banner[5] to banner[9] and amend the number (in red) to 5. If you have more images, you may add banner[10] up to whatever number of images you have, and amend the number (in red) accordingly.

Rotating Background Image

Again, if you have only 1 image for your Blog background, you can insert the image into your template using the guide in this tutorial Background Image for Blogger Template.

If you have more than 1 background image that you want to use, the steps for having the random background images upon each page refresh are about the same as above. Create the images, host them on a free server, and take note of the Image URLs. Next, login to your Dashboard. Go to Template ->Page Elements -> Add a Page Element and choose “HTML/JavaScript”. The javascript to insert is this:-

<script type="text/javascript"> var banner= new Array() banner[0]="Image01URL" banner[1]="Image02URL" banner[2]="Image03URL" banner[3]="Image04URL" banner[4]="Image05URL" banner[5]="Image06URL" banner[6]="Image07URL" banner[7]="Image08URL" banner[8]="Image09URL" banner[9]="Image10URL" var random=Math.floor(10*Math.random()); document.write("<style>"); document.write("body {"); document.write(' background:url("' + banner[random] + '") repeat center center;'); document.write(" }"); document.write("</style>"); </script>

Explanatory notes:-

In addition to what we discussed above relating to rotating Header images, the position of the background image is important. Please change the attributes (in purple) to suit your requirements. For instance, if you have a small tile or image that you want to use to form a patterned background, insert the “repeat” attribute given in the above sample. If you have a big picture that covers the entire blog and you want the picture to be fixed, you may change the “repeat” to “no-repeat fixed”. For a more detailed explanation on the attributes, please refer to Background Image for Blogger Template.