Trik Membuat Widget Melayang

Cara membuat widget melayang pada blog, khususnya pengguna blogspot di blogger.
Widget melayang itu banyak manfaatnya, biasanya digunakan untuk penempatan iklan PPC, atau untuk menginformasikan kepada pengunjung di blog  kita bahwa ada bisnis iklan yang penting yang perlu diketahui oleh pengunjung.

Widget melayang ini bisa kita atur tata letaknya, bisa di letakkan di sebelah kiri,  kanan atau bawah posisi blog. 
Untuk tampilan besar kecilnya dari ukuran widget melayang tergantung pada isi yang akan kita tempatkan.

Jika widget melayang ini misalnya akan kita tempati sebuah iklan berbasis Pay Per Clik, maka akan menyesuaikan dengan ukuran iklan.

Mari kita praktekkan cara buat widget melayang, silahkan copy dan paste di blog sobat berikut experimennya he..he...

• masuk ke dasboard blog anda.
• pilih Rancangan
• pada elemen halaman klik ''Tambah widget''
• Dan pilih Widget HTML/Javascript
• kemudian paste-kan script di bawah ini.
• dan Simpan
• Berikut kode scriptnya,

<style type="text/css"> #gb{ position:fixed; top:10px; z-index:+1000; } * html #gb{position:relative;} .gbcontent{ float:left;margin-left:220px; border:2px solid #bb0000; background:#eeeeee; padding:10px; } </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.top = x.toString() + "px"; if(x0!=xf){setTimeout("moveGB("+x+", "+xf+")", 10);} } </script> <div id="gb"> <div class="gbtab" onclick="showHideGB()"> </div> <div class="gbcontent"> <div style="text-align:right"> <a href="javascript:showHideGB()"> .:[Close][Klik 2x]:. </a> </div> <center> silahkan tempatkan kode iklan atau banner atau teks  disini </center> <script type="text/javascript"> var gb = document.getElementById("gb"); gb.style.center = (30-gb.offsetWidth).toString() + "px"; </script></div></div>

Coba anda perhatikan pada tulisan yang berwarna ungu pada script di atas, berisi tentang pengaturan posisi background dari border widget melayang.

Atur sesuai dengan keinginan anda, apakah mau ditempatkan pada halaman yang ditentukan.

Demikian cara pembuatan widget melayang dari Mast Maman Blog,  semoga bermanfaat bagi pembaca semuanya oke..