Cara Membuat Chat Box/Buku Tamu Auto Hide di Blog

Hai sobat blogger, saya sekarang akan memberikan kepada sobat tutorial membuat chatbox/buku tamu auto hide. Supaya tidak mengganggu tampilan blog maka buku tamu tersebut diberi efek auto hide. Jadi, saat gambar buku tamu tersebut dilewati pointer, akan bermunculan kotak chatting.


Sebelum lanjut ke caranya, kalian harus membuat chat boxnya di sini. Pertama, klik sign up untuk membuat username cbox. Setelah 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. Supaya autohide, ikuti langkah-langkah berikut:

1. Login ke Blogger sobat.
2. Klik Tata Letak.
3. Pilih tambahkan gadget >> Html/Javascript.
4. Copy kode-kode dibawah ini:

<style type="text/css">
#gb{
position:fixed;
top:20px;
z-index:+1000;
}* html #gb{position:relative;}

.gbtab{
height:150px;
width:50px;
float:left;
background:url('http://i1301.photobucket.com/albums/ag103/Rasyidan_Daffa/bukutamu_zps6b405021.jpg') no-repeat;
}

.gbcontent {
float:left;
border:1px solid #000000;
-moz-border-radius-bottomleft:5px;
-webkit-border-radius-bottomleft:5px;
-o-border-radius-bottomleft:5px;
-khtml-border-radius-bottomleft:5px;
-moz-border-radius-topright: 5px;
-moz-border-radius-topleft: 5px;
background: #F2F2F2; url() no-repeat bottom;
padding:10px;
}

</style>

<script type="text/javascript">
function showHideGB(){
var gb = document.getElementById("gb");
var w = gb.offsetWidth;
gb.opened ? moveGB(0, 51-w) : moveGB(30-w, 0);
gb.opened = !gb.opened;
}function moveGB(x0, xf){

var gb = document.getElementById("gb");
var dx = Math.abs(x0-xf) > 25 ? 25 : 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+")", 5);}
}</script>

<div id="gb">
<div class="gbtab" onmouseover="showHideGB()"> </div>

<div class="gbcontent">
<center>
<!-- 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=4135900&amp;boxtag=kfahz8&amp;sec=main" marginheight="2" marginwidth="2" scrolling="auto" allowtransparency="yes" name="cboxmain4-4135900" style="border:#EDDEDB 1px solid;" id="cboxmain4-4135900"></iframe></div>
<div><iframe frameborder="0" width="200" height="75" src="http://www4.cbox.ws/box/?boxid=4135900&amp;boxtag=kfahz8&amp;sec=form" marginheight="2" marginwidth="2" scrolling="no" allowtransparency="yes" name="cboxform4-4135900" style="border:#EDDEDB 1px solid;border-top:0px" id="cboxform4-4135900"></iframe></div>
</div>
<!-- END CBOX -->
<br />
<div style="text-align:center">
</div>
</center></div>
<script type="text/javascript">
var gb = document.getElementById("gb");
gb.style.right = (50-gb.offsetWidth).toString() + "px";
</script>

</div>

5. Setelah copy kode-kode diatas simpan gadgetnya.

Nah sudah selesai tutorialnya, tidak terlalu sulitkan? Kode berwarna merah tersebut adalah kode css cbox saya. Silahkan diganti dengan kode css cbox sobat.

UPDATE!!
O iya lupa, sobat kalau mau pasang gadgetnya jangan langsung, perhatikan warna merah tersebut. Karena saya blogwalking ketemu blog yang langsung jiplak gadget tanpa diganti terdahulu kode CSS CBOX-nya. Jadi harap diganti dan baca tutornya baik-baik.