cara membuat chat box keren

<!-- right hidden chatbox byhttp://soul-blaze.blogspot.com/START --> <style> #hcl { position:fixed; top:35px; left:0px; z-index:+1000; } * html #hcl {position:relative;} .hcltab { height:100px; width:30px; float:left; cursor:pointer; background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8ssGS5WbtHAo_vdImt9TUXW8ZHJDj0vn_Qdndr3rWkLJ7993mQRi0NI_sb8wHPvu6Mqt8tXtQze9J79X84vCdc4EFUMAKycMErxCMGP_SxSXXfrgB2XnstfBLxYj1D-XWb-R0_s1rz8M/s400/cbred-LEFT.png') no-repeat; } .hclcontent { float:left; border:2px solid #790909; background:#f3f6f7; padding:10px; } .hc-credit {font-size:9px} .hc-credit a {text-decoration:none} </style> <script type="text/javascript"> function showHidehcl(){ var hcl = document.getElementById("hcl"); var w = hcl.offsetWidth; hcl.opened ? movehcl(0, 30-w) : movehcl(20-w, 0); hcl.opened = !hcl.opened; } function movehcl(x0, xf){ var hcl = document.getElementById("hcl"); var dx = Math.abs(x0-xf) > 10 ? 5 : 1; var dir = xf>x0 ? 1 : -1; var x = x0 + dx * dir; hcl.style.left = x.toString() + "px"; if(x0!=xf){setTimeout("movehcl("+x+", "+xf+")", 10);} } </script> <div id="hcl"> <div class="hclcontent"> <!-- BEGIN CBOX - www.cbox.ws - v001 --> <div id="cboxdiv" style="text-align: center; line-height: 0"> <div><iframe frameborder="0" width="300" height="275" src="http://www4.cbox.ws/box/?boxid=4100717&amp;boxtag=ebc39c&amp;sec=main" marginheight="2" marginwidth="2" scrolling="auto" allowtransparency="yes" name="cboxmain4-4100717" style="border:#FFFFFF 1px solid;" id="cboxmain4-4100717"></iframe></div> <div><iframe frameborder="0" width="300" height="75" src="http://www4.cbox.ws/box/?boxid=4100717&amp;boxtag=ebc39c&amp;sec=form" marginheight="2" marginwidth="2" scrolling="no" allowtransparency="yes" name="cboxform4-4100717" style="border:#FFFFFF 1px solid;border-top:0px" id="cboxform4-4100717"></iframe></div> </div> <!-- END CBOX --> <br /> <div class="hc-credit"> <span style="float:left"> <!-- THIS CREDIT MUST STAY INTACT FOR LEGAL USE --> Get this <a href=http://soul-blaze.blogspot.com/2013/03/cara-membuat-chatbox-melayang-di-blog.html target="_blank"> Widget</a>. By: <a href=http://soul-blaze.blogspot.com/ target="_blank"> Soul Blaze </a> </span> <span style="float:right"> <a href="javascript:showHidehcl()"> [CLOSE] </a> </span> </div> </div> <div class="hcltab" onclick="showHidehcl()"> </div> </div> <script type="text/javascript"> var hcl = document.getElementById("hcl"); hcl.style.left = (30-hcl.offsetWidth).toString() + "px"; </script> <!-- right hidden chatbox by http://soul-blaze.blogspot.com/END -->