Cara Membuat Chat Box Di Blog Kamu

1.Seperti biasa,kamu masuk ke Rancangan lalu Tambah Gadget lalu HTML/Javascript
2.Copykan kode ini

<style type="text/css">
    #fl{
    position:fixed;
    left:150px;
    z-index:+1000;
    }
    * html #fl{position:relative;}
    .flcontent{
    float:left;
    border:2px solid #676767;
    background:url(http://lh3.ggpht.com/_yF0--u7KSSI/TKIlkEJwkEI/AAAAAAAAAtg/uFf3eLsXlyg/fire2.gif)#000000 repeat-x bottom center scroll;
    -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 showHideFL(){
    var fl = document.getElementById("fl");
    var w = fl.offsetWidth;
    fl.opened ? moveFL(0, -100-w) : moveFL(20-w, 0);
    fl.opened = !fl.opened;
    }
    function moveFL(x0, xf){
    var fl = document.getElementById("fl");
    var dx = Math.abs(x0-xf) > 25 ? 35 : 1;
    var dir = xf>x0 ? 1 : -1;
    var x = x0 + dx * dir;
    fl.style.bottom = x.toString() + "px";
    if(x0!=xf){setTimeout("moveFL("+x+", "+xf+")", 10);}
    }
    </script>
    <div id="fl">
    <div class="fltab" onclick="showHideFL()"> </div>
    <div class="flcontent">

     <!-- 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=768405&amp;boxtag=mrnwwj&amp;sec=main" marginheight="2" marginwidth="2" scrolling="auto"

allowtransparency="yes" name="cboxmain5-768405" style="border:#000000 1px solid;" id="cboxmain5

-768405"></iframe></div>
<div><iframe frameborder="0" width="200" height="75" src="http://www5.cbox.ws/box/?

boxid=768405&amp;boxtag=mrnwwj&amp;sec=form" marginheight="2" marginwidth="2" scrolling="no"

allowtransparency="yes" name="cboxform5-768405" style="border:#000000 1px solid;border-top:0px"

id="cboxform5-768405"></iframe></div>
</div>
<!-- END CBOX -->

    <div style="text-align: right;">
    <a href="javascript:showHideFL()">
    [Tutup]
    </a></div>
    <font size="2"><a href="http://dwyneshare.blogspot.com"target=_blank"><div style="color: #444444;">
    <span >Designed By DwyneShare</span></div></a></font>
    </div>
    </div>
    <script type="text/javascript">
    var fl = document.getElementById("fl");
    fl.style.bottom = (-100-fl.offsetWidth).toString() + "px";
    </script>

Lalu Save.

Lalu jika anda ingin Chat Box anda di-Hide,anda dapat  masuk ke Rancangan lagi,lalu Tambah Gadget,lalu Copy kan kode ini

<a href="javascript:showHideFL()"/><img border="0" src="http://i1253.photobucket.com/albums/hh588/DwyneArrezo/ChatImage.jpg" alt="kode" title="Click To Open Chat Box" style="display:scroll;position: fixed; top:180px;right:0px;cursor:pointer;style=" opacity:1;filter:alpha(opacity="100)&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;quot;" onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100" onmouseout="this.style.opacity=0.5;this.filters.alpha.opacity=50" ;" height="180px" width="40px" /></a>

Ket: 1.Tulisan http://i1253.photobucket.com/albums/hh588/DwyneArrezo/ChatImage.jpg dapat anda ganti dengan Kode Gambar anda yg lain.Semisal dari Picassa ataupun Photobucket.
2.Ukuran dapat anda ganti dengan mengganti angka pada Height dan Width.