Sunday, 12 February 2012

Cara Membuat Iklan Melayang Di Pojok

Advertisement

Selain dengan membuat iklan melayang dengan tombol close atau iklan melayang di atas header, sobat juga bisa membuat iklan melayang di pojok blog untuk meningkatkan earning dari iklan.

Dengan membuat iklan melayang di pojok blog maka iklan tersebut tidak terlalu mengganggu pengunjung, apalagi jika di kasih opsi close.


cara membuat iklan melayang di pojok blog


Langsung saja, berikut ini

cara membuat iklan melayang di pojok dengan tombol close


  1. Seperti biasa, login dulu ke blogger.

  2. Langkah selanjutnya adalah membuat css untuk iklan melayang di pojok blog ini.

  3. Copy paste kode berikut dan letakkan di atas kode ]]></b:skin> pada template sobat

    #bottom-right {position:fixed;_position:absolute;top:0px; right:0px;
    clip:inherit;_top:expression(document.documentElement.scrollTop+document.documentElement.clientHeight-this.clientHeight);_left:expression(document.documentElement.scrollLeft+document.documentElement.clientWidth - offsetWidth);}

    .gbcontent{
    float:right;border:2px solid #ffffff;background:#ffffff;padding:10px;
    }


  4. Setelah membuat css untuk iklan melayang tersebut, langkah selanjutnya adalah memasang iklan, cari kode </body> dan letakkan kode berikut ini di atas kode </body>:

    <script type='text/javascript'>
    function showHideGB(){
    var gb = document.getElementById(&quot;bottom-right&quot;);
    var w = gb.offsetWidth;
    gb.opened ? moveGB(0, 30-w) : moveGB(20-w, 0);
    gb.opened = !gb.opened;
    }
    function moveGB(x0, xf){
    var gb = document.getElementById(&quot;bottom-right&quot;).style.display = &quot;none&quot;;
    var dx = Math.abs(x0-xf) &gt; 10 ? 5 : 1;
    var dir = xf&gt;x0 ? 1 : -1;
    var x = x0 + dx * dir-100;
    gb.style.top = x.toString() + &quot;px&quot;;
    if(x0!=xf){setTimeout(&quot;moveGB(&quot;+x+&quot;, &quot;+xf+&quot;)&quot;, 10);}
    }
    </script>
    <div id='bottom-right'>
    <div style='text-align:right'>
    <a href='javascript: void(0)' onclick='showHideGB()'><img alt='close' border='0' height='13' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8gcSgFSiTsKUQq70lC1ea3WJasD1wjlhROUfpWpWUMzR-Q3VjsgPkjee1iYX_Ai0Sakp3xZxmeXo1dYOHUvzLmCMOkOaXdnYx21YfsFIt8bgGwdBZmrfjDPDOXXPKbFkBwtxeMlU2ZBdu/s200/close.png' title='Close' width='49'/></a>
    </div>
    Kode Iklan Yang Sudah Di Parse
    </div>


  5. Save dan lihat hasilnya.

Tulisan yang berwarna merah (bottom-right) adalah nama (id) div yang sudah kita deklarasikan sebelumnya, sobat juga bisa merubah gambar tombol close untuk mempercantik iklan melayang di pojok ini sesuai dengan gambar yang sobat inginkan.

Semoga bermanfaat dan semoga juga dengan iklan melayang di pojok ini bisa meningkatkan earning sobat :)


EmoticonEmoticon