Cara Memasang Chat Box Auto Hide Di Blog

Dengan Sobat memasang Buku tamu atau Chat BOX pada website/Blog sangat bagus untuk memudah pengunjung untuk saling mengenal dan berbagi, tujuannya tak lain untuk menjalin komunikasi dan silaturahim baik sesama pengunjung maupun para Blogger.

Cara pemasangannyapun cukup simple sobat tinggal copy paste script yang ada di bawah ke blog sobat. Berikut adalah tutorial untuk memasang Chat Box (buku tamu)  keren yang Auto Hide dan Auto Klik.

• Pastikan Sudah Masuk ke Blog Sobat
• Pilih ke tata letak / layout lalu klik add gadget,dan pilih tambahkan HTML / javascript
• Lalu copy-paste HTML dibawah 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/AVvXsEj5UPWCeHg8UzzL7o3DNhqyMJM7hBbejqsMEG0yUkBsSUOh4E8kXr1r5huP2J3K_ELHo2tC_ncNR2howadecguQiKFI0qo3lJURjS_DfL6AdC5yz8-wCMMlXDNZtlkQiM3JxhUgvowMl4xn/s1600/finger21.blogspot.com+bukutamu.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" onmouseover="showHideGB()"> </div> <div class="gbcontent">

<!-- BEGIN CBOX - www.cbox.ws - v4 --> <div id="cboxdiv" style="position: relative; margin: 0 auto; width: 200px; font-size: 0;"> <div style="position: relative; height: 305px; overflow: auto; overflow-y: auto; -webkit-overflow-scrolling: touch; border:#ababab 1px solid;"><iframe src="http://www3.cbox.ws/box/?boxid=3437312&boxtag=va1wrq&sec=main" marginheight="0" marginwidth="0" frameborder="0" width="100%" height="100%" scrolling="auto" allowtransparency="yes" name="cboxmain3-3437312" id="cboxmain3-3437312"></iframe></div> <div style="position: relative; height: 75px; overflow: hidden; border:#ababab 1px solid; border-top: 0px;"><iframe src="http://www3.cbox.ws/box/?boxid=3437312&boxtag=va1wrq&sec=form" marginheight="0" marginwidth="0" frameborder="0" width="100%" height="100%" scrolling="no" allowtransparency="yes" name="cboxform3-3437312" id="cboxform3-3437312"></iframe></div> </div>

<!-- END CBOX --> <div style="text-align: center;"><span style="font-size: 10px;"><span style="font-family: &quot;Trebuchet MS&quot;,sans-serif;">Supported by <a href="http://kalongganteng.com" target="_blank">KalongGanteng</a></span></span></div><div style="text-align:right"><a href="javascript:showHideGB()"> [tutup] </a> </div> </div> <script type="text/javascript"> var gb = document.getElementById("gb"); gb.style.right = (30-gb.offsetWidth).toString() + "px"; </script></div>

Keterangan:

• Kode yang saya blok warna HIHAU adalah gambar tombol Buku Tamu yang dapat sobat ganti sesuai selera

 

• Kode yang saya blok warna KUNING adalah gaya Buka chat box, jika anda menginginkan Auto Hide tanpa diklik gunakan onmouseover seperti punya saya dan jika sobat menginginkan Chat Box dengan klik ganti dengan onclick
• Kode yang saya blok warna MERAH adalah kode Chat Box, silahkan ganti dengan kode Chat Box Anda, Untuk mendapatkannya silahkan ikuti langkah-langkah dibawah.
• Cara Mendapatkan Script Warna Merah diatas:
  Kunjungi Situs Resmi CBOX
  Lalu Klik Sign Up