Home
About
Forums
Advertise
Contact
Show rotating banner ads using WH rotating ad widget
Posted by Nitesh Kothari on 01 September 2008|
Share this post:
|
|
The biggest problem of a blog is space. We do not have much space to show more ads. To overcome this problem, I was searching for a widget which can display rotating ads. But, all in vain. In the end, i used JavaScript and designed a auto refreshing ad Widget. This Widget helps you to show advertisements in all sizes. You can set ad refreshing time as per your convenience.
Demo: check this widget on left sidebar of this blog(below Entrecard)
How to add WH rotating ad widget
Go to layout, click on add a widget/gadget. A pop box will appear, just add the following code to content area and save.
var imgs1 = new Array("http://entrecard.s3.amazonaws.com/eimage/51524.jpg","http://wolverinehacks.googlepages.com/WBN125x125memberbanner.png");
var lnks1 = new Array("http://clwolvi.blogspot.com","http://wbnetwork.blogspot.com");
var alt1 = new Array();
var currentAd1 = 0;
var imgCt1 = 2;
function cycle1() {
if (currentAd1 == imgCt1) {
currentAd1 = 0;
}
var banner1 = document.getElementById('adBanner1');
var link1 = document.getElementById('adLink1');
banner1.src=imgs1[currentAd1]
banner1.alt=alt1[currentAd1]
document.getElementById('adLink1').href=lnks1[currentAd1]
currentAd1++;
}
window.setInterval("cycle1()",5000);
</script>
<a href=""http://clwolvi.blogspot.com"" id="adLink1" target="_blank">
<img src="http://entrecard.s3.amazonaws.com/eimage/51524.jpg" id="adBanner1" border="0" width="125" height="125"></a>
<a herf="http://clwolvi.blogspot.com>By www.wolverinehack.tk</a>
Save it and check your blog.
How to customize WH rotating ad widget
a) Edit image source:var imgs1 = new Array("http://entrecard.s3.amazonaws.com/eimage/51524.jpg","http://wolverinehacks.googlepages.com/WBN125x125memberbanner.png",);
Change image source in red or add more after these links. I would really appreciate if you keep Wolverine Hacks Banner as it is.
b) Edit Links:var lnks1 = new Array("http://clwolvi.blogspot.com","http://wbnetwork.blogspot.com");
Change image source in red or add more after these links.
c) Edit refresh Time:window.setInterval("cycle1()",5000);
5000 refers to 5 seconds (i.e. 5000 milisecond). Change this as per your requirement.
d) Edit following line:<a href=""http://clwolvi.blogspot.com"" id="adLink1" target="_blank">
<img src="http://entrecard.s3.amazonaws.com/eimage/51524.jpg" id="adBanner1" border="0" width="125" height="125"></a>
Change links in red and width and height of the widget.
Final Words
This is the default widget. If you want to use the same widget twice or more than you need to make some changes. Leave a comment here to know more.
I hope you will like this widget. Comments, requests and suggestions are most welcome. So what do you have to say about it?