Cara membuat Buku Tamu Pada Blog

Sangat penting bagi suatu blog untuk menyediakan shoutmix atau cbox. Kedua widget ini berperan sebagai pengganti comment box. Dengan menggunakan widget ini, maka pengunjung dapat berinteraksi dengan author dengan gaya yang lebih santai dan dinamis karena penggunaannya-pun cukup praktis. Dalam dunia blog, widget ini lazim disebut dengan sebutan “Buku Tamu” atau “Guest Book”. Dan dalam postingan kali ini saya akan memberikan sedikit variasi pada widget tersebut agar tidak tampak biasa, yaitu dengan menempatkan widget tersebut di sebelah kanan display dan dapat disembunyikan ataupun ditampilkan sesuai dengan keinginan pengunjung.

Untuk lebih jelasnya, kamu bisa lihat contoh tampilan widget tersebut pada blog display ini.

Untuk membuat widget tersebut, caranya sangat mudah, yaitu:

• Copy kode dibawah ini:

<style type="text/css">
#gb{
position:fixed;
top:30px;
z-index:+1000;
}
* html #gb{position:relative;}

.gbtab{
border:5px solid #F0FFFF; #ccc;border-radius:10px;-moz-border-radius:10px;-webkit-border-radius:10px;
height:124px;
width:45px;
float:left;
cursor:pointer;
background:url('http://i1117.photobucket.com/albums/k588/cena_axl/coollogo_com-26148763.gif') no-repeat;
}
.gbcontent{
float:left;
border:4px solid #00FFFF; #ccc;border-radius:10px;-moz-border-radius:10px;-webkit-border-radius:10px;
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">

................isi dengan script cbox kamu.....................

<br/>
Check Neoz Gero-Xida Blog!!<br/>
Click
<a href="http://neozgx.blogspot.com/">
Here
</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>

• Buka bagian “edit->tata letak” apabila kamu menggunakan dasbor dengan pengaturan yang lama atau buka bagian “tata letak” apabila kamu menggunakan dasbor blogger dengan pengaturan yang sudah dimutakhirkan (baru)
• Kemudian klik “tambah widget”
• Pilih “html/javascript”
• Paste kode tersebut
• Simpan kode tersebut

Nah, dalam kode tersebut, ada beberapa kode yang mungkin perlu kamu ubah sesuai keinginan kamu, yaitu:

• top:30px: : untuk mengubah tinggi tab pada widget tersebut. Semakin kecil nilai maka letak widget akan semakin mendekati ‘top’
• background:url('http://i1117.photobucket.com/albums/k588/cena_axl/coollogo_com-26148763.gif') : untuk mengubah background tab widget (ukurannya pun harus sesuai)
• height:124px;  : untuk mengubah tinggi widget
• width:45px;  : untuk mengubah lebar widget

Begitulah cara membuat guest book pada blog kamu. Jangan lupa follow dan commentnya ya?

Thank you…,