Membuat 2 Widget Melayang

Okay....saatnya buat 2 widget melayang.....
langsung aj yach...begini caranya
1. login ke blog sobat
2. Pada bagian dasbor pilih rancangan
3. pilih elemen laman
4. tambah gadget
5. Pilih HTML/Javascript
6. Masukkan Kode berikut
<style type="text/css">
    #gb{
    position:fixed;
    top:30px;
    z-index:+1000;
    }
    * html #gb{position:relative;}
    .gbtab{
    height:200px;
    width:30px;
    float:left;
    cursor:pointer;
    background:url('http://lh3.ggpht.com/_KdeVdQg2Vsw/Swj9uvNEeVI/AAAAAAAAAGs/N5XIUu3ymzY/tabs.png') no-repeat;
    }
    .gbcontent{
    float:left;
    border:#000000;
    background:#000000;
    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.right = x.toString() + "px";
    if(x0!=xf){setTimeout("moveGB("+x+", "+xf+")", 10);}
    }
    </script>
    <div id="gb">
    <div class="gbtab" onclick="showHideGB()"> </div>
    <div class="gbcontent">

    <!-- Include the Google Friend Connect javascript library. -->
    <br />
    <br />
    </div>
    </div>
    <script type="text/javascript">
    var gb = document.getElementById("gb");
    gb.style.right = (30-gb.offsetWidth).toString() + "px";
    </script>
7. save
8. add html lagi
    masukkan kode di bawah ini lalu kalau udah save ya...
<style type="text/css">
    #hitsukeFX{
    position:fixed;
    top:285px;
    z-index:+1000;
    }
    .hitsukeFXtab{
    height:200px;
    width:30px; float:left;
    cursor:pointer;
    background:url(' https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhl8mjCxq8Ck6oUKI08LUsnW05WIaTSEtPCjGvDLcPNxNkt749WRojXU7K-XLXuwVbcrDOLDgZyoZrwcTXWueQehQKnoUrCF2zISc5NAsYEJL4lyQcX8WmgKJoGDFRGy4EhCda9Jlsslck4/s1600/icon1.png ') no-repeat;
    }

    .hitsukeFXcontent{ float:left;
    border:#000000;
    background:#000000;
    padding:10px;
    }

    </style> <script type="text/javascript">
    function showHidehitsukeFX(){
    var hitsukeFX = document.getElementById("hitsukeFX");
    var w = hitsukeFX.offsetWidth;
    hitsukeFX.opened ? movehitsukeFX(0, 30-w) : movehitsukeFX(20-w, 0);
    hitsukeFX.opened = !hitsukeFX.opened;
    }

    function movehitsukeFX(x0, xf){ var hitsukeFX = document.getElementById("hitsukeFX"); var dx = Math.abs(x0-xf) > 10 ? 5 : 1; var dir = xf>x0 ? 1 : -1; var x = x0 + dx * dir; hitsukeFX.style.right = x.toString() + "px"; if(x0!=xf){setTimeout("movehitsukeFX("+x+", "+xf+")", 10);} }


    </script>
    <div id="hitsukeFX"> <div class="hitsukeFXtab" onclick="showHidehitsukeFX()"> </div>
    <div class="hitsukeFXcontent">  
    
      <!-- Begin ShoutMix - http://www.shoutmix.com --><!-- End ShoutMix -->


    <br />
    <br />
    <div style="color: white; font-family: &quot;Trebuchet MS&quot;,sans-serif;">
    Widget By <a href="http://www.sichandra.com/">Muhammad Chandra</a></div>

    <div style="text-align:right">
    <a href="javascript:showHidehitsukeFX()"> [close] </a>
    </div>
    </div>
    </div><script type="text/javascript"> var hitsukeFX = document.getElementById("hitsukeFX"); hitsukeFX.style.right = (40-hitsukeFX.offsetWidth).toString() + "px"; </script>

Catatan: Pada tulisan yang bercetak merah, letakkan html sobat  di bawahnya............
Sumber : http://www.sichandra.com/2010/12/membuat-dua-widget-tersembunyi-di-blog.html