Tuesday, October 13, 2009

Making a Rotating Banner for a Blog


When we have a lot of banners to be put on our blog, sometimes it creates a problem for us because a lot of banner will consume a lot of space of our blog. This will make our blogs seemed not comfortable for the readers. This happen especially when we want to put a lot of ads for example. This is a dilemma. On one hand we want a lot of ads appears on the blog, but on the other hand we want our blog looks neat. Therefore, one of many solutions for this is making a rotating banner. Our banners will automatically appear alternately in the same place.

To make it you only need to enter the following script in the gadget's HTML code:

<script type="text/javascript">
var imgs3 = new Array("URL of Image1","URL of Image2","URL of Image3");
var lnks3 = new Array("URL Link1","URL Link2","URL Link3");
var alt3 = new Array("titleimage1","titleimage2","titleimage3");
var currentAd3 = 0;
var imgCt3 = 3;
function cycle3() {
if (currentAd3 == imgCt3) {
currentAd3 = 0;
}
var banner3 = document.getElementById('adBanner3');
var link3 = document.getElementById('adLink3');
banner3.src=imgs3[currentAd3]
banner3.alt=alt3[currentAd3]
document.getElementById('adLink3').href=lnks3[currentAd3]
currentAd3++;
}
window.setInterval("cycle3()",10000);
</script>
<a href="URL Link1" id="adLink3" target="_top">
<img src="URL of Image1" id="adBanner3" border="0" width="468" height="60"></a>

The above script is for 3 images. You can modify the script if you want to put more or less images. Don't forget to change URL link and URL image accordingly.

Example of rotating banners using 3 images size 125x125 pixels:




When you click the above rotating banners, it will bring you to a link that you defined in the above script. Three different images will bring you to three different links you define in the script. Now I think you already understand the benefit of the rotating banners, don't you?

For instruction in BAHASA, visit the following link:
Banner Rotasi 2 by Masdoyok

No comments:

Post a Comment

Leave your comment here!

Related Posts with Thumbnails
Quote of the Day

Today's Birthday