Minggu, Juni 26, 2011

Cara Membuat Kotak Follow Show/Hide

Follow......follow mungkin kata-kata ini sudah tidak asing lagi bagi para sobat blogger. Nah tips kali ini adalah cara membuat kotak followers sobat melayang dengan mode show/hide. Jika sobat 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. Kemudai 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>
<font size="2"><a href="http://besttaufiqblog.blogspot.com/2011/06/cara-membuat-kotak-follow-showhide.html"target=_blank"><div style="color: #444444;">
<span style="font-size: xx-small;">:: Get This Widget! ::</span></div></a></font>
</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 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
6. Paste kode widget follow yang tadi sobat copy dan gantikan pada tulisan Kode Widget Follow Disini

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/AVvXsEihQemYyXlc7eORVj9KTneAOBit7_bWbNQGhZAZIj1PlsBpRXyiWIKSth707DIE6cFiQ6w0bM8CZoxR2Tx1gdyjiMcTVph1mz39j3IPMZJ8gN4et4WZrm8p1ZSYTF6rvu-Xagqupdge4FZN/'/></a>
10. Simpan template dan lihat hasil nya

Akhirnya selesai juga :D
Silahkan bertanya jika kurang jelas :D

Tidak ada komentar:

Posting Komentar

Terima kasih telah membaca artikel. Mohon luangkan waktu sobat untuk memberikan komentar pada artikel ini.