Membuat menu ShoutMix Atau Buku Tamu Tersembunyi ( Mode Hiden ) Yang Ke-2

Pada postingan sebelumnya tentang Cara Membuat Buku Tamu Di Blog, tampilan buku tamu yang dimaksud masih Kurang Menarik. Bagaimana bila ingin tampil melayang atau tersembunyi Yang Lebih Menarik lagi 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">

<!-- Letakkan Di sini Kode  ShoutMix Anda-->

<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 Yang bercetak tebal dengan kode script shoutbox/shoutmix sobat. Bila sudah klik simpan ( Save ). Sekarang sobat sudah lihat hasilnya . Bagaimana sudah puaskan anda dengan hasil karya anda itu . Dan sekarang anda  memiliki buku tamu melayang dech .

::.. Saya Tunggu Komentar dari kamu - kamu semua tentang artikel saya yang satu ini ..::