Cara Membuat Cbox Otomatis Terbuka

Mungkin bagi para blogger sudah mengerti apa itu chatbox. Chatbox adalah kotak pesan yang dapat berfungsi sebagai media silaturahmi, komunikasi, bahkan traffic exchange juga bisa. Tergantung bagaimana orang itu mengelolanya. 4-jie pernah bahas tentang Cara Memasang Float Pada Chatbox kali ini kita akan buat efek yang berbeda dari tutorial sebelumnya. Chatbox dapat terbuka secara otomatis tanpa harus diklik, cukup dekatkan cursor mu ke tulisan/gambar chatbox dan secara otomatis chatbox akan terbuka.

1. Login ke dashboard blogger
2. Pilih Rancangan --> Tambah Gadget
3. Tambah Gadget HTML/Javascript dan masukkan kode berikut ini didalamnya

<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://i634.photobucket.com/albums/uu66/oktri_2009/o0c2d.png') 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/AVvXsEijwYQp12d4XoCSIBJ0BVHxL24WnelyeCoO3gvLxObntodzCoU4uiahMIZdardJAzSuFPnzdSjXj2aLLTIeHl7YpS-7M7MSgFEbI-HXUcwAxbyDRv1txpgkHvFn5_pqqbuv4hlwh03b-8RM/) 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>
<--- Letakan Script Buku tamu 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>
4. Simpan

Selamat mencoba and keep blogging :D