Membuat buku tamu Show Hide

Membuat buku tamu Show Hide giman cara nya tuh?? Mudah kok cara nya.
cara yang pertama sobat blog harus daftar terlebih dahulu di situs  ShoutMix.

cara pendaftaran cukup mudah kok saya yakin master seperti anda pasti langsung bisa mendaftar di situs ShoutMix.
copy dan paste kan terlebih dahulu code di awah ini di tambah widget.

<style type="text/css">#gb{
position:fixed;
top:25px;
z-index:+1000;
}
* html #gb{position:relative;}
.gbtab{
height:150px;
width:30px;
float:left;
cursor:pointer;
background:url('http://farm3.static.flickr.com/2771/4442306534_c1431ea4ce_o.png') no-repeat;
}
.gbcontent{
float:left;
border:2px solid #1300F2;
background:#FFFFFF;
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">

MASUKAN CODE BUKU TAMU YANG ANDA DAPAT DARI SHOTMIX

<a href="javascript:showHideGB()">

</a></div>

<div style="text-align:right; font-size:xx-small;">Cara Buat Buku Tamu <a href="http://cybercere.blogspot.com/2011/08/membuat-buku-tamu-show-hide.html" target="blank">disini</a><br/><br/> widget by <a href="http://cybercere.bloghspot.com" target="blank"> cara membuat ini</a>

</div>

</div>

<script type="text/javascript">

var gb = document.getElementById("gb");

gb.style.right = (30-gb.offsetWidth).toString() + "px";

</script>

perlu di ingat tulisan yang berwarna biru di isi dengan Code yang anda dapat dari situs ShoutMix.
Mudah kan cara membuat nya.
Selamat Mencoba