How to Add Dynimic Random Ad Banners Widget For Blogger

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> 
TO 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.
banner
Previous Post
Next Post

0 comments: