Cara Membuat Widget Buku Tamu Guestbook Melayang Di Blogspot
Cara Membuat Widget Buku Tamu Melayang Floating Widget - 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.
Cara membuat buku tamu (guest book) / chatbox
melayang :
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 -->
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.
posting interesting and easy to digest ... regards blogwalking friend :)
BalasHapusthanks for visiting
BalasHapusthanks infonya
BalasHapus