Membuat Widget Melayang di Blog

Tidak sedikit blogger yang menggunakan widget ini selain untuk mempercantik juga untuk meminimalisir space di blog mereka. Widget melayang pada umumnya sering digunakan oleh admin blog / admin website untuk menempatkan iklan mereka, sebenarnya widget ini tidak hanya dibunakan untuk keperluan iklan semata tapi juga untuk hal-hal lain atau apapun yang ingin diekspresikan kedalam widget tersebut.

Pada kesempatan kali ini saya coba berbagi cara dari cara yang saya pelajari dan berhasil, so mari kita sama-sama belajar. Untuk yang ingin memasang widget melayang di blog, silahkan ikuti tutorial berikut.

Caranya :

• Masuk ke Blogger anda.
• Klik Rancangan / Tata Letak.
• Klik Add Gadget / Tambah Gadget ( tempatkan terserah dimana anda mau ).
• Klik HTML/JAVA SCRIPT.
• Masukan kode berikut di dalamnya :

<style type="text/css">
    #gb{
    position:fixed;
    top:10px;
    z-index:+1000;
    }
    * html #gb{position:relative;}

    .gbcontent{
    float:right;
    border:0px solid #66CC99;
    background:#ffffff;
    padding:10px;
    }
    </style>

    <script type="text/javascript">
    function showHideGB(){
    var gb = document.getElementById("gb");
    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("gb");
    var dx = Math.abs(x0-xf) > 10 ? 5 : 1;
    var dir = xf>x0 ? 1 : -1;
    var x = x0 + dx * dir;
    gb.style.top = x.toString() + "px";
    if(x0!=xf){setTimeout("moveGB("+x+", "+xf+")", 10);}
    }
    </script>

    <div id="gb">

    <div class="gbtab" onclick="showHideGB()"> </div>

    <div class="gbcontent">

    <div style="text-align:right">
    <a href="javascript:showHideGB()">
    >> [ KELUAR ]  [ Klik 2x ] <<
    </a>
    </div>
    <center>
    DISINI MASUKAN KODE / BANNER / IKLAN / APAPUN YANG ANDA INGINKAN    </center>

    <script type="text/javascript">
    var gb = document.getElementById("gb");
    gb.style.center = (30-gb.offsetWidth).toString() + "px";
    </script></div></div>

Ganti tulisan yang berwarna merah dengan kode warna HTML kesukaan anda dan ganti juga tulisan yang berwarna biru dengan kode yang anda iniginkan.


Semoga bermanfaat dan selamat mencoba