Random header banner dispaly

tttttt
YYY
In this post I am going to tell you how can we customize the header of a website in such a way that it will change its appearence(header image) on every visit.Did you notice that when you open merosandesh.com on every regresh or reload of the site you can see changing different header banners. NOw I am going to reveal the secret, what did i do for that.

1.First step:
Make some nice banners (5/6..10/12 as you wish) and upload on the internet.


2.Second Step
copy the URL Address of the banners and paste them in notepad or any text editor. These URL address have to be inserted into the script that I am going to tell you.

3.third step

Find the code on your template HTML and Just below it paste the code.



<div id="header-wrapper"> or
<div id="header"> and just below this paste the code below.



<script type="text/javascript">


var banner= new Array()
banner[0]="bannerURL0"
banner[1]="bannerURL1"
banner[2]="bannerURL2"
banner[3]="bannerURL3"
banner[4]="bannerURL4"
banner[5]="bannerURL5"
banner[6]="bannerURL6"
banner[7]="bannerURL7"
banner[8]="bannerURL8"
banner[9]="bannerURL9"
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>


on the "banner url" use the different urls of your uploaded banner.

(You can customize the size of your header image according to your need, just define the height and width under #header code of your template to fit your banner.)


now save and preview.
Is it working? ENJOY.
Demo, visit merosandesh.com

Krishna Thapa

Post a Comment

.