Cara Membuat Show-Hide widget FOLLOW

Nah setelah saya posting tentang membuat Tab View versi 2 . Nah sekarang akan ku share tentang cara membuat tombol Follow seperti punya blog saya. Yang ada di samping tuh. Kelibihan dari tombol FOLLOW ini adalah dapat memperindah blog kita dan juga membuat blog kita menjadi lebih simple.

Nah Penasaranya cara membuat nya? mari kita coba saja cara di bawah ini.

1. Login dengan akun blogger anda
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/AVvXsEj2fPFRGnKy7W1W-9T5USYm3Gl9mA3XBtHPZadCndC5_C33BogkQmJJ2iqPQ1vEqU0WnXRunmjZGQe9d0VUfg7gciHj_w1nlde1njKHC06dvbxgdqq4AVHhmKr8JfsTcuuS-dJ8nBfRRKvG/f)#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="titi-share.blogspot.com"target=_blank"><div style="color: #444444;">
<span >By Titi-sharer</span></div></a></font>
</div>
</div>
<script type="text/javascript">
var fl = document.getElementById("fl");
fl.style.bottom = (-100-fl.offsetWidth).toString() + "px";
</script>


Nah setelah selesai, jangan klik save dulu . Masih ada langkah2 selanjutnya..






Nah tulisan yang berwarna merah di atas itu akan kita isi dengan kode follow nya.
caranya buka link ini http://www.google.com/friendconnect

Lalu

7. Setelah masuk pilihlah blog anda yang akan dipasang widget follow-nya

8. Klik "Tambahkan Gadget Anggota"
9. Aturlah ukuran, warna ,tampilan dst.. menurut selera anda/sesuaikan dengan blog anda
10. Klik "Buat kode"
11. Copy dan Pastekan kode Widget Follow tadi (Gantikan kode yang berwarna merah dengan kode Widget Follow yang sudah dicopy tadi)
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/AVvXsEhglDSuURu5T2QuD-ALcqcKgh1i4Ac33JL13Qyw3KiJDWd3cWGBmIqxmVqnTCFAv2AbabbfUmK11gL-8ZtydNVBelGnb4wKrqDheLADb9tztRY7qPYmhhf4MmOgoHJKn_X3VaphG-HvWZXY/" 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>

SAVE..

Untuk tulisan di atas yang berwarna biru gantilah link gambar sesuai dengan keinginan anda

TITI-SHARE TUTORIAL