Cara Membuat Chatbox Hidden Disebelah Kanan

Hidden Chatbox adalah sebuah tempat menyimpan atau meletakkan widgetchatbox (Shoutmix, Shoutbox, dll) yang bisa bersembunyi. Sembunyi disini pastinya bukan berarti hilang, kabur, atau lari dari kejaran polisi (emangnya Nooordin M. Top apa?!), tapi sengaja kita sembunyikan untuk menghemat ruang blog. Sudah hampir sebulan saya tidak memasang widget shoutmix, itu karena banyak widget lain yang lebih penting darinya untuk ditampilkan. Tapi setelah belajar dan paham, saya menggunakan trik Hidden Chatbox ini untuk memasang shoutmix sehingga blog saya tidak terlihat sesak lagi(walau sebenarnya masih sesak banget, hehehehe....). Anda juga mau memasang shoutmix dengan trik ini? Baca baik-baik ya...


Trik Hidden Chatbox ini terbagi menjadi 2 pilihan, yaitu LEFT-Hidden Chatbox dan RIGHT-Hidden Chatbox. Kalau yang saya pakai di blog ini adalah RIGHT-Hidden Chatbox. Berikut caranya:

1. Sign in ke blogger dan silahkan Login dengan Account Anda
2. Pilih Layout/Tata Letak
3. Pilih Page Elemen/Elemen Halaman
4. Klik Add a Gadget/Tambah Gadget
5. Lalu pilih "HTML/JavaScript"
Kemudian Copy-Paste kode di bawah ini :

<style type="text/css"> #gb{ position:fixed; top:50px; z-index:+1000; } * html #gb{position:relative;} .gbtab{ height:100px; width:30px; float:left; cursor:pointer; background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi8C6JUrXxvHuFrPY7OvDx-0Dp1ikw8kHhYsVSLgPtKV7zTm_aRSVNey-vYM4enrmZki26DOJhUQHOCJeeGgdhFFWrb1Vnjgm5Ukj3-MDbmML9d547x93LSWjj8P74Zz7qgLbzrJvwOJ1Q/s400/cbred.png') no-repeat; } .gbcontent{ float:left; border:2px solid #A5BD51; background:#F5F5F5; padding:10px; } </style> <script type="text/javascript"> function showHideGB(){ var gb = document.getElementById("gb"); var w = gb.offsetWidth; gb.opened ? moveGB(0, 30-w) : moveGB(20-w, 0); gb.opened = !gb.opened; } function moveGB(x0, xf){ var gb = document.getElementById("gb"); var dx = Math.abs(x0-xf) > 10 ? 5 : 1; var dir = xf>x0 ? 1 : -1; var x = x0 + dx * dir; gb.style.right = x.toString() + "px"; if(x0!=xf){setTimeout("moveGB("+x+", "+xf+")", 10);} } </script> <div id="gb"> <div class="gbtab" onclick="showHideGB()"> </div> <div class="gbcontent">    <!-- Begin ShoutMix - http://www.shoutmix.com --> <iframe title="m4n0" src="http://www6.shoutmix.com/?m4n0" width="160" height="400" frameborder="0" scrolling="auto"> <a href="http://www6.shoutmix.com/?m4n0">View shoutbox</a> </iframe> <br /><a href="http://www.shoutmix.com" title="Get your own free shoutbox chat widget at ShoutMix!">ShoutMix chat widget</a><br />  <!-- End ShoutMix -->  <br/> Anda berminat buat Buku Tamu seperti ini?<br/> Klik di <a href="http://gangiman.blogspot.com/"> sini </a> <div style="text-align:right"> <a href="javascript:showHideGB()"> [tutup] </a> </div> </div> </div> <script type="text/javascript"> var gb = document.getElementById("gb"); gb.style.right = (30-gb.offsetWidth).toString() + "px"; </script>

CATATAN :

Ganti tulisan yang berwarna merah dengan kode yang anda peroleh dari ShoutMix

Berikut beberapa gambar tab pembuka hidden chatbox dan kode warna html untuk border yang serasi:

Kode warna border: #790909

Kode warna border: #aca500

Kode warna border: #008232

Kode warna border: #003e82

Kode warna border: #0079a0

Note: Trik hidden ini bisa juga anda gunakan untuk memasang widget lain, jadi trik ini tidak khusus untuk memasang shoutmix. Anda tinggal berkreasi dengan kode-kode yang bisa bikin kepala jadi botak itu, hahahahahaha...!

Selamat mencoba....!!!