tutorial

Example  Here

langsung copas code sript di bawah ke dalam blog anda.....good luck...!!!

<div class='clear'></div>
<span class='widget-item-control'>
<span class='item-control blog-admin'>
</span>
</span>
<div class='clear'></div>
<div class='widget html' id='html10'>
<div class='widget-content'>
<style type="text/css">
#gb{
position:fixed;
top:50px;
z-index:+1000;
}
* html #gb{position:relative;}

.gbtab{
height:100px;
width:30px;
float:left;
cursor:pointer;
background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh2GCVr5gcdg0kCAgfw1SVdJHUKRe8BWQVCipkDIEN-twNK2geoJA15K9ZMMe6Inav1u36IAzPw55-7jSuRB5ymkQFGveslNTOCYgLq0mNlsMxEEWnWkjClz8u_Ibm-V7Rj_CaXkz0nUCoi/') no-repeat;
}
.gbcontent{
float:left;
border:2px solid #A5BD51;
background:#F5F5F5;
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">


<center>
<!-- BEGIN CBOX - www.cbox.ws - v001 -->
<div id="cboxdiv" style="text-align: center; line-height: 0">
<div><iframe frameborder="0" width="160" height="200" src="http://www2.cbox.ws/box/?boxid=2281927&amp;boxtag=z4fp3a&amp;sec=main" marginheight="2" marginwidth="2" scrolling="auto" allowtransparency="yes" name="cboxmain" style="border:#F6F6F6 1px solid;" id="cboxmain"></iframe></div>
<div><iframe frameborder="0" width="160" height="60" src="http://www2.cbox.ws/box/?boxid=2281927&amp;boxtag=z4fp3a&amp;sec=form" marginheight="2" marginwidth="2" scrolling="no" allowtransparency="yes" name="cboxform" style="border:#F6F6F6 1px solid;border-top:0px" id="cboxform"></iframe></div>
</div>
<!-- END CBOX -->
<center>

<div style="text-align:right">
<a href="javascript:showHideGB()">
close
</a>

</div>

</div>

</div>

<script type="text/javascript">
var gb = document.getElementById("gb");
gb.style.right = (30-gb.offsetWidth).toString() + "px";
</script>
</div>
<div class='clear'></div>
<span class='widget-item-control'>
<span class='item-control blog-admin'>
<a class='quickedit' href='http://www.blogger.com/rearrange?blogid=6507008061673325638&widgettype=html&widgetid=html10&action=editwidget&sectionid=footer-1' onclick='return _widgetmanager._popupconfig(document.getelementbyid("HTML10"));' target='confightml10' title='edit'>
<img alt='' height='18' src='http://img1.blogblog.com/img/icon18_wrench_allbkg.png' width='18'/>
</a>
</span>
</span>

<div class='clear'></div>
</div><div class='widget html' id='html9'>
<div class='widget-content'>
<center></center></div></div>

INGAT 
ganti texs yang berwarna merah dengan script chat box kamu sendiri...!!!
dan klo kamu belum punya cbox kaya seperti dibawah ini,

silakan daftar  DISINI
nanti akan kamu dapatkan script cboxnya,
yang sama persis seperti sript di atas yang berwarna merah,
klo sudah ada sriptnya, tinggal ganti aja sript yang di atas berwarna merah, sama sript cbox milik kamu.
baru langsung bisa pasang di blog kamu