Buku Tamu Melayang

Buku tamu melayang, ap ya maksudnya? melayang yang saya maksud di sini adalah buku tamu dengan gaya nempel in+out pada waktu kita klik. lebih tepatnya adalah buku tamu yang disembunyikan seperti yang ada pada blog ini hehe...sebelumnya thanks buat ndah yang udah ngingetin saya buat posting artikel membuat buku tamu melayang ^_~
buat sobat yang pingin mencoba membuat buku tamu seperti pada blog ini caranya adalah sebagai berikut:

1. Login ke halaman bogger
2. Pilih tata letak
3. Tambah Widget
4. HTML/Java Script
5. Masukan Kode dibawah ini
<style type="text/css">
#nempel{position:fixed;top:65px;z-index:+1000;}
* html #nempel{position:relative;}
.nempeltab{height:100px;width:30px;float:left;cursor:pointer;background: #A5BD51 url('http://i984.photobucket.com/albums/ae328/Gie23_84/Gie%20Colection/11.jpg')no-repeat;}
.nempelisi{float:left;border:2px solid #ffff00;background:#A5BD51 ;padding:8px;}
</style>
<script type="text/javascript">function showHideNempel(){var nempel = document.getElementById("nempel");var w = nempel.offsetWidth;nempel.opened ? moveNempel(0, 30-w) : moveNempel(20-w, 0);nempel.opened = !nempel.opened;}function moveNempel(x0, xf){var nempel = document.getElementById("nempel");var dx = Math.abs(x0-xf) > 10 ? 5 : 1; var dir = xf>x0 ? 1 : -1;var x = x0 + dx * dir;nempel.style.right = x.toString() + "px";if(x0!=xf){setTimeout("moveNempel("+x+", "+xf+")", 10);}}</script>
<div id="nempel">
<div class="nempeltab" onclick="showHideNempel()"></div>
<div class="nempelisi">

<!-- Begin ShoutMix - http://www.shoutmix.com -->
<iframe scrolling="auto" width="190" frameborder="0" src="http://www5.shoutmix.com/?kolomtamu" height="300" title="kolomtamu">
<a href="http://www5.shoutmix.com/?kolomtamu">View shoutbox</a>
</iframe>
<br/><a href="http://www.shoutmix.com" title="Get your own free shoutbox chat widget at ShoutMix!">ShoutMix chat widget</a><br/>
<!-- End ShoutMix -->

<div style="text-align:right;"><a style="text-decoration:none; font-family:Arial, Helvetica, sans-serif; font-size: 12px;" href="javascript:showHideNempel()">[Close]</a></div>
</div>
</div>
<script type="text/javascript">var nempel = document.getElementById("nempel");nempel.style.right = (30-nempel.offsetWidth).toString() + "px";</script>

Selanjutnya klik Simpan dan lihat blog

Keterangan:
Untuk kode yang berwarna MERAH itu adalah kode Shout Mix (buku tamu) saya, silahkan sobat ganti dengan kode Shout Mix sobat sendiri.
Untuk kode yang berwarna BIRU adalah motif background buku tamu, sobat bisa menggantinya dengan disain sobat sendiri bila ingin menggantinya.
Untuk kode warna PINK adalah background buku tamu silahkan ganti dengan warna sesuai dengan selera sobat. untuk melihat kode warna silahkan lihat disini

Mudah bukan,.....
Selamat mencoba semoga bermanfaat