Tips membuat kotak GADGET ANGGOTA show/hide dari bawah blog

Tips ini berfungsi membuat kotak GADGET ANGGOTA muncul dari bawah blog ketika di klik. Contohnya, seperti punya saya yang ada di blog SHARE APA SAJA. Teman - teman meng-klik gambar bertuliskan FOLLOW dan tarrraaaa, muncullah kotak GADGET ANGGOTA dari bagian bawah. Mau tau caranya ?? langsung saja dech kita membuatnya.

• Siapkan kode GADGET ANGGOTA blog teman - teman. (kalo belum ada, teman - teman bisa membuatnya. Caranya KESINI).

• Trus teman - teman ke RANCANGAN > ELEMEN LAMAN > TAMBAH GADGET > HTML/javaScript.

• Copy kode script di bawah ini dan Paste kedalam KONTEN HTML/JavaScript.

<style type="text/css">
#fl{position:fixed; left:500px; z-index:+1000;}
* html #fl{position:relative;}
.flcontent{
float:left;
border:2px solid A67509;
background:#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">

MASUKKAN KODE SCRIPT GADGET ANGGOTA DISINI


<div style="text-align: right;">
<div align="right"><a href="javascript:showHideFL()"><img border="0" src="http://i1099.photobucket.com/albums/g381/tentuya/btn_close.png" alt="close" title="Klik disini untuk keluar dari kotak follow" /></a></div>
<font size="1"><center><b><a href="http://www.shareapasaja.co.cc/2012/01/tips-membuat-kotak-gadget-anggota.html"target=_blank"><div style="color: #ffffff;">
<span ><b>GET THIS WIDGET</b></span></div></a></b></center></font>
</div>
<script type="text/javascript">
var fl = document.getElementById("fl");
fl.style.bottom = (-100-fl.offsetWidth).toString() + "px";
</script>



<a href="javascript:showHideFL()"/><img border="0" src="http://i1099.photobucket.com/albums/g381/tentuya/FOLLOWshareapasaja.png" alt="kode" title="Klik untuk membuka KOTAK FOLLOW" style="display:scroll;position: fixed; top:100px;left: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="105px" width="35px" /></a></div></div>

Ket.
- Yang berwarna MERAH, ganti dengan KODE GADGET ANGGOTA teman - teman yang di berikan http://www.google.com/friendconnect/.
- Yang berwana BIRU itu adalah warna background kotak, jadi bisa di ganti sesuai dengan selera teman - teman. Kode warna DISINI.

- Yang berwarna HIJAU itu adalah gambar CLOSE dan TOMBOL FOLLOW. Jadi teman - teman bisa menggantinya dengan gambar teman - teman sendiri.
- Yang berwana PINK, bisa diganti dengan RIGHT jika teman - teman ingin menaruh tombolnya di sebelah kanan.
- Yang berwana ORANGE itu adalah jarak naek turun nya tombol.

• Simpan dan selesai.

Gimana keren kan ?? semoga bermanfaat.