Cara Memasang Buku Tamu Melayang

Hei sob, sebelumnya saya mengucapkan trimakasih pada sobat blogger karena sudah meluangkan waktunya untuk berkunjung ke blog saya.

Untuk kesempatan kali ini saya akan berbagi tips memasang "Buku Tamu Melayang" karena tadi pagi ada salah satu teman saya yang bertanya untuk cara memasang buku tamu melayang, memang buku tamu merupakan hal yang penting dalam blog, dikarenakan disinilah para blogger saling menyapa dan memberikan pendapatnya mengenai blog kita. Namun salah satu yang bikin masalah yaitu mencari peletakanya. Kadang - kadang para blogger binggung memasangnya dimana. Nah kalo masalah itu ada solusinya yaitu memasang Buku tamu yang melayang.

Salah satu keuntungnya yaitu ini akan mengikuti letak kusor, naik maupun turun. Tapi di setiap keuntungan ada kerugian, kerugianya adalah aga lambat dalam meload. Maka dari itu sebelum memasang ini harus diperhitungkan juga masalah kecepatanya.

Nah saya tak akan memperpanjang lagi pembahasan, saya langsung saja memberikan script tersebut yaitu :

<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('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhOxisdSViKEeCg3zhzehRsUugbIssBljNmblN82cMZ2ty171tLCYnSE_BmW7YnW4EOAu1ojkwVu6VEKeebmyjQEPnUif1g3hPLFwbtrCspSt_N9l09NLKG2gYC_bw3QTnrglFQzNkci5Pu/') 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">

<!-- Begin ShoutMix - http://www.shoutmix.com -->
<iframe title="m4n0" src="http://www6.shoutmix.com/?m4n0" width="160" height="400" frameborder="0" scrolling="auto">
<a href="http://www6.shoutmix.com/?m4n0">View shoutbox</a>
</iframe>
<br /><a href="http://www.shoutmix.com" title="Get your own free shoutbox chat widget at ShoutMix!">ShoutMix chat widget</a><br />
<!-- End ShoutMix -->
<br/>
Anda berminat buat Buku Tamu seperti ini?<br/>
Klik di
<a href="http://the-cikkoo.blogspot.com/2011/01/cara-memasang-buku-tamu-melayang.html&quot;>
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>

 Catatan:

1. Jangan satukan dengan iklan yang melayang karena akan menjadi kacau.
2. Yang diberi tanda berupa huruf yang merah dapat diganti, contohnya  buku tamu anda yang shoutbox atau cbox.

Selamat mencoba........