How To Create Floating Ads On Blogger/Blogspot

Minggu, 04 Desember 2011

How To Create Floating Ads On Blogger/Blogspot
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

Source: http://www.dynamicdrive.com/