CARA MASANG CHATBOX DI BLOG

Cara pasang CHATBOX di blog anda sangatlah mudah cara nya adalah sebagai berikut:
1.Login ke Blogger
2.Setelah masuk Dasbor pilih Rancangan
3.Klik Tambah Gatget Dan pilih Html/Javascript
4.copy paste code dibawah ini
5.jangan lupa save dan lihat blog

<style type="text/css">
#at{
position:fixed;
right:450px;
z-index:+1000;
}
* html #at{position:relative;}
.attab{
height:100px;
width:30px;
float:left;
cursor:pointer;
background:url();
}
.atcontent{
float:left;
border:2px solid#FOF8FF;
-moz-box-shadow: -2px 2px 25px lime;
background:#DCDCDC no-repeat center;
-moz-border-radius-topleft:15px;
-moz-border-radius-topright:15px;
-moz-border-radius-bottomleft:15px;
-moz-border-radius-bottomright:15px;
padding:10px;
}
</style>
<script type="text/javascript">
function showHideAT(){
var at = document.getElementById("at");
var w = at.offsetWidth;
at.opened ? moveAT(0, -200-w) : moveAT(20-w, 0);
at.opened = !at.opened;
}
function moveAT(x0, xf){
var at = document.getElementById("at");
var dx = Math.abs(x0-xf) > 25 ? 35 : 1;
var dir = xf>x0 ? 1 : -1;
var x = x0 + dx * dir;
at.style.top = x.toString() + "px";
if(x0!=xf){setTimeout("moveAT("+x+", "+xf+")", 10);}
}
</script>
<div id="at">
<div class="attab" onclick="showHideAT()"> </div>
<div class="atcontent">
<div align="center">
<div style="background:url();">
<!-- BEGIN CBOX - www.cbox.ws - v001 -->
<div id="cboxdiv" style="text-align: center; line-height: 0">
<div><iframe frameborder="0" width="200" height="305" src="http://www5.cbox.ws/box/?boxid=689693&amp;boxtag=bknrcg&amp;sec=main" marginheight="2" marginwidth="2" scrolling="auto" allowtransparency="yes" name="cboxmain5-689693" style="border: 0px solid;" id="cboxmain5-689693"></iframe></div>
<div><iframe frameborder="0" width="200" height="75" src="http://www5.cbox.ws/box/?boxid=689693&amp;boxtag=bknrcg&amp;sec=form" marginheight="2" marginwidth="2" scrolling="no" allowtransparency="yes" name="cboxform5-689693" style="border: 0px solid;border-top:0px" id="cboxform5-689693"></iframe></div>
</div>
<!-- END CBOX -->


<!--kkkk-->


</div>
</div>
</div>
<br/>
<div align="right"><a href="javascript:void(0);" onclick="showHideAT()"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjebbL58MUkVYaP7BMtMbwYja_BwYtCn-v2UDRVHLc-Ng8pK4CfOH753kNEOaQoRKoJN-hK1hymO-xMX1c-7DN0JEMsRfjkWWh2JKjyxHMWrRIgL7VYFQPjJpQnXAoKFD0UqFUYolKKzsHj/s1600/close.png" alt="close" title="Click here to Close Cbox" /></a></div>
</div>




<script type="text/javascript">
var at = document.getElementById("at");
at.style.top = (-200-at.offsetWidth).toString() + "px";
</script>




<div style='display:scroll; position:fixed; top:80px; left:3px;'><a href="javascript:void(0);"onclick="showHideAT()"/><img src="http://dl.dropbox.com/u/24368183/chatbox.gif" /></a>
</div>

untuk code yang berwarna merah itu adalah code untuk background dan dapat di ganti dengan warna sesuai kesukaan anda,,silahkan anda lihat code warna disini bila anda ingin mengganti warna background



lihat demo nya di sini