Cara Membuat Widget Follow Keren

Hmm. . .Ini adalah posting tutorial pertama saya tentang blog.  Jadi, jangan marah bila tidak/sulit dipahami dalam petunjuk langkah-langkah yang harus dilakukan. Walaupun saya sendiri adalah orang yang sudah lama mengenal blog.
Baiklah tidak usah basa-basa lagi. Sekarang saya akan menjelaskan cara membuat widget follow keren yang mana tersembunyi seperti yang anda lihat di blog saya ini. Bilamana anda mengklik gambar Naruto itu, maka akan muncul widget follower blog.  Sebenarnya ini saya dapat dari searching juga di mbah google, namun dengan sedikit polesan menjadi widget versi saya tersendiri.




Langkah yang harus anda lakukan adalah sebagai berikut. Tutorial ini menggunakan interface blog yang baru.


Langkah I 
1. Login ke blogger.com dengan akun anda
2. Pilih Tata Letak

3. Pilih Tambah Gadget--Terus pilih HTML/JavaScript
4. CoPas kode berikut ini

<style type="text/css">
#fl{
position:fixed;
left:100px;
z-index:+1000;
}
* html #fl{position:relative;}
.flcontent{
float:left;
border:2px solid #676767;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgdZ5G8sDbvraeZd5QdsJW7vb_ne2lq54AR9N9uXiWzY6qDd3CqiZ2vpjYL7EUKBO-NYJd5dbG0DjF6ZOsrlCBuGk1ItbrqIl9YEDmyEekDuNov_s5rnquF-cBNAtHgkr36M3jmHV4YWTK7/)#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 Untuk Widget Follow Disini


<div style="text-align: right;">
<a href="javascript:showHideFL()">
[Tutup]
</a></div>
<font size="2"><a href="http://ariefrvi.blogspot.com/"target=_blank"><div style="color: #444444;">
<span style="font-size: xx-small;">Ariefrvi</span></div></a></font>
</div>
</div>
<script type="text/javascript">
var fl = document.getElementById("fl");
fl.style.bottom = (-100-fl.offsetWidth).toString() + "px";
</script>

eittttsss. . .Tapi jangan langsung disave nih. Kita teruskan ke langkah selanjutnya dulu.
5. Untuk mendapatkan kode widget follownya silahkan masuk ke link ini [http://www.google.com/friendconnect]
6. Lihat Gambar dibawah

1. Pilih Judul Blog Sobat.
2. Pilih dan klik "Tambahkan gadget anggota"
3. Atur ukuran, warna,  dan segala keperluan untuk widget follow anda nya
4. klik "Buat Kode"
5. Copy kodenya, dan ikuti langkah selanjutnya

7. Setelah kode  Follownya dicopy, kemudian letakkan di kode Script yang pertama tadi.
8. Selanjutnya Save.

<a href='javascript:showHideFL()' style='display:scroll;position: fixed;bottom:30px;right:15px;' title='Follow'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjmUwop7N2RKbwROup1MoyOOQRccHJKH2WfUzgRNHtPn-nv7VzQEytuVhSlH6kKzVOex5Yn4mdOR2I8uj0KBOFihzmGp0Erj6fi9liFw93ad5ecXMT8JXygJRCfFmxJ437zsqenYvLMliY5/h80/pas.png'/></a>



Keterangan:
1. Yang berwarna merah bisa diganti sesuai keinginan anda.