Cara membuat Chatbox / guestbook

Cara membuat Chatbox

Udah lama tdk share, dengan adanya kesibukan di dunia nyata. berhubung ada yang tanya tentang bagaimana membuat guestbook / chatbox langsung aja lihat dengan seksama cara membuat chatbox berikut ini :
Berikut langkah-langkah memasangnya :
1. Login akun blog anda
2. Masuk pada Tata letak (layout)
3. Pilih Elemen halaman (page element)
4. Klik Tambah gadget (add gadget)
5. Pilih HTML/Javascript
6. Masukkan kode berikut ini dalam kolom yang tersedia

kode hidden/Show chatbox left

 <!-- left hidden  chatbox by  http://anima-generation.blogspot.com START  --><style>#hcl   {position:fixed;top:100px;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/AVvXsEh66nHziok0mleyDQqoevwMH0a3OwCr6k-eRtGV3SvbFRyoiJnU5_Vta4YjFsx5Fv8DMAJp28YkVMUTUzc7OiXgFT5HX07LJWAp32DtmjKvcZkW7vx7TKrnsfCGfH-nEikPQuqwqpA46xg/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"><!-- KODE SHOUTMIX ANDA --><br   /><div class="hc-credit"><span style="float:left"><!--   THIS CREDIT MUST STAY INTACT FOR LEGAL USE --><a   href="http://www.os-cyber.com/2011/04/cara-membuat-hidden-show-chatbox.html"   target="_blank">Get this widget!</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><!-- left   hidden chatbox by http://www.os-cyber.com/ END --> 

Kode hidden/Show chatbox right

 <!-- right hidden  chatbox by  http://www.os-cyber.com START --><style>#hcr   {position:fixed;top:100px;z-index:+1000;}* html #hcr   {position:relative;}.hcrtab   {height:100px;width:30px;float:left;cursor:pointer;background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMvrei4ss200y4earlTdxkNiu6MDhtzSzW7qoSPzMDkKmu4-5uSMj0WGqUikyc0iLzFjn-NpqRgIYMerDluoEtPvJ4gtvc0mFdRyeHVYusQI406CCkEgXgt5fq-zRTBuvqmtFFwy4DGIA/s400/cbblue.png')   no-repeat;}.hcrcontent {float:left;border:2px solid   #003e82;background:#f3f6f7;padding:10px;}.hc-credit   {font-size:9px}.hc-credit a   {text-decoration:none}</style><script   type="text/javascript">function showHidehcr(){var hcr =   document.getElementById("hcr");var w = hcr.offsetWidth;hcr.opened ?   movehcr(0, 30-w) : movehcr(20-w, 0);hcr.opened = !hcr.opened;}function   movehcr(x0, xf){var hcr = document.getElementById("hcr");var dx =   Math.abs(x0-xf) > 10 ? 5 : 1;var dir = xf>x0 ? 1 : -1;var x = x0 +   dx * dir;hcr.style.right = x.toString() +   "px";if(x0!=xf){setTimeout("movehcr("+x+", "+xf+")",   10);}}</script><div id="hcr"><div class="hcrtab"   onclick="showHidehcr()"> </div><div   class="hcrcontent"><!-- KODE SHOUTMIX ANDA DISINI --><br   /><div class="hc-credit"><span style="float:left"><!--   THIS CREDIT MUST STAY INTACT FOR LEGAL USE --><a   href="http://www.os-cyber.com/2011/04/cara-membuat-hidden-show-chatbox.html"   target="_blank">Get this widget!</a></span><span   style="float:right"><a   href="javascript:showHidehcr()">[close]</a></span></div></div></div><script   type="text/javascript">var hcr =   document.getElementById("hcr");hcr.style.right =   (30-hcr.offsetWidth).toString() + "px";</script><!-- right   hidden chatbox by http://www.os-cyber.com END --> 

Berikut keterangannya..
 silahkan code yang berwarna merah anda ganti dengan code shoutmix / cbox / chatbox anda

1. top:100px = keterangan jarak icon hidden chatbox dari atas (top) sejauh 100 px
2. height:100px = tinggi (height) tampilan icon hidden chatbox yang sebesar 100 px
3. width:30px = lebar (width) tampilan icon hidden chatbox yang sebesar 30 px

4. border:2px solid #003e82 = warna (solid) dan ukuran border yaitu #003e82 dan border sebesar 2 px
5. background:#f3f6f7 = warna background pada chatbox saat ditampilkan

6.background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMvrei4ss200y4earlTdxkNiu6MDhtzSzW7qoSPzMDkKmu4-5uSMj0WGqUikyc0iLzFjn-NpqRgIYMerDluoEtPvJ4gtvc0mFdRyeHVYusQI406CCkEgXgt5fq-zRTBuvqmtFFwy4DGIA/s400/cbblue.png') no-repeat = icon hidden chatbox yang akan berguna untuk menampilkan chatbox yang disembunyikan
Contoh lubanyuwangi

kode hidden/Show chatbox left

 &<br /> <!-- right hidden chatbox by http://www.os-cyber.com START --><style>#hcr {position:fixed;top:100px;z-index:+1000;}* html #hcr {position:relative;}.hcrtab {height:100px;width:30px;float:left;cursor:pointer;background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjoFEUAKnPruWWs6BnxLSWEKxePAIKTnJin8qS9napcVc98yPoyg2U0JCnZNEE7JB14XLEgchTmWptWovyhCstJhDj9-Pd-mRZzYsABBUdMabZhQsb_8RicLwmLCmZICj-gexYdmvmSd1Iw/s1600/cbgreen.png') no-repeat;}.hcrcontent {float:left;border:2px solid #003e82;background:#f3f6f7;padding:10px;}.hc-credit {font-size:9px}.hc-credit a {text-decoration:none}</style><script type="text/javascript">function showHidehcr(){var hcr = document.getElementById("hcr");var w = hcr.offsetWidth;hcr.opened ? movehcr(0, 30-w) : movehcr(20-w, 0);hcr.opened = !hcr.opened;}function movehcr(x0, xf){var hcr = document.getElementById("hcr");var dx = Math.abs(x0-xf) > 10 ? 5 : 1;var dir = xf>x0 ? 1 : -1;var x = x0 + dx * dir;hcr.style.right = x.toString() + "px";if(x0!=xf){setTimeout("movehcr("+x+", "+xf+")", 10);}}</script><div id="hcr"><div class="hcrtab" onclick="showHidehcr()"></div><div class="hcrcontent"><br /> <!-- Begin SBox ShoutBox Widget. For more details visit : www.sbox.ws --><br /> <iframe id="shoutmix" src="http://www.sbox.ws/sbox_ws.php?shoutid=nqfm578ymy8ic0620tun" width="300px" height="450px" frameborder="0" scrolling="auto"></iframe><br /> <!-- End SBox ShoutBox Widget --><br /> <br /> <br /><div class="hc-credit"><span style="float:left"><!-- THIS CREDIT MUST STAY INTACT FOR LEGAL USE --></span></div></div></div><script type="text/javascript">var hcr = document.getElementById("hcr");hcr.style.right = (30-hcr.offsetWidth).toString() + "px";</script><!-- right hidden chatbox by http://www.os-cyber.com END --><br />  

cari code di bawah ini pada colom diatas kemudian ganti dengan code soutbox anda selesai dan semoga bermanfaat bagi anda. terimakasih.