--> Random Ad Banners Widget For Blogger | Experience Lab - Online business creation and development guide for bloggers and startups

Random Ad Banners Widget For Blogger

In most blogs which are selling ad spots you often have seen random Ad banners appearing when the page is refreshed. Ever wondered how to s...



Random-Ad-Banner-Widget In most blogs which are selling ad spots you often have seen random Ad banners appearing when the page is refreshed. Ever wondered how to show random Ad Banners in Blogger? In today's tutorial we will learn how to create a Random Banner Widget for blogger which will show random Ad banners when a visitor visits a new page on your blog. Using this widget you can display as many Ad banners on a Sponsor Area as you want!


This widget is exactly similar to our previous 125 by 125 AD Banner Widget and in fact it is the most awaited one and have been requested several times by our readers. Just last night I succeeded in creating a simple Java script that uses Array of images and thus displays random images on Page refresh. 




Lets have a demo of the widget before jumping to the tutorial. Note:- Refresh the page to see new Ad banners.





Live Demo




How To Add Random Ad Banner Widget To Your Blogs?


Simply follow these steps,


  1. Go To Blogger > Design > Page Elements

  2. Choose HTML/JavaScript Widget

  3. And Paste the following code inside it,



<div align="center">
<table border="0"  cellpadding="2" cellspacing="6" width="265" bgcolor="#ffffff">
<tbody><tr>
<td><center>

<!--  BANNER#1  -->

<script language="JavaScript">
images = new Array(2);

images[0] = "<a href = 'URL OF ADVERTISER' rel='nofollow' ><img src='URL OF BANNER’S IMAGE-1' border='0' height='125' width='125' alt='AD DESCRIPTION'></a>";

images[1] = "<a href = 'URL OF ADVERTISER' rel='nofollow' ><img src='URL OF BANNER’S IMAGE-2' border='0' height='125' width='125' alt='AD DESCRIPTION'></a>";

index = Math.floor(Math.random() * images.length);
document.write(images[index]);
</script>

</center></td>

<td><center>

<!--  BANNER#2  -->

<script language="JavaScript">
images = new Array(2);

images[0] = "<a href = 'URL OF ADVERTISER' rel='nofollow' ><img src='URL OF BANNER’S IMAGE-1' border='0' height='125' width='125' alt='AD DESCRIPTION'></a>";

images[1] = "<a href = 'URL OF ADVERTISER' rel='nofollow' ><img src='URL OF BANNER’S IMAGE-2' border='0' height='125' width='125' alt='AD DESCRIPTION'></a>";

index = Math.floor(Math.random() * images.length);
document.write(images[index]);
</script>

</center></td>
</tr>
<tr>

<td><center>

<!--  BANNER#3  -->

<script language="JavaScript">
images = new Array(2);

images[0] = "<a href = 'URL OF ADVERTISER' rel='nofollow' ><img src='URL OF BANNER’S IMAGE-1' border='0' height='125' width='125' alt='AD DESCRIPTION'></a>";

images[1] = "<a href = 'URL OF ADVERTISER' rel='nofollow' ><img src='URL OF BANNER’S IMAGE-2' border='0' height='125' width='125' alt='AD DESCRIPTION'></a>";

index = Math.floor(Math.random() * images.length);
document.write(images[index]);
</script>

</center></td>

<td><center>

<!--  BANNER#4  -->

<script language="JavaScript">
images = new Array(2);

images[0] = "<a href = 'URL OF ADVERTISER' rel='nofollow' ><img src='URL OF BANNER’S IMAGE-1' border='0' height='125' width='125' alt='AD DESCRIPTION'></a>";

images[1] = "<a href = 'URL OF ADVERTISER' rel='nofollow' ><img src='URL OF BANNER’S IMAGE-2' border='0' height='125' width='125' alt='AD DESCRIPTION'></a>";

index = Math.floor(Math.random() * images.length);
document.write(images[index]);
</script>

</td></center>

</tr>

</tbody></table>

<table border="0" bordercolor="#0084ce" cellpadding="2" cellspacing="6" width="265" bgcolor="#ffffff">
<tbody>
      <tr>
       <td><center><a href="URL OF ADVERTISER" rel="nofollow"><img width="265" height="37" border="0" alt="Advertise Now!" src="file:///C:/Documents%20and%20Settings/Mohammad/Desktop/ADVERTISE-HERE.gif" /></a></center></td>
      </tr>

    </tbody></table>

