Buku Tamu Show/Hide dari Atas

Beberapa waktu yang lalu ada yang menanyakan gimana cara membuat guets book seperti yang ada pada blog saya ini, nah pada kesempatan kali ini saya bakal memberikan ulasannya, langsung ja ya...

     Cara membuatnya :

1.      Login blogger

2.      Rancangan, Tambah Gadget,  Html/Java Script 

3.      Dan Simpan kode berikut :

     <style type="text/css">
#gb{
position:fixed;
right:450px;
z-index:+1000;
}
#tabGb {
position:fixed;_position:relative;top:50px; right:0px;
clip:inherit;
_top:expression(document.documentElement.scrollTop+
document.documentElement.clientHeight-this.clientHeight); _left:expression(document.documentElement.scrollright+ document.documentElement.clientWidth - offsetWidth); }
* html #gb{position:relative;}

.gbcontent{
float:left;
border:2px solid #4173af;
background:#ffffff;
-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 showHideGB(){
var gb = document.getElementById("gb");
var w = gb.offsetWidth;
gb.opened ? moveGB(0, 1500-w) : moveGB(20-w, 0);
gb.opened = !gb.opened;
}
function moveGB(x0, xf){
var gb = document.getElementById("gb");
var dx = Math.abs(x0-xf) > 25 ? 35 : 1;
var dir = xf>x0 ? 1 : -1;
var x = x0 + dx * dir;
gb.style.top = x.toString() + "px";
if(x0!=xf){setTimeout("moveGB("+x+", "+xf+")", 10);}
}
</script>
<div id="gb">


<div class="gbcontent">

<!--  Script Chatbox nya disini -->


<center><a href="javascript:void(0);" onclick="showHideGB()"><input type="button" value="Close" class="close" /></a>

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

<div id="tabGb"><a href="javascript:void(0);" onclick="showHideGB()" title="Buku Tamu"><img alt="Buku Tamu" heigth="125" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhjWpqpeODPA9hZVVdHuXoSbQKDJtjAI9WzMfWF_MpLZU3hTRPeGo5USQWO6fXGhO9_D-yFrHfzOAclnZ5wVZo-vq8WIzKRKc3YB-1S44_zp28dVkwiz-RVvcaYJebrfXCfJYfEVjmet4M/s1600/Guestbook.png" border="0" /></a></div>
</div>

Pertama saya melihat guest book ini ada pada blog http://tip-triksblogger.blogspot.com sangat menarik dan cute, saya coba di blog ini dan berhasil. Selamat Mencoba