Widget buku
tamu/guestbook melayang atau floating widget biasanya
digunakan untuk buku tamu/guest book (shoutmix atau cbox) atau widget
seperti statistik blog dan lain-lain terserah yang mau memakai saja. Kelebihan
utama dari widget ini adalah bisa disembunyikan (sistem buka-tutup) dan bisa
diletakkan dibagian tepi kiri, kanan atau bawah, sehingga bisa menghemat tempat
pada sidebar.
1. Daftar dulu di Shoutmix
atau Cbox, pilih salah satu saja.
2. Isikan data yang diminta
dengan lengkap, jika sudah selesai ambil kode shoutmix yang diberikan dan
simpan dulu di notepad.
3. Selanjutnya
login ke dashboard blogger anda.
4. Pilih Rancangan
> Elemen Laman > Add gadget (HTML/JavaScript).
5. Copy kode script dibawah
ini dan paste pada gadget, kemudian masukkan kode shoutmix anda pada bagian
yang saya tandai dengan tulisan warna merah.
<!-- 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>
LETAKKAN KODE GUESTBOOK/SHOUTMIX/CBOX/SHOUTCAMP ANDA DISINI
<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 -->
<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>
LETAKKAN KODE GUESTBOOK/SHOUTMIX/CBOX/SHOUTCAMP ANDA DISINI
<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 -->
6. Preview dulu
untuk melihat hasilnya.
7. Edit kode shoutmix pada
bagian width dan height untuk mengatur lebar dan tinggi kotak widget sesuai
keinginan. Sobat juga dapat melakukan editing pada bagian CSS untuk mengganti kode
warna background atau mengganti URL gambar button dengan URL gambar anda
sendiri. Silahkan bereksplorasi sendiri saja ya. Saran saya buatlah blog khusus
untuk tempat uji coba sobat.
8. Jika sudah beres
Simpan/Save gadgetnya.
Dengan adanya widget guest book/buku tamu melayang seperti
ini jadi memudahkan kita berinteraksi dengan pengunjung blog. Karena banyak
juga pengunjung blog yang kadang malas menulis di kotak komentar namun hanya
ingin sekedar menyapa melalui widget buku tamu shoutmix/cbox ini.
Cara Membuat Widget Buku Tamu Melayang Floating Widget
Reviewed by khoirul anr
on
Monday, June 11, 2012
Rating: