buat widget follow show-hide

Follow......follow mungkin kata-kata ini sudah tidak asing lagi bagi para maniak blogger. Nah tips kali ini adalah cara membuat kotak followers anda melayang dengan mode show/hide. Jika anda 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. Kemudian 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>
</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 yang akan di pasang widget follow


• Klik Tambah Gadget Anggota


• Nah atur warna, ukuran, dll sesuai selera ente


• 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 anda copy dan gantikan pada tulisan Kode Widget Follow Disini

7. Simpan
ups masih ada 1 langkah lagi nih (banyak kali langkah²nya,, pegel woe)

8. Untuk memunculkan kotak follow nya kita harus membuat tombol untuk membuka nya. 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/AVvXsEg1Wnq_iSKzG5G1B1lg9izz29tXrS4sSpZ4fGIvVhTs9YeH_1YK_-Vcf0OHdnbJlZjAwgO_DP_cF5v5VOwQe5P3rrgKAdmyuD-YeV5tTOWHMJP2w7onBkZVUfKle_DZeZgdF5r88Zf0h3b0/'/></a>

10. Simpan template dan lihat hasilnya

Akhirnya selesai juga