Author Topic: Random Ad Banners Widget For Blogger  (Read 962 times)

0 Members and 1 Guest are viewing this topic.

Offline ebenzunlimited

  • Lead Admin
  • *****
Random Ad Banners Widget For Blogger
« on: June 12, 2012, 04:23:12 AM »
n 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.
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,
Code: [Select]
<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 and Settings/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.
Insane I Lived♥ Sane I Died♥<img src='http://i253.photobucket.com/albums/hh74/reallytired2/family%20pictures/buckeye%20stuff/clap.gif' />

 

* Post Updates

WPX is giving out 6 months of free WordPress hosting this week by obasimiracle
[November 25, 2020, 01:56:47 AM]


Re: Outlook PST Merge by ruth less
[November 11, 2020, 07:22:38 AM]


Re: How to Convert OLM to PST by priyankaarya
[November 10, 2020, 01:03:10 PM]

Inside: 3P Techies Blog

* Newest Techies

Get Updates


Sign up to get latest updates delivered to your inbox. No Spam, We Promise!

Get Hosting!

a Faster web hosting service

Copyright © 3rd Planet Techies. All rights Reserved.

Top || Mobile ||Advertise || Contact Us || Privacy