Chat Box Show Hide

Hallo sobat-sobat, sahabat blogger di seluruh indonesia... Dah lama nih 4Nakula.Two gak post lagi... Nah pada kesempatan kali ini, saya akan mengulas kembali bagaimana cara membuat buku tamu/chat box secara skow Hide.... Sebelumnya saya dah pernah posting nih tutorial, tetapi kode tersebut tak show hide seperti buku tamu saya ini. Malahan show hide nya dari atas ke bawah.... Lho kok gitu... he...



Oleh karena kejadian tersebut, teman saya requets ke saya untuk mamuat code nya kembali ke blog saya.... he... ok langsung aza deh ke TKP...

1. Seperti biasa masuk ke blogger akang..
2. Masuk ke rancangan..
3. Klik Tambah Gadget
4. Klik HTML/Java Script
5. Pastekan kede Berikut..


<style type="text/css">
#gb{
position:fixed;
top:100px;
z-index:+1000;
}
* html #gb{position:relative;}
.gbtab{
height:100px;
width:30px;
float:left;
cursor:pointer;
background:url('http://i365.photobucket.com/albums/oo98/gondrezt/Green%20Blog/tabs2.gif') no-repeat;
}
.gbcontent{
float:left;
border:2px solid #00960e;
background:#015108;
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">
<div align="center">

Isikan Disini Code cbox sobat.....

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


6. Ganti teks yang berwarna orange dengan pastekan cobe cbox/shotmix sobat...

7. klik simpan...

8. Dan lihat hasilnya ;D