Cara Membuat Kotak Buku Tamu Sembunyi Otomatis atau ChatBox Autohide di Blog

Chatbox atau biasa kita sebut buku tamu merupakan widget yang penting untuk kita pasang pada blog kita. Penggunaan Chatbox atau buku tamu adalah untuk memberi jejak bagi pengunjung yang mengunjungi blog kita. Nah, kali ini saya akan membahas total tentang Cara Membuat Buku Tamu Autohide di Blog Anda  atau buku tamu yang bisa Autohide hanya dengan dilewati oleh pointer mouse. Untuk demo anda bisa klik link dibawah ini.

DEMO Buku Tamu Autohide

Mau tau cara membuatnya? Lansung saja ke-TKP.

1. Login ke akun Blogger anda.


2. Pilih Blog yang anda ingin edit.


3. setelah itu klik Tata Letak (pada tata letak ini anda akan mendapatkan layout tata letak blog anda, silahkan anda pilih dimana letak yang cocok untuk Chatbox ini)

 

Catatan : Jika memakai Blog Wordpress anda hanya perlu membuka Dashboard>>> Appearance >>> Add Widget, nah setelah itu silahkan untuk menaruh Chatbox dilayout yang anda inginkan

4. Setelah itu klik tombol Tambah Gadget, gadget yang ditambahkan adalah gadget tipe HTML/JavaScript

5. Nah, tinggal masukkan kode scriptnya aja. Berikut adalah kodenya.

<style type="text/css">

#gb{

position:fixed;

top:20px;

z-index:+1000;

}* html #gb{position:relative;}

.gbtab{

height:150px;

width:29px;

float:left;

background:url('http://www.abiasoftindo.com/image/BukuTamu.png')no-repeat ;

}

.gbcontent {

float:right;

border:2px solid #330099;

-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;

border-radius: 10px 10px 10px 10px;

background: #F2F2F2; url() no-repeat bottom;

padding:10px;

Box-shadow: 5px 5px 5px 5px #756F6F;

}

</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>

<div id="fb-root"></div>

<script>(function(d, s, id) {

  var js, fjs = d.getElementsByTagName(s)[0];

  if (d.getElementById(id)) return;

  js = d.createElement(s); js.id = id;

  js.src = "//connect.facebook.net/id_ID/sdk.js#xfbml=1&version=v2.0";

  fjs.parentNode.insertBefore(js, fjs);

}(document, 'script', 'facebook-jssdk'));</script>

<div class="fb-comments" data-href="http://it-anakbangsa.blogspot.com/" data-width="280" data-numposts="6" data-colorscheme="light"></div>

<br />

<div style="text-align:center">

<span style="float:right; color:#B20000;">Dapatkan <a target="_blank" href="http://tutorkeren.blogspot.com/2012/12/cara-membuat-chatbox-autohide-di-blog.html"> widget Ini </a></span>

</div>

</center>

</div>

<script type="text/javascript">

var gb = document.getElementById("gb");

gb.style.right = (50-gb.offsetWidth).toString() + "px";

</script>

</div>

Catatan : 
a. Kalimat yang diberi warna Biru, bisa anda ganti dengan URL gambar anda sendiri.
b. Kalimat yang diberi warna HIJAU, silahkan anda ganti dengan kode script milik Chatbox Atau FB Plugin  anda.

6. Terakhir tinggal klik Save 

Berikut adalah cara-cara untuk membuat Chatbox Autohide pada blog. Saya berharap artikel Ini  bermanfaat bagi kita semua.