Widget Google Followers Tersembunyi

Posted by Madie Zha on Tuesday, December 27, 2011

Widget followers yang satu ini lebih ringan di bandingkan dengan Widget followers standard dari bloger, karena widget followers-nya kita sembunyikan maka loading blog terkesan lebih ringan. Berikut cara Memasang Widget followers yang lebih ringan dengan mode Show-Hide :
  1. Login dengan akun blogger sobat, klik Rancangan / Design > Elemen laman / Page Element.
    Page Element
  2. Klik Add a gadget / Tambah Gadget, dan pilih HTML/Javascript.
    Html JavaScript
  3. Letakkan kode berikut didalam area konten;
    <style type="text/css">
    #fl{position:fixed; left:150px; z-index:+1000;}
    * html #fl{position:relative;}
    .flcontent{
    float:left;
    border:2px solid #676767;
    background:#dddddd 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">

    Letakan Kode Widget Follow Disini

    <div style="text-align: right;">
    <a href="javascript:showHideFL()">
    [Close]
    </a></div>
    <font size="2"><a href="http://wadahtutorial.blogspot.com/"target=_blank"><div style="color: #eeeeee;">
    <span >Tutorial Blog</span></div></a></font>
    </div>
    <script type="text/javascript">
    var fl = document.getElementById("fl");
    fl.style.bottom = (-100-fl.offsetWidth).toString() + "px";
    </script></div>
  4. Ganti Letakan Kode Widget Follow Disini [kode yang berwarna merah] dengan kode Widget Follow dari google friend connect, untuk mengambil kode widget follownya silahkan ikuti tutorial Widget Followers Google Friend Connect
  5. Setelah dapat kode-nya, paste kode tersebut pada area konten Widget Follow tadi, Lalu Save
  6. Terakhir, masih pada Elemen Halaman, klik Tambahkan gadget > HTML/Java Script sekali lagi, Kemudian copy paste-kan kode berikut ini:
    <a href="javascript:showHideFL()"/><img border="0" src="http://i1193.photobucket.com/albums/aa345/bakulatz/fl.png" alt="Follow" title="Klik untuk membuka kotak Follow" style="display:scroll;position: fixed; top:30px;right:50px;cursor:pointer;style=" opacity:1;filter:alpha(opacity="100)&amp;amp;amp;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="49px" width="130px" /></a>
  7. Save dan lihatlah hasilnya.
Semoga Bermanfaat...

Sumber : Widget Google Followers Show Hide

.:: 1 comments .:. add Comment ::.

  1. artikel yang anda berikan sangat membantu sekali dan jangan lupa mampir ke blog saya http://obatambevenatauwasir.blogspot.com/

    ReplyDelete

m4d13_Blog