Cara Membuat Buku Tamu Melayang

Pada postingan sebelumnya tentang Cara Membuat Buku Tamu Di Blog, tampilan buku tamu yang dimaksud masih berada di sidebar sobat. Bagaimana bila ingin tampil melayang atau tersembunyi seperti punya ku. Setelah tombol Guest Book nya di klik baru muncul buku tamu/shoutbox nya.
Caranya adalah sobat tinggal menambahkan kode script berikut ini ke dalam gadget dimana kode shouthbox sobat berada.

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

.gbtab{
height:150px;
width:30px;
float:left;
cursor:pointer;
background:url('http://i629.photobucket.com/albums/uu13/akubsaputra/guestbook.png') no-repeat;
}
.gbcontent{
float:left;
border:2px solid #FAFD02;
background:#FAFD03;
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="hadi99" src="http://www6.shoutmix.com/?hadi99" width="200" height="400" frameborder="0" scrolling="auto">
<a href="http://www6.shoutmix.com/?hadi99">View shoutbox</a>
<!-- End ShoutMix --></iframe>

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

Catatan:
Ganti tulisan yang berwarna merah dengan kode script shoutbox/shoutmix sobat. Bila sudah klik simpan. Sekarang sobat sudah memiliki buku tamu melayang dech.

Selamat mencoba dan semoga bermanfaat.