Friday, May 20, 2011

How To Make Image Header Rotate or Change When Other Tab Clicked

STEP 1 : Go to Dashboard > Edit HTML
STEP 2 : Find the code
press Ctrl + F at the same time, and then find the code below:
</head>
STEP 3 : Paste this code above </head>
<script type="text/javascript">


var banner= new Array()


banner[0]="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjopSslq4cLl7DfclhJP_b9zvTO6XyPI766q6aDFe8win541qqoLTpxqmsnF9ZmFVxbe4xzYxRs924GcEFd4qwv1AynlHd3KXV-vfoTPUGKytSniCYbxIDq0aXiMjNHYCoYC518CNMiLAc/s1600/1.png"
banner[1]="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjwX-dW_oU-yiDOmSp1m2G57OZ_Q2mJbdCfFDhBhY5lsBD2wLLfvlZO8AygnJRqOTHfrFOFB65i5LV1vgvBeCybROPKP6i_zubOsY9aIVQO2E1Vk8NJXSYDfYELrjPvmNA9yeUtP0VaprM/s1600/2.png"
banner[2]="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjryoQvV0nDxlOtDK-C4zDT4aq4gVCy58KVFXqXJ3yWlV1N6Ial9cHiCWe4lbbe1YX1d4UOjTX698vmcgYhygF_D5oZx35zdlGqvCX_rcAyX3bIGhKoNe14LNIVyn1PX2xhEeqoSlFpHu4/s1600/3.png"
banner[3]="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgjultKaK-_L7KjdwEmZeiJ69VFmyu21ZJVvksDCU1Q7BzS7BU4BCTpdQpSXg_vSrrc8GdHOUQ3Wyhdm2H5xVmYRmdJJUn9u3W9AxuBLUcRo5pKOnFYmP6XQlwaIUJxn0iiE4RQ0CP1OHU/s1600/4.png"
banner[4]="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjryoQvV0nDxlOtDK-C4zDT4aq4gVCy58KVFXqXJ3yWlV1N6Ial9cHiCWe4lbbe1YX1d4UOjTX698vmcgYhygF_D5oZx35zdlGqvCX_rcAyX3bIGhKoNe14LNIVyn1PX2xhEeqoSlFpHu4/s1600/3.png"
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>
STEP 4 : Change the highlighted code in RED with your photo URL from photobucket or where ever it is from. Save your template and your done. If you wish to reduce the images showing just simply delete the your photo URL that you want to be deleted and change the number you see after the banner. It is normally counted [0] to [5] if you got 6 images rotating and also change the var random.

see live demo : ROTATING IMAGES WHEN TAB CLICK
Related Posts Plugin for WordPress, Blogger...