Cara Membuat Buku Tamu Ber'Efek

Pada Postingan kali ini saya akan mempostingkan tips & trik ngeblog, tema saya kali ini adalah bagaimana cara membuat chatbook atau buku tamu hide show berefek. Setelah menerima request dari salah satu sobat blogger, saya berjanji akan mempostingkan bagaimana cara membuat chatbook atau buku tamu hide show berefek ini. untuk lebih jelasnya sobat blogger semua dapat melihatnya di sebelah kanan pada postingan saya ini...
Baiklah langsung saja, jika anda tertarik dengan buku tamu, chatbook, dan guestbook silahkan ikuti langkah-langkah berikut 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://i365.photobucket.com/albums/oo98/gondrezt/Green%20Blog/tabs2.gif') no-repeat;
}
.gbcontent{
float:left;
border:2px solid #00960e;
background:#015108;
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">
<div align="center"> 

KODE CHATBOOK

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


KODE CHATBOX ini anda dapat mengganti dengan kode chatbook yang anda miliki.
Jika sobat bloger ingin mengaturnya ukurannya silahkan sobat ganti dengan yang 50 anda dapat mengganti dengan ukuran yang sesuai di hati anda atau dengan ukuran yang anda inginkan.

Selamat Mencoba Semoga Berhasil