Cara Memasang Buku Tamu Melayang Pada Blog Anda

Buku tamu adalah komponen penting dalam blog. Buku tamu digunakan untuk para blogger / para visitor dalam sebuah blog untuk saling menegur sapa. Para blogger sering bingung bagaimana cara memasang buku tamu yang dapat melayang dan mengikuti kursor, ke bawah dan ke atas.

Keuntungan pemasangan Buku Tamu ini adalah bisa mengikuti kursor ke atas dan ke bawah. Tapi juga ada kerugian, yakni membuat blog menjadi lebih "berat" atau agak lama dalam meload. Langsung saja deh ke tutorialnya :

         1. Masuk atau Log In ke akun blogger anda.
         2. Pilih Design / Rancangan.
         3. Pilih Page Elemen / Elemen Laman.
         4. Klik Add a Gadget / Tambah Gadget
         5. Pilih HTML / Javascript
         6. Isikan script di bawah ini:




<style type="text/css">
#gb{
position:fixed;
top:50px;
z-index:+1000;
}
* html #gb{position:relative;}


.gbtab{
height:100px;
width:30px;
float:left;
cursor:pointer;
background:url('http://i37.tinypic.com/345o85i.gif') no-repeat;
}
.gbcontent{
float:left;
border:2px solid #A5BD51;
background:#F5F5F5;
padding:10px;
}
</style>


<script type="text/javascript">
function showHideGB(){
var gb = document.getElementById("gb");
var w = gb.offsetWidth;
gb.opened ? moveGB(0, 30-w) : moveGB(20-w, 0);
gb.opened = !gb.opened;
}
function moveGB(x0, xf){
var gb = document.getElementById("gb");
var dx = Math.abs(x0-xf) > 10 ? 5 : 1;
var dir = xf>x0 ? 1 : -1;
var x = x0 + dx * dir;
gb.style.right = x.toString() + "px";
if(x0!=xf){setTimeout("moveGB("+x+", "+xf+")", 10);}
}
</script>


<div id="gb">


<div class="gbtab" onclick="showHideGB()"> </div>


<div class="gbcontent">

ISIKAN SCRIPT SHOUTBOX ANDA DISINI

<br/>
Anda ingin membuat buat Buku Tamu seperti ini?<br/>
Klik di
<a href="http://erphanpoenya.blogspot.com/2011/10/cara-memasang-buku-tamu-melayang-pada.html">
sini </a>


<div style="text-align:right">
<a href="javascript:showHideGB()">
[tutup]
</a>
</div>


</div>


</div>


<script type="text/javascript">
var gb = document.getElementById("gb");
gb.style.right = (30-gb.offsetWidth).toString() + "px";
</script>

Selamat mencoba yhah, semoga berhasil.

Salam Blognya Anak Indonesia :)