Membuat Buku Tamu (Guest Book) Melayang

Buku tamu saya rasa cukup penting keberadaannya dalam sebuah site.
Dengan buku tamu, pengunjung bisa meninggalkan komentar atau sekedar sapaan tanpa harus meletakkannya di satu postingan tertentu. Di posting yang satu ini saya hanya akan membahas tentang Shoutmix (karena saya memakai Shoutmix). Sifatnya yang umum dan mudah digunakan membuat Shoutmix menjadi populer di dunia Internet.

Sebelumnya, anda harus sudah punya ID shoutmix dulu. Silahkan Sign Up di SINI

Anda bisa memasang widget yang satu ini di mana pun anda suka.
Yang paling gampang memang diletakkan di sidebar.

Caranya:

1. Log in Blogger
2. Buka Rancangan
3. Klik Tambah Gadget
4. Masukkan Script Shoutmix anda

Tambahan

Script Shoutmix itu yang seperti ini lho:
<!-- Begin ShoutMix - http://www.shoutmix.com -->Script<!-- End ShoutMix -->
Anda juga bisa mengatur lebar(width) dan tinggi(height)nya sesuka hati...

5. Save

Apa anda memperhatikan Buku Tamu di blog ini melayang di sebelah kanan atas???

Jika anda ingin memasang widget yang sama di site anda sendiri silahkan ikuti step-by-step di bawah ini:
1. Log in Blogger
2. Masuk ke Rancangan
3. Klik Tambah Gadget
4. Masukkan Script di bawah ini:

Kepanjangan sih...

<style type="text/css">
#gb{
position:fixed;
top:25px;
z-index:+1000;
}
* html #gb{position:relative;}
.gbtab{
height:145px;
width:30px;
float:left;
cursor:pointer;
background:url('http://bla-bla-bla-blaaaa) no-repeat;
}
.gbcontent{
float:left;
border:2px solid #FFFFFF;
background:#000000;
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 shoutmix anda

<div style="text-align:right">
<a href="javascript:showHideGB()">
[close]
</a>
</div>
</div>
</div>
<script type="text/javascript">
var gb = document.getElementById("gb");
gb.style.right = (30-gb.offsetWidth).toString() + "px";
</script>

Tambahan

Oh ya, anda bisa mengkostumisasi buku tamu anda sendiri dengan mengganti script yang sudah saya tandai dengan warna hijau.

• Untuk mengatur letak ketinggian buku tamu, atur perintah top
• Untuk mengatur tinggi buku tamu, atur perintah height
• Untuk mengatur lebar buku tamu, atur perintah weight
• Untuk mengatur ikon buku tamu, atur perintah background (anda bisa mencari URL dari gambar-gambar di Photobucket atau sumber-sumber lain)

Sebenarnya anda juga bisa mengganti warna border, padding, dan lainnya juga, jadi silahkan otak-atik sendiri...

5. Save, untuk judul bisa diisi terserah...

Oke, selamat mencoba!