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.
How To Add Random Ad Banner Widget To Your Blogs?
Simply follow these steps,
- Go To Blogger > Design > Page Elements
- Choose HTML/JavaScript Widget
- 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
Meta description and meta keywords are the most popular html tags which are still recommended despite many arguments by several expert Search engine Optimizers. The first thing that every 
I received several emails this week regarding how to create a contact form, web form, email form etc. Few months back I wrote a detailed tutorial on how to create a HTML and CSS based Email Me form. In that tutorial I mentioned every single step of embedding a high quality free Contact form in your 
I published two posts today and was shocked when I found out that how fast is Google crawling this website. It took less then a minute for my search results to appear. It was interesting to see how fast Google crawls a 
After writing a post on 
Windows Live Writer Tricks tutorials are increasing day by day. WLW is a visual blog editor for Windows. It works with most blogging platforms like WordPress, TypePad, Movable Type, Blogger, and others. I always use it when I write posts even when I am offline. As a regular user of this useful editor I just figured out many keyboard shortcuts while playing with this cool high quality text editor. I have compiled each and every keyboard shortcut that works with Windows Live Writer and have listed them below for your ease.
