Cara membuat Chatbox Autohide

 

Hai Sobat Blogger, di postingan ini saya akan memberikan tips kepada sobat tutorial membuat chatbox/buku tamu auto hide.Tujuannya supaya tidak mengganggu tampilan blog para sobat blogger ataupun agar tidak memakan banyak tempat di blog para Sobat Blogger sekalian.


sebelum kita mulai untuk menjadikan chatbox/buku tamu para Sobat Blogger menjadi auto hide,Sobat blogger terlebih dahulu harus membuat chatbox/buku tamu nya terlebih dahulu.Nah,Sobat Blogger bisa membuatnya Di Sini.
Pertama klik sign up untuk membuat username cbox. lalu verifikasi di email yang sudah di daftarkan para Sobat Blogger tadi. Setelah itu log in, buat chat box yang sobat mau. kalau udah klik "publish!" Nah, di situ ada kode css cbox yang akan dipasang di blog sobat. Tetapi, buku tamu tersebut belum auto hide. agar menjadi auto hide,ikuti cara berikut :
 1. Login ke Blogger Sobat.
2. Klik Tata Letak(layout).
3. Pilih tambahkan gadget >> Html/Javascript.
4. Copy kode-kode dibawah ini:

 <style type="text/css"> #gb{ position:fixed; top:50px; z-index:+1000; } * html #gb{position:relative;} .gbtab{ height:150px; width:30px; float:left; cursor:pointer; background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgEe9AhpuRjRjI8YdSe6DuAI25RpzL_rFMBtaeuwqlvB8nLY9ySVmeXekiMVxp1cYUcNqDlCRpSHCj_USga9utF7JZfiO27cKoGAX_gRAo9BdGV7KQiGcy6kfbNZKmix_kK2g2DwS-OnCpY/s1600/buku+tamu.png') no-repeat; } .gbcontent{ float:left; border:1px solid #B3B3B3; background:#E6E6E6; padding:5px; } </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 CBOX - www.cbox.ws - v001 -->
<div id="cboxdiv" style="text-align: center; line-height: 0">
<div><iframe frameborder="0" width="200" height="305" src="http://www4.cbox.ws/box/?boxid=4237223&amp;boxtag=jblj1y&amp;sec=main" marginheight="2" marginwidth="2" scrolling="auto" allowtransparency="yes" name="cboxmain4-4237223" style="border:#000000 1px solid;" id="cboxmain4-4237223"></iframe></div>
<div><iframe frameborder="0" width="200" height="75" src="http://www4.cbox.ws/box/?boxid=4237223&amp;boxtag=jblj1y&amp;sec=form" marginheight="2" marginwidth="2" scrolling="no" allowtransparency="yes" name="cboxform4-4237223" style="border:#000000 1px solid;border-top:0px" id="cboxform4-4237223"></iframe></div>
</div>
<!-- END CBOX -->  <br/>Mau buat buku tamu ini ?<br/>Klik <a href="http://rickyseptyaguntur.blogspot.com/2013/09/hai-sobat-blogger-di-postingan-ini-saya.html"target="_blank"> di sini </a> <div style="text-align:right"> <a href="javascript:showHideGB()"> [hide] </a> </div> </div> </div> <script type="text/javascript"> var gb = document.getElementById("gb"); gb.style.right = (30-gb.offsetWidth).toString() + "px"; </script>

Nah,Setelah Selesai mencopy Kode diatas,Sobat blogger hanya tinggal mengganti tulisan "berwarna merah" dengan Kode CSS Cbox yang sudah Sobat Blogger buat tadi.karena Kode CSS Cbox diatas adalah kode CSS Cbox saya. Sekian Tips dari saya,maaf bila ada kekurangan,Terima kasih sudah mau membaca tips dari saya :)