Cara Membuat Widget Melayang Floating Widget Di Blogspot

Cara Membuat Widget Melayang Floating Widget  -  Widget melayang atau floating widgetbiasanya digunakan untuk buku tamu/guestbook (shoutmix atau cbox) atau widget seperti statistik blog dan lain-lainterserah yang mau memakai saja. Kelebihan utama dari widget ini adalah bisadisembunyikan (sistem buka-tutup) dan bisa diletakkan dibagian tepi kiri, kananatau bawah, sehingga bisa menghemat tempat pada sidebar.

Cara membuat buku tamu (guest book) / chatboxmelayang :

1.   Daftar dulu di Shoutmix atau Cbox, pilih salahsatu saja.

2.  Isikan data yang diminta dengan lengkap, jikasudah selesai ambil kode shoutmix yang diberikan dan simpan dulu di notepad.

3.   Selanjutnya login ke dashboard blogger anda.

4.   Pilih Rancangan > Elemen Laman > Addgadget (HTML/JavaScript).

5.  Copy kode script dibawah ini dan paste padagadget, kemudian masukkan kode shoutmix anda pada bagian yang saya tandai dengan tulisan warna merah.

<style type="text/css">#gb{position:fixed;top:20px;z-index:+1000;}* html #gb{position:relative;}.gbtab{height:150px;width:30px;float:left;cursor:pointer;background:url('http://i466.photobucket.com/albums/rr22/wong284/GuestBook.png') no-repeat;}.gbcontent{float:left;border:2px solid #FFFFFF;background:#F367F5;padding:5px;}</style><script type="text/javascript">function showHideGB(){var gb = document.getElementById("gb");var w = gb.offsetWidth;gb.opened ? moveGB(0, 30-w) : moveGB(20-w, 0);gb.opened = !gb.opened;}function moveGB(x0, xf){var gb = document.getElementById("gb");var dx = Math.abs(x0-xf) > 10 ? 5 : 1;var dir = xf>x0 ? 1 : -1;var x = x0 + dx * dir;gb.style.right = x.toString() + "px";if(x0!=xf){setTimeout("moveGB("+x+", "+xf+")", 10);}}</script><div id="gb"><div class="gbtab" onclick="showHideGB()"> </div><div class="gbcontent">Letakkan kode Shoutmix anda disini<script type="text/javascript">var gb = document.getElementById("gb");gb.style.right = (30-gb.offsetWidth).toString() + "px";</script></div></div>

6.   Preview dulu untuk  melihat hasilnya.

7.  Edit kode shoutmix pada bagian width dan height untukmengatur lebar dan tinggi kotak widget sesuai keinginan. Sobat juga dapatmelakukan editing pada bagian CSS untuk mengganti kode warna background ataumengganti URL gambar button dengan URL gambar anda sendiri. Silahkanbereksplorasi sendiri saja ya. Saran saya buatlah blog khusus untuk tempat ujicoba sobat.

8.  Jika sudah beres Simpan/Save gadgetnya.

Dengan adanya widget guest book/buku tamu melayangseperti ini jadi memudahkan kita berinteraksi dengan pengunjung blog. Karenabanyak juga pengunjung blog yang kadang malas menulis di kotak komentar namunhanya ingin sekedar menyapa melalui widgetshoutmix ini.