Membuat Widget Followers Blog Show/Hide

Kali ini saya akan beritahu cara memasang widget Google Friend Connect atau yang lebih dikenal Google Followers dengan cara yang berbeda dari yang lainnya. Apa yang berbeda? jika biasanya widget ini hanya terpasang di sidebar blog orang-orang, maka kali ini Widget tersebut bisa disembunyikan, dan dapat dilihat dengan diklik.
Berminat? Ikuti langkah-langkah berikut !




1. Login dengan akun blogger sobat
2. Masuk rancangan/design
3. Pilih Tata Letak/Layout
4. Klik Add a gadget, dan pilih HTML/Javascript
5. Selanjutnya, Copy Paste kode berikut didalamnya :

<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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjXuzQvl7EK0zs9QS4vo7L9KhIDVyL_WH11GQw-8FcnCEw7tBfFYq7W6c9TfeFH5tc59RtoaPmxMBVG5bVVIbMgrmzQX4IlrqEagMdDKKvq7Lrp-HimB5hz6cLMRoPcnOBQTnAguav9C56M/)#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 GOOGLE FRIEND CONNECT DISINI

<div style="text-align: right;">
<a href="javascript:showHideFL()">
[Tutup]
</a></div>
<font size="2"><a href="http://kode-blogger.blogspot.com/2011/04/membuat-show-hide-widget-followers.html"target=_blank"><div style="color: #444444;">
<span >By kode-blogger</span></div></a></font>
</div>
</div>
<script type="text/javascript">
var fl = document.getElementById("fl");
fl.style.bottom = (-100-fl.offsetWidth).toString() + "px";
</script>

Jangan disimpan dulu sob, masih ada langkah berikutnya neh

6. Sekarang sobat membuat kode widget followers-nya dengan google friend connect, untuk mengambil kode widget follownya silahkan masuk ke link ini http://www.google.com/friendconnect

Screenshot

7. Setelah masuk Pilihlah blog sobat yang akan dipasang widget follow-nya
8. Klik "Tambahkan Gadget Anggota"
9. Aturlah ukuran, warna dsb... menurut selera sobat/sesuaikan dengan blog sobat
10. Klik "Buat kode"
11. Copy Kode nya, Lalu Paste kode tersebut menggantikan "KODE GOOGLE FRIEND CONNECT DISINI"
12. Lalu Save
13. Terakhir, Masih pada "Elemen Halaman" Tambahkan gadget HTML/Java Script, Kemudian copy paste-kan kode berikut ini:

<a href="javascript:showHideFL()"/><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhjtxH1EVGJ8K8SUKJQexbI8PLlo6C6FU7-SAM2l3wuB5j5kTjebu6rli_BIiokpRyujcCQNM_1y3sVsNwZwVK6cMLedf6h9AWViATwXw5eZRsbcFkOKIqyJOvurg-4R2eaOO_kx3l7x2gL/" alt="kode" title="Klik untuk membuka kotak Follow" style="display:scroll;position: fixed; top:150px;right:0px;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="130px" width="40px" /></a>

14. Save dan lihatlah hasilnya.