Do you want to show tonnes of advertisement but don't want to annoy your reader with a blog post crowd with ads? Then a banner rotator should be use, this allow you to show tonnes of ads without crowding your blog page.
This banner is not hard to edit like other into your blogspot template. This script also allow you to put an expiry date to which banner should be removed from the banner rotation. This is a great feature for those blog writer who is selling advertisement on their blogspot.
Now I will go through a step by step on how to put a banner rotator on your blogspot template.
This is a simple banner rotator
This javascript is from Spyka
This is a simple javscript banner image rotator. Supports unlimited banners, size can be adjusted and date set for banners to be removed from rotation automatically. The script will randomly show 1 banner from the the list provided for each ad location on the page you set. You can asign specific banners to a location or have them display randomly.
Features:
- Quick to install
- Supports unlimited banners
- Force banner size option
- Open links any new window or same pageNEW
- Easy styling optionsNEW
- Inactive banners automatically removed from rotation
- Easy to implement multiple times on the same page
- Assign banners to specific locations on a pageNEW
- Same banners won't show on same page
- Refresh ad locations every X milliseconds
- Minified and full versions of program
In order for this script to run the user must be running a javascript enabled browser.
The script has been tested on:
- Internet Explorer 6, 7 and 8
- Firefox 3.5
- Opera 10
- Chrome
Now, I will show you step by step on how to place the banner rotator to work.
Step 1: Go to Template > Edit HTML and find </head>
Step 2: Above the closing head tag paste the following code:
<script src='banners.min.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
var settings = {
'force_size': 0, // if set to 1 all banners will be resized to the width and height in the next to settings
'img_width': 468, // width to resize all banners to, only takes effect if above is 1
'img_height': 60, // height to resize all banners to, only takes effect if above is 1
'refresh_time': 5000, // the seconds between refreshs of the banners - use 0 to disable
'refresh_max': 100, // maximum number of refreshs on each page load
'duplicate_banners': 0, // keep as 0 to make sure the same banner won't show on the same page. will only take effect
// if show_banners(); is used more than once. You must make sure you have enough banners to fill
// all the slots else the browser may freeze or give a stack overflow error
'location_prefix': 'adLocation-', // The prefix of the IDs of the <div> which wraps the banners - this div is generated dynamically.
// a number will be added on the end of this string. adLocation- was used by default before version 1.4.x
'location_class': 'swb', // A class to add to all of the <div>s which wrap the banners, ideal to use for styling banners - use .swb img in your CSS 'window': '_self', // Window to open links in, _self = current, _blank = new. Use _top if in a frame! 'default_ad_loc': 'default' // The default adLocation. This is assigned to any banners not given an adLocation in the below banner list
// There is no real reason to need to change this
}
/**
Banners
**/
// banner list syntax: new banner(website_name, website_url, banner_url, show_until_date, adlocation), DATE FORMAT: dd/mm/yyyy
// if you're not using adlocations just leave it empty like '' as in the last example here
// to make sure a banner is always rotating, just set the date far into the future, i.e. year 3000
var banners = [
new banner('Name', 'URL Link', 'Image Link', 'Date', 'adLocationName'),
new banner('Name', 'URL Link', 'Image Link', 'Date', 'adLocationName'),
]
// There is no need to edit below here
///////////////////////////////////////////////////////////////////////////////////
var used=0;var location_counter=0;var refresh_counter=1;var map=new Array();function banner(a,b,c,d,e){this.name=a;this.url=b;this.image=c;this.date=d;this.active=1;this.oid=0;if(e!=''){this.loc=e}else{this.loc=settings.default_ad_loc}}function show_banners(a){location_counter=location_counter+1;if(a!=''&&a!=undefined){map[location_counter]=a}else{map[location_counter]=settings.default_ad_loc}var b='<div id="'+settings.location_prefix+location_counter+'" class="'+settings.location_class+'"></div>';document.write(b);display_banners(location_counter)}function display_banners(a){var b=new Array();if(a==''||!a||a<0){return}var c=banners.length;if((c==used)&&settings.duplicate_banners==0){return}for(i=0;i<(banners.length);i++){banners[i].oid=i;if((banners[i].loc==map[a])&&(banners[i].active==1)){b.push(banners[i])}}var d=Math.floor(Math.random()*b.length);var e=b[d];var f=(settings.force_size==1)?' width="'+settings.img_width+'" height="'+settings.img_height+'"':'';var g='<a href="'+e.url+'" title="'+e.name+'" target="'+settings.window+'"><img border="0" src="'+e.image+'"'+f+' alt="'+e.name+'" /></a>';var h=new Date();var j=e.date;j=j.split('/',3);var k=new Date();k.setFullYear(parseInt(j[2]),parseInt(j[1])-1,parseInt(j[0]));if((h<k)&&e.active==1){var l=document.getElementById(settings.location_prefix+a);if(l==null){alert('spyka Webmaster banner rotator\nError: adLocation doesn\'t exist!')}else{l.innerHTML=g;if(settings.duplicate_banners==0){banners[e.oid].active=0;used++}return}}else{display_banners(a)}return}function refresh_banners(){if((refresh_counter==settings.refresh_max)||settings.refresh_time<1){clearInterval(banner_refresh)}used=0;for(j=0;j<(banners.length);j++){banners[j].active=1}for(j=1;j<(location_counter+1);j++){display_banners(j)}refresh_counter++}var banner_refresh=window.setInterval(refresh_banners,settings.refresh_time);
//]]>
</script>
Change the following item in the listed color:
Red is all your banner's detail
Blue is the refresh time in millisecond
When you have done editing the code, save the template and go to the next step.
Step 3: Go to Layout > Add Gadget >HTML/Javascript
In this step you need to paste the following code in the gadget
<script type="text/javascript"> show_banners('adLocationName'); </script>
The
adLocationName should be the same as the
adLocationName in the step 2's script. This code allow which banner to appear on which gadget
The click save when you have done the following thing.
For Example:
adLocationName sets a name to ads at that location. The name refers to the adlocation name on the banners list earlier. For example, the below code:
<script type="text/javascript">
show_banners('468x60');
</script>
...will show all the banners from the list which have an adlocation name of "468x60"
Leaving the adLocationName blank will result in any banners in the list which also don't have an assigned adlocation being displayed. You can also mix and match and have some locations with adLocationNames and others without. For example, this banner:
<script type="text/javascript">
show_banners();
</script>
...and will show all banners which have not been assigned to a specific location. In this demo that is only the one!
If you have done the above step, your banner should start rotating.
