Cara Membuat Chat Box

Chat Box adalah tempat dimana admin sebuah blog bisa berkomunikasi dengan pengunjung blog sehingga pengunjung blog pun merasa senang dan nyaman bisa komunikasi secara langsung karena jika suatu blog ada semacam buku tahu seperti Chat Box seakan-akan Blog tidak berpenghuni alias blog mati.

Tetapi ada juga diantara temen-temen yang menilai kalau memasang Chat Box hanya memperlambat laju Loding sebuah blog kembali lagi terserah anda mau memasang atau tidak anda yang bisa memilihnya 

Buat temen-temen yang ingin mencoba memasang silahkan ikuti panduan di bawah ini :

Berikut ini adalah Cara Memasang Buku Tamu / CBOX Di Blog Muncul Dari Berbagai Arah: Seperti biasa sobat harus Login dulu di akun blog sobat Pilih Tata Letak Tambah Gadget HTML/Java Script Selanjutnya copy paste kode script di bawah ini dan masukan ke dalam Gadget HTML/Java Script.

<style type="text/css"> #at{ position:fixed; right:35%; z-index:+1000; } * html #at{position:relative;} .attab{ height:0px; width:0px; float:top; cursor:pointer; background:url(url); } .atcontent{ float:left; border:2px solid #fff; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgTSM7zUwddzmGIuADhw042Kok5NS7RX_JFeApEhLNRgd9E01ji4svLPQBSiU1wwpHlHUEbB9qKfWUyZRPHeYdmOJYBVP9jmysJIBvClUiGHhIK0U3nzdWAxWVR_U53HRWrxt4JxOIaZ6AZ/)#000000 repeat-x bottom center scroll; -moz-border-radius:10px; padding:10px; } .atcontent:hover{ border:2px solid #fff; background:url(http://petir-project.googlecode.com/files/zuaz-petir.gif)#000000 repeat-x bottom center scroll; } </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.bottom = 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(http://i53.tinypic.com/oiu4n9.gif) no-repeat;"> <!-- BEGIN CBOX - www.cbox.ws - v4 --> <div id="cboxdiv" style="position: relative; margin: 0 auto; width: 200px; font-size: 0;"> <div style="position: relative; height: 305px; overflow: auto; overflow-y: auto; -webkit-overflow-scrolling: touch; border:#ababab 1px solid;"><iframe src="http://www3.cbox.ws/box/?boxid=3441506&boxtag=gfz4m&sec=main" marginheight="0" marginwidth="0" frameborder="0" width="100%" height="100%" scrolling="auto" allowtransparency="yes" name="cboxmain3-3441506" id="cboxmain3-3441506"></iframe></div> <div style="position: relative; height: 75px; overflow: hidden; border:#ababab 1px solid; border-top: 0px;"><iframe src="http://www3.cbox.ws/box/?boxid=3441506&boxtag=gfz4m&sec=form" marginheight="0" marginwidth="0" frameborder="0" width="100%" height="100%" scrolling="no" allowtransparency="yes" name="cboxform3-3441506" id="cboxform3-3441506"></iframe></div> </div> <!-- END CBOX --> </div> </div> <br /> <div align="right"><a href="javascript:void(0);" onclick="showHideAT()"><img border="0" src="http://i859.photobucket.com/albums/ab159/yudhizh/ButtonCloseWhite-BlackStroke.png" alt="close" title="Tutup Cbox" /></a></div> </div></div> <script type="text/javascript"> var at = document.getElementById("at"); at.style.bottom = (-200-at.offsetWidth).toString() + "px"; </script> <div style="position: fixed; top: 55px; right: 5px;width:30px;height:100px;"><a href="javascript:void(0);"onclick="showHideAT()"/><img src="http://zuazz.googlecode.com/files/chatbox.gif" alt="cbox" title="Buka Chat Book"/></a></div>

Klik save / simpan.

Dan lihat hasilnya :

Apabila ukuran kurang pas dengan blog sobat silahkan ganti dengan yang anda harapkan dan anda bisa berkreasi sendiri semakin anda banyak mencoba sesuatu hal yang baru sudah pasti anda semakin bertambah ilmu yang sobat dapatkan.

Demikian cara memasang Chat Box di blogspot