Widget Google Followers Show-Hide

Pada tutorial blogspot kali ini saya akan berbagi tentang Widget followers. Widget followers yang satu ini lebih ringan di bandingkan dengan Widget followers standard dari bloger, karena widget followers-nya di 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.

    Widget Google Followers Show-Hide

  2. Klik Add a gadget / Tambah Gadget, dan pilih HTML/Javascript.

    Widget Google Followers Show-Hide

  3. Letakkan kode berikut didalam area konten, untuk mengcopy kodenya silakan klik tanda view source.

    Widget Google Followers Show-Hide

    <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 onclick="showHideFL()"> </div>
    <div>
    
    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 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 Scriptsekali 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

Comments
3 Responses to “Widget Google Followers Show-Hide”
  1. waduh, gan. sumber yang ingin dituju malah ada malwarenya.

  2. mayank says:

    thanx banget gan.. ane menuju TKP dulu…
    oh ya… klo untuk beberapa item berupa image2 icon… kode untuk show/hide nya gmana gan

    • BakulatZ says:

      Kode diatas dapat Anda gunakan, caranya ganti “Letakan Kode Widget Follow Disini” dengan kode image yang ingin Anda pajang. pada kode kedua ganti *http://i1193.photobucket.com/albums/aa345/bakulatz/fl.png* dengan alamat image pemanggilnya.
      semoga jawaban singkat ini bisa membantu…

Silakan tinggalkan komentar Sobat disini. Terima kasih...

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: