Nitesh is back to blogging.. Apologies for no updates since last 2 months..
TopBottom

Show rotating banner ads using WH rotating ad widget

Posted by Nitesh Kothari on 01 September 2008
Share this post:
Ma.gnolia DiggIt! Del.icio.us Yahoo Furl Technorati Reddit



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.

<script type="text/javascript">
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?

Labels: ,

7 comments:

$ THA GOAT $ said...

perhaps the best hack i've ever seen, this script is amazing!!!! Best work yet buddy.

Jessica Brody said...

Hey there! Great script. Except it only worked in IE for me, when I loaded the page in Firefox, it got all wonky. Flipping wildly from one ad to the next like it had a mind of its own! Any fixes for that? Thanks!

henry J said...

hey am asked one help? but u didnt reply for that one "Show rotating banner ads" where to place the google add code. pls any one help me.

Post a Comment

Thank you for commenting at NiteshKothari.com. I follow "U comment I comment" movement. All the comment are dofollow. Please do not spam or leave meaningless or short comments. I expect you to leave me meaningful, relative and genuine comments. Thank you.