Cara Membuat Widget Buku Tamu Melayang Di Blogspot

Widget buku tamu melayang sebenarnya sangat mudah membuatnya. Widget ini sebenarnya dibuat untuk memperhemat widget yang ada di sidebar agar tak terlalu terlihat menumpuk. Tetapi, tampilan Guest Book sobat yang keren sebenarnya itu juga memperindah blog sobat sendiri. Banyak variasi untuk membuat buku tamu melayang ini, dari background gambarnya, lalu slidingnya, sampai isi dari Guest Book itu sendiri. Guest book yang saya pakai adalah tipe sliding, yang bisa dilihat di blog saya langsung. Jika ingin memasangnya, ikuti langkah berikut :

1. Seperti biasa, login ke akun blog masing-masing
2. Klik rancangan >> Add Gadget >> HTML Java Script
3. Copy script ini lalu paste-kan pada gadget

<!-- Mulai Hidden Widget -->
<style type="text/css">
.rifaldhi_fixed{
position:fixed;
top:180px; /*jarak dari atas*/
right:0px;
z-index:+1000;
}
* html .rifaldhi_fixed {position:relative;}
#hidden_rifaldhi {
display:none;
border:2px solid #616258; /*ketebalan dan warna kotak*/
-webkit-border-radius:5px; -moz-border-radius:5px; border-radius:5px;
background:#f1f1ea; /*warna latar*/
padding:3px 10px 0px 10px;
}
</style>
<div class="rifaldhi_fixed">
<table id="hidden_rifaldhi" cellpadding="0" cellspacing="0">
<tr><td>
<!-- Gambar Atas -->
<div style="text-float:right"><a href="javascript:void(0)" onclick="rifaldhi_showHiderifaldhi()" title="Close/Tutup"><img style="border:0px; width:auto; height:auto;" alt="Guestbook" src="http://blog.akakom.ac.id/marcell/files/close.png" /></a></div>

TARUH KODE CHAT BOX SOBAT DI SINI

<br/>
<script type="text/javascript" src="http://bukutamu-zies-name.googlecode.com/files/bukutamu-zies-name.js"></script>
</td></tr></table></div>
<!-- Gambar Samping -->
<div style="z-index:+5" class="rifaldhi_fixed">
<a href="javascript:void(0)" onmouseover="rifaldhi_showHiderifaldhi()">
<img style="border:0px;" src="http://img221.imageshack.us/img221/4097/bukutamu3c.png" /></a>
</div>
<!-- Selesai Hidden Widget -->

4. Jika sudah Oke, klik Save

Nb : Untuk huruf yang bercetak biru, ganti sesuai keinginan sobat
Untuk height dan width juga atur sesuai keinginan

Selamat Mencoba

Tweet