Show/hide kotak followers

Follow......follow mungkin kata-kata ini sudah tidak asing lagi bagi para sobat blogger. Nah tips kali ini adalah cara membuat kotak followers show/hide. Jika sobat mau membuat kotak follow yang lebih keren, ikuti saja langkah berikut :

1. Login ke blogger sobat
2. Klik Rancangan, kemudian sobat klik Tambah Gadget
3. Jika sudah sobat pilih HTML/Javascript
4. Kemudai copy kode berikut kemudian paste pada HTML/Javascript tadi

<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://i51.tinypic.com/rcq4b7.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">

Kode Widget Follow Disini

<div style="text-align: right;">
<a href="javascript:showHideFL()">
[Tutup]
</a></div>
<font size="2"><a href="http://www.deltanetkabunan.com/2011/06/cara-membuat-kotak-follow-showhide.html"target=_blank"><div style="color: #444444;">
<span style="font-size: xx-small;">By Delta Net</span></div></a></font>
</div>
</div>
<script type="text/javascript">
var fl = document.getElementById("fl");
fl.style.bottom = (-100-fl.offsetWidth).toString() + "px";
</script>

Eitts tapi jangan di save dulu yah kita lanjutkan ke langkah berikut nya

5. Ambil kode widget follow nya di http://www.google.com/friendconnect/

Pilih Blog Sobat yang akan di pasang widget follow
Klik Tambah Gadget Anggota
Nah sobat atur warna, ukuran, dll sesuai selera sobat
Jika sudah di atur sobat klik Buat Kode
Silahkan copy kode nya dan kita lanjut ke langkah selanjut nya

6. Paste kode widget follow yang tadi sobat copy dan gantikan pada tulisan Kode Widget Follow Disini

7. Simpan
ups masih ada 2 langkah lagi nih sob

8. Untuk memunculkan kotak follow nya kita harus membuat tombol untuk membuka nya. Sobat masuk pada Rancangan >> Edit HTML

9. Cari kode <body> menggunakan CTRL + F dan paste kode berikut tepat diatas kode <body>

<a href='javascript:showHideFL()' style='display:scroll;position: fixed; bottom:5px;left:5px;' title='Follow'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgOsoCsyThj_GutkZaZxiN8wRXAZm5Y1U61JCF0Aw_sgVDCHOQlTridqij5DyAQcdrXcAWgOEVQbsTwAx1dddhHooN-lCQ5InFepgf2IVVUn-UChyHjbO33dZlZqZvOMalh7na38kdso6fr/'/></a>

10. Simpan template dan lihat hasil nya

Akhirnya selesai juga Cara Membuat Kotak Follow Show/Hide, Semoga Bermanfaat...