So the reader wont get bored seeing the same banner everytime visiting my blog. It's quite useful and easy too. Within 3 steps, you can get your random banner ready.
But however, some pre-requisite steps should be taken before putting script below in your blog.
1) Get ready your banners, at least 2 to see how the banner changing everytime you refresh / press F5 your blog.
2) Adjust the size of the banner to fit your header size (you will be able to know what i meant after you placed the code)
Ok, so are you ready with your nice banners? Or if you don't mind, you can use mine toooo! :) Ok, Let's begin.
Step by Step Instruction
1. Login to your blogger account > Layout > Edit HTML (without expand Widget Templates)
2. Search for <body> code. And place this code right after <body>.
<script type="text/javascript">
var banner= new Array()
banner[0]="http://static.flickr.com/84/269053449_acad87a793_o.jpg"
banner[1]="http://static.flickr.com/95/269053438_4ef5a3983e_o.jpg"
banner[2]="http://static.flickr.com/96/269053404_44a3b0eda8_o.jpg"
banner[3]="http://static.flickr.com/108/269053262_608edbdda4_o.jpg"
banner[4]="http://static.flickr.com/98/269053232_6f7c6f994a_o.jpg"
var random=Math.round(4*Math.random());
document.write("<style>");
document.write("#header {");
document.write(' background:url("' + banner[random] + '") no-repeat left TOP;');
document.write(" }");
document.write("</style>");
</script>
3. Customization (if any)
You will need to change the following:
a) The URL Locations of your graphics.
b) If you have 5 banners, you type "4" in the random number generating equation Math.round(4*Math.random()); If you have 3 banners type "2" and so forth.
It is working! Press "F5" on your keyboard and a different banner should appear.
Good luck! And let me know if it works! :)
No comments:
Post a Comment