Sample text

Download

Follow Us

English French German Spain Italian Dutch

Russian Portuguese Japanese Korean Arabic Chinese Simplified

Blogger Tricks

Blogger Themes

Pilih Warna Latar

Instructions

Recomended

Pages

Diberdayakan oleh Blogger.

Popular Posts

Followers

About me

Foto saya
BATATAVIA, BATAVIA, Indonesia
No COMENT Mr.HACKER
RSS

Cara Membuat Widget Melayang Floating Widget Di Blogspot



Cara Membuat Widget Melayang Floating Widget  -  Widget 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.

<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 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 shoutmix ini.

  • Digg
  • Del.icio.us
  • StumbleUpon
  • Reddit
  • RSS

0 komentar:

Posting Komentar