Buku tamu adalah salah satu widget interaktif yang dapat menghubungkan antara anda dan pengunjung. Widget ini saya anggap perlu untuk anda miliki, karena terkadang ada pengunjung ingin mencolek atau sekedar say halloo kepada anda. Secara singkatnya buku tamu adalah sebagai sarana penghubungan anda dengan pengunjung. Sekarang mari kita bahas cara pembuatannya. Ikuti langkah berikut.

Kunjungi situs Cbox
Isi Formulir Registrasinya. Isi nama Cbox (Cbox name), Email anda, Password, isi lagi Password (Confirm Password), Isi alamat blog atau web anda, Pilih Bahasa Inggris, karena Bahasa Indonesia tidak ada, pilih Style sesuai keinginan anda, dan Centang term of conditions, selanjutnya klik Create my Cbox
Selanjutnya anda akan di bawa ke halaman seperti di bawah ini


Selanjutnya buka Email anda. Buka email dari Cbox dan klik link konfirmasinya.


Nanti anda akan di bawa ke halaman selanjutnya seperti di bawah ini.



Simpan dulu di wordpad atau notepad
Sekarang saya akan jelaskan cara memasang buku tamu tersembunyi. Contohnya bisa anda lihat pada tampilan buku tamu di sebelah kanan atas blog ini. Saya akan jelaskan 2 cara memasang buku tamu dengan menjadikannya gadget dan memasukkan script dalam template anda. Kelebihan cara kedua akan ringan saat loading blog anda di banding cara pertama. Ikuti langkah berikut.

Cara Pertama Pasangan Buku Tamu Tersembunyi

Log in ke blog anda
Klik Rancangan


Klik Tambah Gadget dan pilih HTML/JavaScript



Selanjutnya masukkan kode berikut ke dalamnya. Sebelumnya perhatikan dulu script di bawah ini, karena script ini hanya kode untuk menyembunyikan buku tamu anda. Anda harus memasukkan kode buku tamu yang anda simpan tadi ke dalamnya. Perhatikan baik-baik tulisan berwarna merah di bawah 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('http://lh4.ggpht.com/_jn57XA2jLxY/SmCHl1YEsxI/AAAAAAAAAXQ/HshHClEVcvY/tabs.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">

MASUKKAN KODE BUKU TAMU ANDA DI SINI

<div style="text-align:right">
<a href="javascript:showHideGB()">
[tutup]
</a>
</div>
</div>
</div>
<script type="text/javascript">
var gb = document.getElementById("gb");
gb.style.right = (30-gb.offsetWidth).toString() + "px";
</script>

Selanjutnya klik Simpan dan lihat hasilnya

Cara ke Dua Pemasangan Buku Tamu Tersembunyi

Log in ke blog anda
Klik Rancangan


Klik Edit HTML


Centang Expand Template Widget


Masukkan Kode berikut di atas kode </head>

<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('http://lh4.ggpht.com/_jn57XA2jLxY/SmCHl1YEsxI/AAAAAAAAAXQ/HshHClEVcvY/tabs.png') no-repeat}
.gbcontent{float:left; border:2px solid #A5BD51; background:#F5F5F5; padding:10px}</style>

Selanjutnya masukkan kode berikut di atas kode </body>. Anda harus memasukkan kode buku tamu yang anda simpan tadi ke dalam script di bawah ini. Ganti tulisan merah dengan kode buku tama anda.

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

<!-- Ganti ini dengan kode buku tamu kamu -->

<div style="text-align:right">
<a href="javascript:showHideGB()">
[tutup]
</a>
</div>
</div>
</div>
<script type="text/javascript">
var gb = document.getElementById("gb");
gb.style.right = (30-gb.offsetWidth).toString() + "px";
</script>

Klik Simpan Template dan lihat hasilnya
Selamat mencoba dan sukses selalu