Cara Membuat Hide / Show Widget Follow Di Blog

Posted on
Suatu anda berkunjung di blog kawan anda, anda ternyata bingung mencari kotak followers-nya dimana. nah mungkin kawan anda memakai google friendconnect tersembunyi dengan fasilitas show/hide ini blog kawan anda meminimalkan tampilan. nah sekarang kalian jangan heran lagi kali ini saya akan membantu anda Membuat Hide / Show Widget Follow Di Blog :
1. sign in ke blogger anda terlebih dahulu
2. pilih rancangan
3. pilih eleman halaman >> pilih html/javascript
4. copy paste script dibawa ini [skrip 1]

5. jangan di save/simpan dulu ya…

<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(http://lh3.ggpht.com/_yF0–u7KSSI/TKIlkEJwkEI/AAAAAAAAAtg/uFf3eLsXlyg/fire2.gif)#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”>

    widget followers disini

    <div style=”text-align: right;”>
    <a href=”javascript:showHideFL()”>
    [Tutup]
    </a></div>
    <font size=”2″><a href=”http://www.berbagidisini.com/2010/10/memasang-widget-follow-showhide.html”target=_blank”><div style=”color: #444444;”>
    <span style=”font-size: xx-small;”>By enda fiVers</span></div></a></font>
    </div>
    </div>
    <script type=”text/javascript”>
    var fl = document.getElementById(“fl”);
    fl.style.bottom = (-100-fl.offsetWidth).toString() + “px”;
    </script>

widget followers disini

6. sekarang anda menuju ke [http://www.google.com/friendconnect]
7. lihat gambar :

  1. pilih judul blog/situs anda terlebih dahulu
  2. pilih “tambahkan gadget anda”
  3. sesuaikan ukurannya.dan warnanya.
  4. klik “buat kode”
  5. copy kodenya dan ganti kan di kode diatas yang berwarna biru

8. klik save jendela html/javascript tadi

langkah kedua :
1. masuk ke rancangan >> edit html
2. copy kode ini untuk meletakkan tombolnya

<a href=’javascript:showHideFL()’ style=’display:scroll;position: fixed; bottom:5px;left:5px;’ title=’Follow’><img src=’http://lh4.ggpht.com/_yF0–u7KSSI/TKWWpZF5MKI/AAAAAAAAAu4/E18Axu8eACI/Follow.png’/></a>

3. cari kode , letakan diatasnya.
4. kemudian simpan template

jadi deh…. selamat mencoba…

Gravatar Image
Suka jalan-jalan, naik sepeda, bermain code-code asal tidak suka mengkode cinta. Hubungi email : andhika.na@gmail.com jika anda butuh website untuk personal maupun bisnis.

One thought on “Cara Membuat Hide / Show Widget Follow Di Blog

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.