Cara Membuat Chat Box Auto Hide dan Cara Membuat Chat Box Melayang

Hai sobat Bloggers semua. Kali ini saya akan posting bagaimana cara pasang cahat box atau shout mix melayang. maupun cara membuat chat box atau shout mix auto hide. Kita akan membahas ini semua denagn cara komplit dan detail. Disini kita akan membahas ini semua dengan tuntas dan dengan cara seksama. hehe. Ok ssobat langsung saja kita bahas ini semua dan posting saya kali ini saya beri judul Cara Membuat Chat Box Auto Hide dan Cara Membuat Chat Box Melayang. Panjang ya biarin lah tak mengapa karna saya mau membuat sobat blogger semua mengerti dengan tuntas tanpa batas. Ok sobat langsung saja kita bahas dan ingat sobat blogger jangan sampe ketinggalan kata demi katanya ya. Ni langkah demi langkahnya :

A. Chat Box Auto Hide.

Login dahulu ke blog sobat
lalu masuk ke menu rancangan ---> Elemen Laman ---> Tambah Gadget --- > Html/Javascript
Masukkan kode di bawah ini sob

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

.gbtab{
height:150px;
width:50px;
float:left;
background:url('http://i46.tinypic.com/15np343.png') no-repeat;
}

.gbcontent {
float:left;
border:1px solid #000000;
-moz-border-radius-bottomleft:5px;
-webkit-border-radius-bottomleft:5px;
-o-border-radius-bottomleft:5px;
-khtml-border-radius-bottomleft:5px;
-moz-border-radius-topright: 5px;
-moz-border-radius-topleft: 5px;
background: #F2F2F2; url() no-repeat bottom;
padding:10px;
}

</style>

<script type="text/javascript">
function showHideGB(){
var gb = document.getElementById("gb");
var w = gb.offsetWidth;
gb.opened ? moveGB(0, 51-w) : moveGB(30-w, 0);
gb.opened = !gb.opened;
}function moveGB(x0, xf){

var gb = document.getElementById("gb");
var dx = Math.abs(x0-xf) > 25 ? 25 : 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+")", 5);}
}</script>

<div id="gb">
<div class="gbtab" onmouseover="showHideGB()"> </div>

<div class="gbcontent">
<center>

Masukkan Kode Chatbox Atu Shoutmix Anda Disini Sob

<br />
<div style="text-align:center">
<span style="float:right; color:#000000;">Get this <a target="_blank" href="http://klik-hacking.blogspot.com/2012/06/cara-membuat-chat-box-auto-hide-dan.html"> widget! </a></span>
</div>
</center></div>
<script type="text/javascript">
var gb = document.getElementById("gb");
gb.style.right = (50-gb.offsetWidth).toString() + "px";
</script>

</div>

KETERANAGN :
Ganti tulisan yanng berwarna BIRU dengan kode chatbox maupun soutmix sobat