Cara Membuat Buku Tamu(Guestbook)/ChatBox dan Tersembunyi

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.

Anda harus menggunakan penyedia buku tamu dari pihak ketiga, tapi Anda nggak usah khawatir, ada kok penyedia buku tamu gratis yang servernya lumayan bagus dan jarang sekali mengalami down yakni http://www.cbox.ws *(http://www.shoutmix.com sudah menghentikan layanan chatbox gratis)

. Nah, dari penyedia buku tamu inilah kita nanti akan mendapatkan kode buku tamu yang akan kita pasang bersama script di bawah ini.

berikut ini cara membuat buku tamu seperti yang saya miliki : 

[1]. Masuk ke Blogger

[2]. Pilih "Rancangan/Layout/Tata Letak" 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/AVvXsEjzMTQjKMXxwsQ9mJBV9j8EMcT5gRjgOIDICjBLwX8zk0yZ9gSDnB4jbY3q8c3gJSM8zqmL9DrBqqFDMH3B2vziA2wPEScjzKWLdeUYR43w9-atPcOEh-5kDVZWmiqSk_5GtA0Sa3Lb4U2m/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 -->

<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 berwarna merah, <!-- GANTI INI DENGAN KODE BUKU TAMU ANDA -->  dan ganti kode tersebut dengan kode buku tamu yang Anda dapatkan dari situsnya [http://www.cbox.ws] . 

[5]. Yang terakhir klik "Simpan", selesai deh.