How to Change or Shuffle Ad Banners on Page Refresh

Well you will obviously love this post and you might be searching for this one as I was searching for this time from a long time but today I got a nice website that allows us to create these automatic ad banner refreshing scripts that allows multiple banners on single ad space to shuffle as soon as someone refreshed the page. Well these is another option of shuffling the ads right away without the page refresh action.

Well I have created a demo below so on the left I have kept the refreshing one, so as soon as you refresh the page the image will change so will the link and on the right I have kept the automatic image shuffling script that changes the image and script on its own without any page refresh.

So now you might have seen the demo above, so now lets see how to apply this awesome widget on your own blog. To create your own image links and for every widget creation check this website http://www.htmlbasix.com/banner.shtml

Adding Page Refresh Shuffling Ad Banners

Now if you need to add the page refresh shuffling ad banners, then just check the below steps and enjoy the widget.

1. Open Blogger > Layout > Add Gadget.
2. Choose HTML/JavaScript Gadget & add below code into it.

   <script type="text/javascript">
   <!-- Begin
   rnd.today=new Date();
   rnd.seed=rnd.today.getTime();

   function rnd() {
           rnd.seed = (rnd.seed*9301+49297) % 233280;
           return rnd.seed/(233280.0);
   };

   function rand(number) {
       var result = Math.ceil(rnd()*number);
       if (!result)result++;
           return result
   };
   var ad_cnt1 = 3;
   var ad1 = rand(ad_cnt1);
   var link1;
   var adBanner1;
   var width1
   var height1
   if (ad1==1) {
   link1="www.example.com";
   adBanner1="http://i.imgur.com/a7eVPpP.png";
   width1="300";
   height1="300";
   alt1="";
   }
   if (ad1==2) {
   link1="www.example.com";
   adBanner1="http://i.imgur.com/R11iuWP.jpg";
   width1="300";
   height1="300";
   alt1="";
   }
   if (ad1==3) {
   link1="www.example.com";
   adBanner1="http://i.imgur.com/iL495Rk.jpg";
   width1="300";
   height1="300";
   alt1="";
   }
   document.write('<center><a href="' + link1 + '" target="_blank">');
   document.write('<img src="' + adBanner1 + '" width=' + width1 + ' height=' + height1 + ' border=0 alt="' + alt1 + '"></a>');
   document.write('</center>');
   // End -->
   </SCRIPT>
   

3. Now just change the green color codes with the hyperlink and blue color codes with the image link.
4. That's it now just Save the widget and you are done.

Now refresh your blog, and on every refresh you will see a new image loaded. So now if you want more images create here http://www.htmlbasix.com/banner.shtml

Automatic Ad Banner Changing Widget Blogger

Now above we have cleared how exactly you can add ad banners that change on every page refresh, now for the automatic ad changing widget without page refresh, you can check the full steps tutorial below.

1. Open Blogger > Layout > Add Gadget.
2. Choose HTML/JavaScript Gadget & add below code into it.

   <script type="text/javascript">
   var imgs1 = new Array("http://i.imgur.com/a7eVPpP.png","http://i.imgur.com/R11iuWP.jpg","http://i.imgur.com/iL495Rk.jpg");
   var lnks1 = new Array("demo_link_1","demo_link_2","demo_link_3");
   var alt1 = new Array();
   var currentAd1 = 0;
   var imgCt1 = 3;
   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()",10000);
   </script>
   <a href=""demo_link_1"" id="adLink1" target="_blank">
   <img src="http://i.imgur.com/a7eVPpP.png" id="adBanner1" border="0" width="300" height="300" /></a>

3. So now guys just change the blue codes with your image link, green one with your hyperlink and make sure to change the purple with image first image link, I mean there are two purple codes in above code so make sure both of them are same with your first image link, which ever you use.
4. Now once again if you are planning to implement more images the you create your own widget with more images here http://www.htmlbasix.com/banner.shtml

So guys this ends this awesome tutorial that will help you in changing and shuffling your ads automatically on your blog for getting more advertisers running at the same time. Now get more ads implement them and earn more. Well you should also check out best AdSense placements for improving your online income.