Monday, 22 August 2011

Create Floating Ads On Blogger


http://www.biindit.com/images/floating.jpg

Floating top bar ads is an ads in the box that will be always on the top of your blog post until it is closed.  For implementation with adsense, I suppose you toread Google policy about Adsense implementation policy.

1. Login to Blogger.  Got to your blog --> Design --> Edit HTML.

2. Place the script below at position after <head> dan before </head>.  Don't forget to escape this html code so it can be implemented in blogger.



&lt;style type=&quot;text/css&quot;&gt;


#topbar{


position:absolute;


border: 1px solid black;


padding: 2px;


background-color: lightyellow;


width: 338px;


visibility: hidden;


z-index: 100;


}


&lt;/style&gt;


&lt;script type=&quot;text/javascript&quot;&gt;


/***********************************************


* Floating Top Bar script- &#65533; Dynamic Drive (www.dynamicdrive.com)


* Sliding routine by Roy Whittle (http://www.javascript-fx.com/)


* This notice must stay intact for legal use.


* Visit http://www.dynamicdrive.com/ for full source code


***********************************************/


var persistclose=0 //set to 0 or 1. 1 means once the bar is manually closed, it will remain closed for browser session


var startX = 320 //set x offset of bar in pixels


var startY = 5 //set y offset of bar in pixels


var verticalpos=&quot;fromtop&quot; //enter &quot;fromtop&quot; or &quot;frombottom&quot;


function iecompattest(){


return
(document.compatMode &amp;&amp;
document.compatMode!=&quot;BackCompat&quot;)?
document.documentElement : document.body


}


function get_cookie(Name) {


var search = Name + &quot;=&quot;


var returnvalue = &quot;&quot;;


if (document.cookie.length &gt; 0) {


offset = document.cookie.indexOf(search)


if (offset != -1) {


offset += search.length


end = document.cookie.indexOf(&quot;;&quot;, offset);


if (end == -1) end = document.cookie.length;


returnvalue=unescape(document.cookie.substring(offset, end))


}


}


return returnvalue;


}


function closebar(){


if (persistclose)


document.cookie=&quot;remainclosed=1&quot;


document.getElementById(&quot;topbar&quot;).style.visibility=&quot;hidden&quot;


}


function staticbar(){


barheight=document.getElementById(&quot;topbar&quot;).offsetHeight


var ns = (navigator.appName.indexOf(&quot;Netscape&quot;) != -1) || window.opera;


var d = document;


function ml(id){


var el=d.getElementById(id);


if (!persistclose || persistclose &amp;&amp; get_cookie(&quot;remainclosed&quot;)==&quot;&quot;)


el.style.visibility=&quot;visible&quot;


if(d.layers)el.style=el;


el.sP=function(x,y){this.style.left=x+&quot;px&quot;;this.style.top=y+&quot;px&quot;;};


el.x = startX;


if (verticalpos==&quot;fromtop&quot;)


el.y = startY;


else{


el.y = ns ? pageYOffset + innerHeight : iecompattest().scrollTop + iecompattest().clientHeight;


el.y -= startY;


}


return el;


}


window.stayTopLeft=function(){


if (verticalpos==&quot;fromtop&quot;){


var pY = ns ? pageYOffset : iecompattest().scrollTop;


ftlObj.y += (pY + startY - ftlObj.y)/8;


}


else{


var pY = ns ? pageYOffset + innerHeight - barheight: iecompattest().scrollTop + iecompattest().clientHeight - barheight;


ftlObj.y += (pY - startY - ftlObj.y)/8;


}


ftlObj.sP(ftlObj.x, ftlObj.y);


setTimeout(&quot;stayTopLeft()&quot;, 10);


}


ftlObj = ml(&quot;topbar&quot;);


stayTopLeft();


}


if (window.addEventListener)


window.addEventListener(&quot;load&quot;, staticbar, false)


else if (window.attachEvent)


window.attachEvent(&quot;onload&quot;, staticbar)


else if (document.getElementById)


window.onload=staticbar


&lt;/script&gt;


3. Save Template

4. Click Layout

5. Click Add Gadget

6. Choose HTML/JavaScript

7. Place script below


<div id="topbar">

<a href="" onClick="closebar(); return false"><img src="
http://i729.photobucket.com/albums/ww298/trimulyawan/close.gif "
border="0" /></a>


---- Paste your adsense here ----

</div>

8. Save

0 comments:

Post a Comment