Cara Membuat Chatting Buka Tutup Di Blog

Sekarang saya akan memposting artikel tentang blog.
Yang sekarang kita bahas adalah cara membuat surat tamu atau chatting.

Hasilnya Seperti ini

1. pertama-tama, kita harus membuka website cbox disini.

2. setelah itu login atau daftar.

3. setelah itu, dapatkan kode chattingnya.

4. buka dasbor, tata letak, dan tambahkan gadget.

5. setelah itu muncul windows baru. klik HTML/javascript.

6. copy kode dibawah ini:

<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://i1108.photobucket.com/albums/h405/christian410/ghtrf.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>
Letakkan Kode Chatting Disini
<br />
<div style="text-align:center">
<span style="float:right; color:#000000;">Daptkan<a target="_blank" href="http://azmi-muhammad.blogspot.com/2013/04/cara-membuat-chatting-buka-tutup-di-blog.html"> Widget Ini! </a></span>
</div>
</center>
</div>
<script type="text/javascript">
var gb = document.getElementById("gb");
gb.style.right = (50-gb.offsetWidth).toString() + "px";
</script>

</div>

7. setelah itu paste kode di HTML/javascript.

Catatan: di kode cbox ada tulisan berwarna merah atau Letakkan Kode Cbox Disini. ganti tulisan itu dengan kode Chatting sobat. 

Simpan dan lihat Hasilnya!