Sabtu, 19 Mei 2012

Membuat Widget Melayang

     Kali ini saya akan memberitahukan bagaimana cara membuat widget melayang. Widget melayang ini bisa kita atur tata letaknya, bisa di samping, di atas, di bawah, atau di buang juga gak apa apa.
     Untuk besar kecilnya widget melayang ini tergantung dari isi yang akan kita tempatkan. Jika widget ini akan kita tempatkan iklan berbasis PPC. Maka ukurannya akan menyesuaikan ukuran iklan. Bagaimana apakah kamu tertarik? Jika ya ayo kita langsung ke TKP.
     Silakan copy paste script di bawah ini pada widget HTML/Javasript. Jika bingung apa itu widget HTML silakan ikuti saja petunjuknya.
  • Masuk ke blog kamu
  • Pilih Rancangan
  • Pada elemen halaman click tambah widget
  • Dan pilih widget HTML/Javascript
  • Lalu, paste script di bawah ini


<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 atau apalah terserah kamu disini yah</center> <script type="text/javascript"> var gb = document.getElementById("gb"); gb.style.center = (30-gb.offsetWidth).toString() + "px"; </script></div></div>

Perhatikan tulisan yang berwarna ungu  pada script, di situ berisi tentang pengaturan posisi, background, border, widget melayang tersebut. Atur sesuai dengan keinginan kamu, apakah ingin di tempatkan di bagian kiri atau kanan. Oh, ya jika kamu ingin menempatkan widget melayang tersebutpada halaman yang ngin kamu tentukan baca artikel blogtegal tentang menampilkan widget pada halaman tertentu yg kita inginkan.

   Bagaimana apakah sudah bisa membuat widget melayang?

Tidak ada komentar:

Posting Komentar