Create a DHTML Ad Box using CSS, JavaScript, and HTML

SEE THE LIVE DEMO

This tutorial was derived from dynamicdrive.com and bloggerized by blogspotvision.com. This DHTML ad script displays an "inexcusable" box in the middle of the page, broadcasting ads of your choice inside. The box automatically disappears after x seconds, with its display frequency configurable (ie. show ad box only 1 out of 5 times the page is loaded.) This is one method of serving ads that may just be effective, since it contains qualities of a TV/radio commercial.

Steps for this tutorial:

1. Log into your Blogger dashboard and navigate to Design > Edit HTML.

2. Insert the following CSS code into your head section.

<style type="text/css"> <!-- #sponsorAdDiv {position:absolute; height:1; width:1px; top:0; left:0;} --> </style> <script type="text/javascript"> adTime=10; // seconds ad reminder is shown chanceAd=1; // ad will be shown 1 in X times (put 1 for everytime) var ns=(document.layers); var ie=(document.all); var w3=(document.getElementById && !ie); var calunit=ns? "" : "px" adCount=0; function initAd(){ if(!ns && !ie && !w3) return; if(ie) adDiv=eval('document.all.sponsorAdDiv.style'); else if(ns) adDiv=eval('document.layers["sponsorAdDiv"]'); else if(w3) adDiv=eval('document.getElementById("sponsorAdDiv").style'); randAd=Math.ceil(Math.random()*chanceAd); if (ie||w3) adDiv.visibility="visible"; else adDiv.visibility ="show"; if(randAd==1) showAd(); } function showAd(){ if(adCount<adTime*10){adCount+=1; if (ie){documentWidth =truebody().offsetWidth/2+truebody().scrollLeft-20; documentHeight =truebody().offsetHeight/2+truebody().scrollTop-20;} else if (ns){documentWidth=window.innerWidth/2+window.pageXOffset-20; documentHeight=window.innerHeight/2+window.pageYOffset-20;} else if (w3){documentWidth=self.innerWidth/2+window.pageXOffset-20; documentHeight=self.innerHeight/2+window.pageYOffset-20;} adDiv.left=documentWidth-200+calunit;adDiv.top =documentHeight-200+calunit; setTimeout("showAd()",100);}else closeAd(); } function closeAd(){ if (ie||w3) adDiv.display="none"; else adDiv.visibility ="hide"; } function truebody(){ return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body } onload=initAd; //End--> </script>

3. Next, add a new HTML/JavaScript gadget under Page Elements and add the following HTML code.

<div id="sponsorAdDiv" style="visibility:hidden"> <table width="450px" height="350px" bgcolor="#008000"><tr><td> <table width="445px" height="345px" bgcolor="#F0FFF0"><tr><td align="center" valign="middle"> <!--*****EDIT THIS MESSAGE*****--> <a href="http://www.amazon.com/exec/obidos/redirect-home/wa0c?tag-id=wa0c&placement=home-btn-100x70.gif&site=amazon"> <img src="http://www.associmg.com/assoc/us/home-btn-100x70.gif?tag-id=wa0c" /></a><p><b>Please take time to show your support<br /> for this site by visiting one<br /> of our sponsors during this<br /> brief intermission.</b> </p> <p><a href="http://www.amazon.com/exec/obidos/redirect-home/wa0c?tag-id=wa0c&placement=home-logo-130x60b.gif&site=amazon"> <img src="http://www.associmg.com/assoc/us/home-logo-130x60b.gif?tag-id=wa0c" /></a></p> <p>(This announcement will close shortly) <br /> <!--*****EDIT THE ABOVE MESSAGE*****--> </p></td></tr></table></td></tr></table> </div> <div class="clear"/></div><br/><br/>

Note: You can style your adbox if you're familiar with CSS.