</div>



MAKE THE FOLLOWING CHANGES:-

1.  Replace URL OF ADVERTISER with the website link of the advertiser

2.  Replace URL OF BANNER’S IMAGE-1  and URL OF BANNER’S IMAGE-2 with the Image links of the Advertiser’s banners

3.  Replace AD DESCRIPTION with some information related to the Ad. The description appears on mouse hover.

4.  If you want to increase the distance between the ad blocks then edit width="265"

Now after making the necessary customization view your blog to see a beautiful 125 by 125 Banner widget that will change Banners on every different page.


Download Animated AD Banners


To ad spice to the widget may be you will prefer some of our previously designed animated banners -> Animated 125 by 125 AD Banners

Do let me know how did you find this new and useful widget. Take care! :D

COMMENTS

Name

Affiliate Marketing,12,Announcement,34,Bing,9,Bitcoin,38,blog,7,Blogger Resources,42,Blogger Templates,4,blogger tricks,156,Blogging ethics,70,Blogging tips,198,Bugs and Errors,34,Business,9,Copyright Violation,9,CSS and HTMLTricks,95,Designs,8,drop down menu,7,eBook,12,Email Marketing,7,Events,30,Facebook,30,Facebook tricks,49,Google,157,Google AdSense,42,Google Analytics,7,Google Plus,51,Google Plus Tricks,38,Guest Posts,112,home,2,How To,77,Internet,1,JSON Feeds,25,Kitchen Recipes,2,Label Based Sitemap Themes,1,Make Money Online,108,Marketing,16,MBT Blogger Templates,7,Menus,1,News,146,Pages,1,Posts,10,presentations,15,Responsive,10,Reviews,7,SEO,307,Settings,6,Shortcode,15,Sitemap Themes,1,Social Media,155,Technology,7,Templates,1,Tips,2,Tools,1,Traffic Tips,80,Video,19,Web Designing,62,web hosting,18,Webmaster Tools,97,Widgets,199,wordpress,26,
ltr
item
Experience Lab - Online business creation and development guide for bloggers and startups: Random Ad Banners Widget For Blogger
Random Ad Banners Widget For Blogger
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4DzNJANyBYOyjeKULjgiDBlVEOU5gQBeYDOuO5FXa5RObSZ-QNo7CcGACoXzE_iTDXnMOgVtFFVr0Gim4U8KE_1ckiVW2Xcff_I8QQRLbwHpEtjRqGAcklB96hjBm59FEEpyZPiOxiJo/?imgmax=800
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4DzNJANyBYOyjeKULjgiDBlVEOU5gQBeYDOuO5FXa5RObSZ-QNo7CcGACoXzE_iTDXnMOgVtFFVr0Gim4U8KE_1ckiVW2Xcff_I8QQRLbwHpEtjRqGAcklB96hjBm59FEEpyZPiOxiJo/s72-c/?imgmax=800
Experience Lab - Online business creation and development guide for bloggers and startups
https://www.experiencelab.info/2010/07/random-ad-banners-widget-for-blogger.html
https://www.experiencelab.info/
https://www.experiencelab.info/
https://www.experiencelab.info/2010/07/random-ad-banners-widget-for-blogger.html
true
2959477579779989044
UTF-8
Loaded All Posts Not found any posts VIEW ALL Readmore Reply Cancel reply Delete By Home PAGES POSTS View All RECOMMENDED FOR YOU LABEL ARCHIVE SEARCH ALL POSTS Not found any post match with your request Back Home Sunday Monday Tuesday Wednesday Thursday Friday Saturday Sun Mon Tue Wed Thu Fri Sat January February March April May June July August September October November December Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec just now 1 minute ago $$1$$ minutes ago 1 hour ago $$1$$ hours ago Yesterday $$1$$ days ago $$1$$ weeks ago more than 5 weeks ago Followers Follow THIS PREMIUM CONTENT IS LOCKED STEP 1: Share. STEP 2: Click the link you shared to unlock Copy All Code Select All Code All codes were copied to your clipboard Can not copy the codes / texts, please press [CTRL]+[C] (or CMD+C with Mac) to copy