Cara Memasang Buku Tamu di Blog

Memasang sebuah buku tamu (guestbook) pada sebuah blog adalah hal yang lumayan penting, karena buku tamu ini merupakan salah satu sarana untuk interaksi antara yang pemilik blog dengan para pengunjung blog. Dengan di pajangnya buku tamu di dalam blog, maka para pengunjung dapat memberikan kritik dan saran kepada blog anda, yang pasti isi dari sebuah buku tamu ini sangatlah bervariasi bisa merupakan pujian, pertanyaan, sekedar iseng, atau ada juga merupakan kritikan terhadap isi blog anda, dan justru dengan adanya variasi itulah membuat blog kita jadi lebih bagus.

Ada banyak gaya dan cara pemasangan buku tamu dari berbagai blogger, diantaranya adalah buku tamu autohide, sama seperti yang akan saya bahas kali ini.

Untuk membuat buku tamu autohide silahkan ikuti tutorial berikut ini :

1. Silahkan kunjungi situs Cbox, kemudian silahkan registrasi untuk yang belum memiliki akun dan apabila anda sudah mendaftar bisa langsung sign in
2. Jika sudah maka anda bisa mengakses dasbor cbox, silahkan diedit baik tampilan maupun warna cbox anda jika sudah klik publish
3. Copy kode yang dihasilkan.
4. Kemudian, silahkan copy kode berikut ini, ini adalah kode untuk membuat cbox autohide.

<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('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjyw0b94XKtF_EYG4xyZ4YzdnvG1yiHxLmOaqNzzV3z-9Zpl3j1Xxg5kWB7dpNNnhN-AnOx-cGrDsdV-WENKgoOn9NFjPpxi7kUvP8qgSZINSob75kZTCL7u9yb1g4t5io4LogVkN1vdJ8/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">

Silakan Paste Kode Buku Tamu yang sudah di kopi tadi 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></div></div>

Keterangan :

• top:50px = jarak chatbox dari top/atas
• background:url() no-repeat; = gambar tab untuk membuka chatbox
• border:2px solid #A5BD51; = tebal border/garis tepi cbox dan warna border
• background:#F5F5F5; = background/latar belakang cbox
• padding:10px; = jarak cbox dengan border

Cara Pemasangan buku tamu di blog :

1. Login ke akun blogger anda
2. Klik Tata Letak > Klik Tambah Gadget > pilih HTML/Javascript, paste kode diatas (jangan lupa untuk menaruh kode cbox yang sudah anda copy tadi ke dalam kode diatas ini)
3. Klik simpan dan lihat hasilnya

Selamat Mencoba dan Semoga Bermanfaat