Membuat Chat Box Serta Auto Hide Chat Box

Pada Tutorial kali ini kita akan mempelajari bagaimana cara menambahkan buku tamu kehalaman blog anda dan manfaatnya bagi blog.

Widget chatbox atau buku tamu ini hapir semua pengguna Blogger memasang widget chatbox ini dihalaman blognya karena chatbox sangat banyak memberikan manfaat pada blog kita terutama selain dapat mempercantik tampilan blog, chatbox atau buku tamu ini dapat mendatangkan pengunjung kehalaman blog anda dan yang paling penting menurut Dapur Tutorial Blogspot yaitu sebagai saran untuk saling berkomunikasi dan silahturahmi antara pengunjung dengan admin blog.

Buku tamu yang sangat populer dan paling banyak digunakan yaitu CBox dan Shoutmix. karena Shoutmix akan menonaktifkan layanan Free atau gratisnya jadi disini gw Hanya akan menjelakan cara membuat buku tamu menggunakan layanan gratis CBox seperti di blog ini.
Berikut lankah-langkah untuk membuat Buku tamu pada halaman blog :

• Mendapatkan kode buku tamu dari ChatBox Sign Up

• mengisi formulis pendaftaran seperti ini.  Isi data yang diminta seperti gambar dibawah ini kemudian klik Create My Cbox

• buka Email yang anda gunakan untuk mendaftar Cbox Karena ada Email konfirmasi pendaftaran anda yang dikirim oleh Cbox. Klik Link konfirmasi tersebut untuk mengaktifkan akun Cbox anda

• Setelah Email konfirmasi tersebut anda klik,
  Akun anda sekarang sudah aktif dan anda bisa masuk ke akun CBox anda
  Sekarang Sign in Ke akun Cbox anda menggunakan Username dan Pasword yang sudah anda buat saat mendaftar tadi untuk mendapatkan Kode ChatBox atau buku tamu anda Setelah anda masuk anda langsung dihadapkan ke halaman berikut

NB : Bisa langsung di paste pada gadget, script Chat box yang di copy tadi. Tapi cara ini tidak bisa menyembunyikan auto chat box tersebut. dan jika ingin membuat auto hide chat box sobat bisa mengikuti cara yang akan saya post berikut ini.... check it dot gan. 

• Pilih tata letak dan klik tambah gadget

• Pilih HTML/JavaScript

• Masukan Script 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://i1108.photobucket.com/albums/h405/christian410/ghtrf.png') 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://www7.cbox.ws/box/?boxid=588039&amp;boxtag=n9zn47&amp;sec=main" marginheight="2" marginwidth="2" scrolling="auto" allowtransparency="yes" name="cboxmain7-588039" style="border:#EAB412 1px solid;" id="cboxmain7-588039"></iframe></div>
<div><iframe frameborder="0" width="200" height="75" src="http://www7.cbox.ws/box/?boxid=588039&amp;boxtag=n9zn47&amp;sec=form" marginheight="2" marginwidth="2" scrolling="no" allowtransparency="yes" name="cboxform7-588039" style="border:#EAB412 1px solid;border-top:0px" id="cboxform7-588039"></iframe></div>
</div>
<!-- END CBOX -->
<br />
<div style="text-align:center">
<span style="float:right; color:#000000;">Get this <a target="_blank" href="http://christiantatelu.blogspot.com/2012/03/cara-membuat-buku-tamu-auto-hide-di.html"> widget! </a></span>
</div>
</center></div>
<script type="text/javascript">
var gb = document.getElementById("gb");
gb.style.right = (50-gb.offsetWidth).toString() + "px";
</script>

</div>

Tulisan Biru di ganti dengan Chat Box Script yang di copy sobat tadi.
Save....