Cara Memasang Chat BOX Auto Hide

Memasang Buku tamu pada website sangat bagus untuk memudahkan pengunjung untuk saling mengenal dan berbagi dengan sesama pengunjung blog dan juga untuk menjalin komunikasi yang baik antara pengunjung blog dengan pemilik blog.

Berikut adalah cara untuk memasang Chat Box (buku tamu) yang Auto Aide dan Auto Klik,

1. Masuk ke Blog anda

2. Masuk ke tata letak / layout lalu klik add gadget,dan pilih tambahkan HTML / javascript.

3. Lalu copykan 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/AVvXsEimebf5x47CKsLZN2hvTXn4ZRbqkWo3YChgj-PInmyH-q4AFvaQxd5gCjtXEwOBWS5vk_np0jMHlJXozbMufW3v9DKAa9vo3X7w1cb0Cw8XQaS4CI63knM0uCkeUGL92HAQIMPysM0I__5S/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 - v001 -->
<div id="cboxdiv" style="text-align: center; line-height: 0">
<div><iframe frameborder="0" width="200" height="305" src="http://www5.cbox.ws/box/?boxid=840371&amp;boxtag=5z9f35&amp;sec=main" marginheight="2" marginwidth="2" scrolling="auto" allowtransparency="yes" name="cboxmain5-840371" style="border:#ababab 1px solid;" id="cboxmain5-840371"></iframe></div>
<div><iframe frameborder="0" width="200" height="75" src="http://www5.cbox.ws/box/?boxid=840371&amp;boxtag=5z9f35&amp;sec=form" marginheight="2" marginwidth="2" scrolling="no" allowtransparency="yes" name="cboxform5-840371" style="border:#ababab 1px solid;border-top:0px" id="cboxform5-840371"></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://idyoung.blogspot.com" target="_blank">Idyoung</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>

 Penting

* Warna Merah adalah gambar backgroud dari Chat Box anda dapat mengubahnya sesuai keinginan anda

** Warna Kuning adalah gaya Buka chat box, jika anda menginginkan Auto Hide tanpa diklik gunakan ONMOUSEOVER dan jika anda menginginkan Chat Box dengan klik ganti dengan ONCLICK

*** Warna Biru adalah kode Chat Box, silahkan ganti dengan kode Chat Box Anda.
Anda Bisa lihat contohnya di http://prudentialweb.blogspot.com

4. Simpan dan lihat hasilnya

Sekian Tutorial singkat ini. jika bermanfaat tolong dilike dan dishare. Terimakasih

Hak Cipta © IDYOUNG