Cara membuat Hidden-Show Chatbox Kanan/kiri

Biasanya memasang Hidde / Show Chatboxblog jika blog kita penuh dengan berbagai macam gadget, iklan dsb..

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 Kiri

<!-- 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/AVvXsEieeEZHMB3QPh5zEz5V3uJqE8Kh4PB_6ejlBFVDOARwV0gDytB6LO8Etn-AFl3FW0e6u4UrIFQ03YRQL-O3G1YlK5UvwO3qjOIx4FTpTHMe3WueqK-HEawA5lxXuFoXhebwAR9lduPycog/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 Kanan

<!-- 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/AVvXsEgeMw5lrVPVu0vhNQV5_wGPAj9_rXrAMZK9MoglAKROvXoI-wRQu9AgoGOZcoHU0CSzChA1KnrYETR6hBmWp9ZWoyfGsLxOxiFjCubCi-yRGPXEGOkVJMFz0u38H1xhi_A7lN-bzJXPYT8/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..

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/AVvXsEgeMw5lrVPVu0vhNQV5_wGPAj9_rXrAMZK9MoglAKROvXoI-wRQu9AgoGOZcoHU0CSzChA1KnrYETR6hBmWp9ZWoyfGsLxOxiFjCubCi-yRGPXEGOkVJMFz0u38H1xhi_A7lN-bzJXPYT8/s400/cbblue.png') no-repeat = icon hidden chatbox yang akan berguna untuk menampilkan chatbox yang disembunyikan

Di bawah ini adalah gambar icon Chatbox, pilih sesuai selera anda :

background:urlbackground:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiEIJ-FG9I07W_dbp8CRVz2SLNeDEw5Dpzznf6iGHIn9DAIRgZI6UH_YLkQWpoXD2oTL-sm_y5qPvBSIfLzpC_WrGh2vn984ul9kdWgiG2Ear8AoXX1wz0SoPc_Ng0yC8m2zmy-GaJ47s_B/s1600/cbblue-2.png')
Warna border #0079a0

background:urlbackground:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiHPP365tBdV3i1rXCXnccpuaunP5ASZOhzA_n8sKqdtBqbtOo-CXlC7XKQBxlkP4H15ExGJa0c6oykYkWnrWs90wSxPtio5EhQpkSZe-hhxVMeSd2svF-Md24c9lNW6aNU5zBIVCgzpdOO/s1600/cbgreen.png')
Warna border #008232

background:urlbackground:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhIjRhY-ZuQyGMQclXQO9J9Qkau7nTlZ72CzJmPAcPiy9rimKBp6ZstXQgrJPIsicNc_2W4mDkrvuQ_hc6zfRvJgzRnZZ0neFOFAUTLDoeif_OMBEoqRr5-8yjfPVDKWXEEzm1r4AjCuKi3/s1600/cbyellow.png')
Warna border #aca500

background:urlbackground:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhBJRJ9Bpq1uEQ1ocO-e0w5pcWDdSd6o7qqEhWkkmoOy6V0dzWoJKTqBoS6nymnpk_gHhAXhxUo6pJ5S1c8Xdt8McD1HlsM9F61dr4I3_rkowQRrdA18iAYOtKqV0UsXn48aWuG-3cavdX7/s1600/cbred.png')
Warna border #790909