Cara Membuat Buku Tamu Tersembunyi

Selamat pagi sobat blogger. Sudah tau buku tamu belum? buku tamu biasanya berbentuk kotak tempat pengunjung berinteraksi atau sekedar meninggalkan jejak di blog kita, istilah lain yang digunakan yaitu shout box. Dengan buku tamu ini kita juga bisa meningkatkan traffic pengunjung dengan sekedar berbagi cerita, tipstricks, tukar pikiran dengan pengunjung blog kita sehingga membuat pengunjung betah dan bisa jadi menjadi pelanggan setia blog kita.

Kenapa disembunyikan? Keunggulan dengan tips ini saat sobat melakukan gulir bawah gulir atas menggunakan scrollbar, buku tamu tersebut tidak akan ikut naik turun mengikuti halaman blog melainkan tetap diam di pojok kanan sehingga akan selalu terlihat oleh pengunjung blog. Namun dibalik keunggulannya pasti ada efek sampingnya, hehe.. efek sampingnya akan membuat blog kita sedikit lebih berat untuk dibuka. Maka pikirkanlah baik-baik akan memasang buku tamu tersembunyi ini tatu tidak.

Contoh jadinya bisa anda lihat disini
Langkahnya sebagai berikut
Langkah 1 :
Daftarlah dahulu di tempat penyedia layanan shoutbox untuk membuat buku tamu ini. Lalu anda dapatkan script kode shoutboxnya. Anda dapat mendaftar untuk mendapatkan shoutbox secara gratis di :
cbox - www.cbox.ws
shoutcamp - shoutcamp.com
myshoutbox - www.myshoutbox.com
pilih salah satu dari ketiga pilihan diatas

Langkah 2 :
1. Anda masuk ke tata letak (untuk tampilan blogger baru) atau rancangan (untuk tampilan blogger lawas)
2. Lalu anda pilih tambah widget dimana saja boleh. Setelah itu pilih  HTML/JavaScript
3. Setelah itu anda pastekan kode dibawah ini pada kolom html/javascript tersebut. Lalu ganti script buku tamu dengan kode yang anda dapat dari penyedia layanan shoutbox tadi

<style type="text/css">
#gb{
position:fixed;
top:90px;
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/AVvXsEhnOiSyNdvww5Uvh4kH7Zr-pOyqM8RheXPz_iPGkLPabtqerKjWbedwF3WdUIzDOexIV88hNGNzo5g7CYhHIA1h0eJg4XydY76V91uksZTHnRVxy_0KLLdFt-S9dpkVs9tvZ31Vm5OVVMU/s1600/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" onclick="showHideGB()"> </div>
<div class="gbcontent">

SCRIPT BUKU TAMU

<script type="text/javascript">
var gb = document.getElementById("gb");
gb.style.right = (30-gb.offsetWidth).toString() + "px";
</script>

Lalu klik save. Selesai, silakan lihat hasilya :)


Note: (bagi yang sudah memasang related post di blog)
jika kamu sudah memasang widget ini lalu tiba-tiba kotak related post kamu tidak berfungsi, lebih baik anda menghapus widget buku tamu tersembunyi ini. Terkadang setiap template bisa terjadi bentrok html/javascript.
Tapi jangan pernah takut mencoba sesuatu hal yang baru..!!