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/AVvXsEh6docsMnEVpGVrn6dhgCKEXHE9jEhgA-UbyJYSg0G1Z4BcmVoOr-w832qbTRif2-Fy9D3YmZentNX6S44bs1Y3k1m38wxOTObmeTCSnJ-KaIQTcNf52eANY2WMESZgW3aPZ2Zk-JOOfpEe/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>
<br />
<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://falconthedocter.blogspot.com/2012/11/cara-membuat-buku-tamu-tersembunyi_26.html">
disini
</a>
<br />
<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..
