Widget Follower Melayang

Salam persahabatan, kali ini saya share bagaimana membuat widget follower Google Friend Connect melayang dengan mode show/hide.
Trik ini hampir sama dengan membuat buku tamu tersembunyi dan hanya sedikit modifikasi script, bagaimana penasaran ingin membuatnya?
Sahabat pencinta bloger tentunya pengen membuat blognya semenarik mungkin.. salah satunya dengan asesoris dan tampilan yang berbeda dari yang lainnya...sahabat bloger saya mengajak sahabat untuk menerapkan tutorial yang satu ini, karna bang udin pengen sahabat pencinta bloger, mengembangkan blognya dan mempercantik tampilannnya...
jika mau silahkan ikutin caranya sahabat tanks...

Ok, mari kita ikuti langkah-langkah membuat widget Follower melayang sebagai berikut :

1.     Sobat login dahulu ke Blogger

2.    Pilih Design >> Page Elemens >> Add Gadget Html/Java Script

3.    Copy dan pastekan kode berikut ke dalam Gadget sobat

    <style type="text/css">
    #fl{
    position:fixed;
    left:150px;
    z-index:+1000;
    }
    * html #fl{position:relative;}
    .flcontent{
    float:left;
    border:2px solid #676767;
    background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiXna7ABma5GAIg66W6BTKu2x8pKbjpEnHRIuBDScYlJ0MGrm8MRZ0NbDFAavZALxqtS4zcuuv0SMttEZu_JcHLMk3CZ_AUQgtyHHIqQrC3wOZqwjgjf-xHLaMr09kBP48qGN63FK9dzidp/)#000000 repeat-x bottom center scroll;
    -moz-border-radius-topleft:15px;
    -moz-border-radius-topright:15px;
    -moz-border-radius-bottomleft:15px;
    -moz-border-radius-bottomright:15px;
    padding:10px;
    }
    </style>
    <script type="text/javascript">
    function showHideFL(){
    var fl = document.getElementById("fl");
    var w = fl.offsetWidth;
    fl.opened ? moveFL(0, -100-w) : moveFL(20-w, 0);
    fl.opened = !fl.opened;
    }
    function moveFL(x0, xf){
    var fl = document.getElementById("fl");
    var dx = Math.abs(x0-xf) > 25 ? 35 : 1;
    var dir = xf>x0 ? 1 : -1;
    var x = x0 + dx * dir;
    fl.style.bottom = x.toString() + "px";
    if(x0!=xf){setTimeout("moveFL("+x+", "+xf+")", 10);}
    }
    </script>
    <div id="fl">
    <div class="fltab" onclick="showHideFL()"> </div>
    <div class="flcontent">

    Kode Widget Follow Disini

    <div style="text-align: right;">
    <a href="javascript:showHideFL()">
    [Tutup]
    </a></div>
    <font size="2"><a href="http://trik-blogger-andreas.blogspot.com/2011/03/membuat-widget-follow-melayang.html"target=_blank"><div style="color: #444444;">
    <span style="font-size: xx-small;">By Trik Blogger</span></div></a></font>
    </div>
    </div>
    <script type="text/javascript">
    var fl = document.getElementById("fl");
    fl.style.bottom = (-100-fl.offsetWidth).toString() + "px";
    </script>

4.    Ganti tulisan Kode Widget Follow Disini yang berwarna dengan kode Widget Follow sobat
5.    Setelah itu simpan gadget sobat
6.    kemudian sobat pilih tab Edit HTML
7.    Cari kode <body> dan paste code di bawah ini tepat diatas kode <body>

<a href="javascript:showHideFL()"/><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgyBd42_179FWti-7eD3sCIEt4zh_7DCFKsD9uNRFRQP25gX1dIgCYSYOkJYr2evncK5F4-k8jAJV0carwaE4xOUWcCdgg_AIlQP2p-G9AliSuXiQHIC1pQc_rPOcDh9TftHohYRnqfN8hX/" alt="Fivers" title="Klik untuk membuka kotak Follow" style="display:scroll;position: fixed; top:35px;left:0px;cursor:pointer;style=" opacity:1;filter:alpha(opacity="100)&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;quot;" onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100" onmouseout="this.style.opacity=0.5;this.filters.alpha.opacity=50" ;" height="130px" width="40px" /></a>

8. Simpan template sobat dan lihat hasilnya
Semoga mencoba dan semoga berhaasil

Cand Blogger

Selasa, 20 September 2011

Widget Follower Melayang

0 komentar:

Posting Komentar

Top Populer