Cara membuat Buku Tamu Tersembunyi di blog

Memasang sebuah buku tamu (guestbook) pada sebuah blog adalah hal yang cukup penting,karena buku tamu ini merupakan salah satu sarana untuk berinteraksi antara yang Anda dengan para pengunjung blog. Dengan adanya buku tamu di dalam blog, maka para pengunjung dapat mengungkapkan isi hatinya tentang blog yang Anda buat, 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 menarik.


Pastinya Anda penasaran kan dengan buku tamu di blog saya ini. Ternyata buku tamu ini bisa disembunyikan dengan tujuan tidak memakan tempat seperti di sidebar blog Anda dan membuat blog Anda jadi lebih menarik.

Namun sebelum Anda membuat buku tamu, Anda harus menggunakan penyedia buku tamu dari pihak ketiga, tapi Anda nggak usah khawatir, ada kok penyedia buku tamu yang servernya lumayan bagus dan jarang sekali mengalami down yakni http://www.shoutmix.com atau http://www.cbox.ws. Nah, dari penyedia buku tamu inilah kita nanti akan mendapatkan kode buku tamu yang akan kita pasang bersama script di bawah ini.

Ahh.. sepertinya kita tidak usah bertele-tele lagi kali yaa, berikut ini cara membuat buku tamu seperti yang saya miliki :

[1]. Masuk ke Blogger
[2]. Pilih "Rancangan/Layout" kemudian "Page Elements"
[3]. Klik "Add a Gadget" lalu pilih "HTML/JavaScript" dan copy-paste kode 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('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0tuW2Wayzn05BEnAIsjKoXI6QfnEJqqdz4XsdRUANUPa8bMyDuvet9PoAczYJAFpjPvHQdzKSiUGAqRGwOSw0ERiK8D6LUr_V25XggbT3STxtdcK8gBcoDMUuJ4n5DAu2N4un3MlqUNob/s128/345o85i.gif') 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">

<!-- GANTI INI DENGAN KODE BUKU TAMU ANDA -->

<br/>
Mau punya buku tamu seperti ini?<br/>
Klik
<a href="http://v3-class.blogspot.com/2011/12/cara-membuat-buku-tamu-tersembubyi.html">
disini
</a>

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

[4]. Pada kode di atas, cari kode <!-- GANTI INI DENGAN KODE BUKU TAMU ANDA -->  dan ganti kode tersebut dengan kode buku tamu yang kamu dapatkan dari situsnya. Sebagai referensi, saya tambahkan cara mendapatkan kode buku tamu dari Cbox.
[5]. Yang terakhir klik "Simpan", selesai deh.

Catatan :
Jika Anda ingin mengatur posisinya. Ubah aja nilai atribut top-nya. Kalau mau lebih ke atas dikit, ubah jadi 30px atau 20px, terserah Anda.

Bagaimana..?? Makin penasaran..??? Saran saya lebih baik Anda langsung aja deh mencobanya, mudah kok.

Selamat mencoba yaa dan semoga bermanfaat..