Cara membuat Chatbox / guestbook tampil di kanan/ kiri blog

1. Buka situs Shoutmix Kamu harus mendaftar di situs tersebut.
2. Jika pendaftarannya berhasil kamu langsung disuruh milih type shoutbox yang disediakan, terserah kamu milih bentuknya yang gimana. Klik tombol Continue
3. Setelah itu kamu akan mendapat ucapan "Terima Kasih" lalu klik link Go to My Control Panel Now
4. Disana kamu bisa mensetting terlebih dahulu shoutbox kamu, misalnya Style & Color, Date & Time, dan lain-lain.
5. Jika sudah selesai klik menu Get Codes
6. Jika kamu pingin menaruh shoutbox di blog kamu pilih "Place Shoutbox on Webpage"
7. Atur lebar dan tinggi shoutbox di kolom widht dan hight
8. Kemudian Copy kode yang ada di dalam kotak "generated Codes"
9. Login ke blogger.com lalu pilih Layout kemudian Add Page Elements
11. Tambahkan element HTML/Javascript.
12. Paste Kode yang telah kamu copy dari shoutbox.com tadi di kotak "Content" lalu simpan.
13. Jadi deh.....

 Dan apabila anda ingin shoutmix / shout box anda tampil di bagian kanan / kiri blog. anda bisa mngikuti trik berikut ini oke langsung aja lihat dengan seksama cara membuat nya:
 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/AVvXsEimokK4CdM4mpMcAmFVweJ2C3KdMdMet1VR4f8xaUnJZnVBFBjB-rxmDUb8uey5231k732VJmQZ984cKRzU-sCrazhHl33INmMePmTeCmmhomrcBCxwBGNh9yWe9aGsq6r3WBF7oLz_uUw/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/AVvXsEhlsdX1hwAf7bq8YPhyphenhyphenkxta24ah3kFYNAcnIAFY9h6TEWl0-2RzmlL-gxVItJzksZf-tdSp8-zzBPhaRl_W4JBfYqLNncRC6nfOfbUZhguuZR-LShW-5lvn-eTCrw9kojzavfszna68rEE/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..
<!-- KODE SHOUTMIX ANDA DISINI --> 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/AVvXsEhlsdX1hwAf7bq8YPhyphenhyphenkxta24ah3kFYNAcnIAFY9h6TEWl0-2RzmlL-gxVItJzksZf-tdSp8-zzBPhaRl_W4JBfYqLNncRC6nfOfbUZhguuZR-LShW-5lvn-eTCrw9kojzavfszna68rEE/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/AVvXsEgyCXKe3ZmnViVZYi6Z2nqOhougPxrSJr3HiVs9C_2fhjF82xc0Yq3Kn7XY9Zj4p7yx-5myGGcYzHn6EElap9MwEKzKrnqzphRtvtgPEj07kRHkakw2ve6THXHu5JhvwfZ3BH07ME4roPcI/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.
<!-- 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>  dan semoga bermanfaat bagi anda. selamat mencoba dan terimakasih.

Share this Article now on :

ARTIKEL YANG BERHUBUNGAN :