Cara Membuat Chat Box

Oke sobat blogger jumpa lagi nih.. sambil menonton Arema Indonesia vs Persela kali  saya akan share tentang cara membuat chat box di blogger. Seru banget nih pertandinganya dimana Arema memimpin 3-0 atas Persela (yah.. meskipun gak nonton langsung di Kanjuhuran).

Oke balik ke topik kita kali ini, langkah pertama kalian daftar di http://www.cbox.ws/

Jika sudah copas script di bawah ini

<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 dotted #ff0000; background:url(http://i51.tinypic.com/rcq4b7.gif) #000000 repeat-y center; -webkit-border-bottom-right-radius: 25px; -webkit-border-bottom-left-radius: 25px; -moz-border-radius-bottomright: 25px; -moz-border-radius-bottomleft: 25px; border-bottom-right-radius: 25px; border-bottom-left-radius: 25px; 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() no-repeat;"> Kode Cbox Sobat </div> </div> <br /> <div align="center"> <a href="javascript:void(0);" onclick="showHideAT()"><img border="0" src="http://i1042.photobucket.com/albums/b429/Farix_2010/CloseComment-1.png" alt="close" title="Click here to Close Cbox" /></a></div> <div align="right"> <font size="2"><a href = "http://taufan-fhm.blogspot.com/2012/12/cara-membuat-chat-box.html" target=_blank"><div style="color: #fff;"> <span style="font-size: x-small;">:: Get This Widget!! ::</span></div> </a></font></div> </div> </div> <script type="text/javascript"> var at = document.getElementById("at"); at.style.top = (-200-at.offsetWidth).toString() + "px"; </script> <br/> <center> <a href="javascript:void(0);"onclick="showHideAT()"/><img border="0" src="http://www.leaguelineup.com/tylerlions/images/guestbook1.gif" alt="cbox" title="Click here to open Guest Book" /></a></center>

Kemudian login ke blog sobat, lalu klik TATA LETAK --> TAMBAH GADGET --> HTML/JAVA SCRIPT , lalu masukan script diatas! 

kemudian ganti tulisan "Kode Cbox Sobat" dengan kode cbox yang sobat dapatkan di http://www.cbox.ws/

jika sudah, klik simpan lalu lihat blog sobat.

Demikian posting kali ini, semoga bisa bermanfaat!