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">Eitts tapi jangan di save dulu yah kita lanjutkan ke langkah berikut nya
#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>
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
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/AVvXsEhkSkWbA2kLnVc5Kh3UdprF7Jm0jP7wyXpLoILiEL1QLRdRMaV7kZZtcgUbQ7g54oYusZcYdBAcn9DueV344reE3PYPizmNuQqrlu1Dlppqis_8MvzdASGV6vc-K9j3XMqd4Za7LbdxfMo2/'/></a>10. Simpan template dan lihat hasil nya
Akhirnya selesai juga Cara Membuat Kotak Follow Show/Hide, Semoga Bermanfaat...
Silahkan bertanya jika kurang jelas
3 comments:
Mantap, Gan..!
Btw, itu pop up iklannya ngeganggu banget, Gan.. >.<'
makasih ya gan atas infonya
dan jangan lupa mampir dan follow my blog ya
http://rexpector.blogspot.com
maaf, aku udah nyoba beberapa kali. tapi hasilnya, ada follow di pojok kiri, tapi ngga bisa di klik.
trus di rancangan >> edit HTML juga ngga ada -body- nya.
jadi bingung...
Posting Komentar