Cara Memasang Widget Auto Hide Cbox

Cara Memasang Widget Auto Hide Cbox - Postingan kali ini salemharp blog akan berbagi tips tentang cara memasang widget cbox dengan "behavior" (tingkah laku) auto hide yang ada seperti di blog saya sekarang.
Jika sobat belum tahu fungsi dari layanan cbox ini saya kasih tahu deh, hehehe
cbox merupakan layanan jasa chatting, tapi jika kamu belum mempunya script dari cbox maka kamu harus daftar dulu di situs resmi nya silahkan cek di http://www.cbox.ws/

Ok, Langsung aja kita coba praktekan.
1. Login dulu di blogger sobat,, (hehehe ya iyalah masa login ke facebook)
2. pilih rancangan -> tambah gadget
3. pilih yang html/java script
4. pastekan kode dibawah ini

<style type="text/css">
#gb{
position:fixed;
top:40px;
z-index:+1000;
}* html #gb{position:relative;}
.gbtab{
height:150px;
width:50px;
float:left;
background:url('http://img22.imageshack.us/img22/8941/tabs2.gif') no-repeat;
}

.gbcontent {
float:left;
border:1px solid #BB0000;
-moz-border-radius-bottomleft:10px;
-webkit-border-radius-bottomleft:10px;
-o-border-radius-bottomleft:10px;
-khtml-border-radius-bottomleft:10px;
-moz-border-radius-topright: 10px;
-moz-border-radius-topleft: 10px;
background: #000000 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_ffk8nwwzqiuPBu6D7KW6d5Z5FWNCSbrzoB5PMcGY7Tg7pqufAMGVPIXD0LKP5rkMP3S0Rsji14KkHr4Epd4RcmMU_Ba8cjG3C70ByoUr8p-JHGalHiTttbtrD0TdFW1U_V9M63ErBdtu/s1600/api.gif) 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>

 Pastekan kode cbox kamu disini

<br />
<div style="text-align:center">
<a onclick="showHideGB()" class="tips-fade" title="klik untuk tutup chattingbox">
<center><hr /><img src="http://i1042.photobucket.com/albums/b429/Farix_2010/CloseComment-1.png" /><hr /></center>
</a>
</div>
</center></div>
<script type="text/javascript">
var gb = document.getElementById("gb");
gb.style.right = (50-gb.offsetWidth).toString() + "px";
</script></div>

5. Simpan dan lihat hasilnya

Selamat Mencoba.. :)