Cara Membuat Buku Tamu Melayang ~ iShare

Cara Membuat Buku Tamu Melayang

Posted by Frans Enriko Siregar On 12 komentar

Jika di postingannya sebelumnya saya sudah pernah jelaskan cara membuat buku tamu di blog, kali ini bagaimana membuat buku tamu melayang di blog kita. Masih ada yang belum tahu maksudnya "melayang" di sini? Melayang di sini maksudnya adalah buku tamu tersebut tidak berubah letaknya walaupun kita scroll layar situsnya sampai ke bawah. Dulunya blog ini menggunakan cara tersebut, tapi sekarang tidak lagi. Oke, kita langsung ke cara membuatnya.

Cara berikut sangatlah mudah, intinya kita hanya membuat widget HTML baru (yang belum tahu bisa ke postingan ini) kemudian kita buat kodenya dan langsung jadi. Kode yang harus kita salin adalah kode di bawah ini :

<style type="text/css">
.gb_fixed{
position:fixed;
top:0px;
left:0px;
z-index:+10;
}
* html .gb_fixed {position:relative;}
#hidden_gb2 {
display:none;
border:2px solid #004831;
background:#000000;
padding:10px;
padding-top:0px;
}
</style>
<div class="gb_fixed">
<table id="hidden_gb2" cellpadding="0" cellspacing="0">
<tr><td>
<div><a href="javascript:void(0)" onclick="gb_showHideGB()"><b style="color:red"><right>Close [X]</right></b></a></div>



</td></tr></table>
</div>
<script src="http://dl.dropbox.com/u/24368183/buku%20tamu%20fade%20out.js"></script>
<div style="z-index:+5" class="gb_fixed">
<a href="javascript:void(0)" onclick="gb_showHideGB()">
<img border="0" style="border:0px" src="http://dl.dropbox.com/u/24368183/CHATBOX.png" />
</a>
</div>

Keterangan:

Untuk kode yang berwarna merah, itu adalah posisi tampilan buku tamu Anda. Anda bisa mengganti top dengan bottom atau left dengan right.
Untuk kode yang berwarna biru, itu adalah kode buku tamu Anda sendiri. Belum tahu cara mengambil kode buku tamu Anda? Berarti Anda harus membaca postingan ini terlebih dahulu.
Untuk kode yang berwarna hijau adalah gambar untuk klip buku tamu Anda.

Terima Kasih untuk Celoteh Sang Galang yang sudah mau berbagi ilmunya.