Cara Buat Buku Tamu dan Chat Box di Blogger

Proses Pembuatan Account

1. Buka web untuk membuat Buku Tamu di http://www.cbox.ws
2. Klik Get your own free Cbox now!

3. Isi Form pendaftaran dengan lengkap mulai dari Cbox Name, Email address, Password, alamat website, dan bahasa

4. Masih di form pendaftaran anda bisa menentukan gaya Buka Tamu anda dengan memilih Style

5. Jika sudah selesai diisi semua dengan lengkap klik tombol Create My Cbox dan sukses anda telah membuat Buku Tamu.

>> Login dan Setting Buku Tamu

1. Login ke member area cbox anda

2. Klik Look & Feel > Layout Options untuk Mengatur lebar ( Width ) dan Tinggi ( height ) Buku Tamu. Sesuaikan dengan ukuran side bar blog anda. Anda juga bisa mengatur apakah pesan terbaru akan ditampilkan paling atas atau di bawah dengan memilih In Order

3. Klik Look & Feel > Colours & Fonts. Anda bisa menentukan warna, bentuk huruf dan lain-lain. Silahkan setting sesuai dengan selera anda.  Jangan lupa klik Save

4. Jika sudah selesai semua setting anda, jangan lupa klik tombol Apply

>> Cara mengambil kode HTML/Script buku tamu dan memasukkan ke side bar blog

1. Masih di member area Cbox klik Publish! Lalu klik tombol Copy to clipboard.

2.  Setelah mengambil kode Chat Box di atas, lalu Paste / Gabungkan dengan Script Buku Tamu 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/AVvXsEgmyIYNrqYsPOExkxKXsTaJWNjf96DHQ-7_CqVzONIjoAl2d1doywoNqPdO9z9KB3frphx5pZX19DCihT_xt4KobRzmOBWyZIPzeD7IGiY9xqRjHwhncx0nwW16ZwPR0N-mXs_eNakhbM8/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 Chat Box yang sudah di kopi tadi Di Sini

<div style="text-align:right">
<a href="http://toufikhidayat.blogspot.com/2012/05/cara-membuat-buku-tamu-tersembunyi-pada.html">[Pasang Ini Juga]</a>><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>

3. Login ke blogger.com >> Klik Tata Letak >> Tambah Gadget.

4. Di window yang muncul klik HTML/Java Script.

5. Paste script Buku Tamu yang sudah di gabung dengan script Chat Box yang telah dicopy tadi ke kolom yang tersedia seperti di bawah ini:

Beres. Sekian tips mengenai cara memasang buku tamu di blog. Silahkan buka blog anda dengan buku tamu yang baru anda buat.

Semoga manfaat ya..........!