Cara membuat Buku Tamu / Chat Box Menempel Disamping

Oke Guys , Saya mendapat Request nih dari teman saya namanya Reza Alamsyah
 Disini saya akan Menjelaskan bagaimana cara membuat ChatBox Anda Melayang/Menempel Disamping seperti yang saya punya ,,


Nah langsung Saja yah,

1. Masuk ke Blog yang anda punya , lalu pilih Design/Rancangan
2. Add widget/tambahkan widget Html/JavaScript
3. Nah setelah itu...   Copy Code di bawah ini

<style type="text/css">
#gb{

position:fixed;
top:50px;
z-index:+1000;
}
* html #gb{position:relative;}


.gbtab{
height:120px;
width:30px;

float:left;
cursor:pointer;
background:url('http://i683.photobucket.com/albums/vv193/vebyo/Guest3.gif') no-repeat;
}
.gbcontent{
float:left;
border:2px solid #A5BD51;
background:#F5F5F5;
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 Script ChatBox/ShoutBox kamu Disini 

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

Jangan lupa untuk Memasukan Script di text yang tercetak Merah di atas
Dan Kamu juga bisa mengganti Gambar Buku tamu kamu dengan memasukan link Gambar yang ada seperti yang tercetak Kuning di atas ( bisa search gambar di Google.com )
Nah Setelah itu anda bisa lihat hasilnya sendiri...

Don't Forget to say Thanks To Every One who Help you