Membuat Gadget Melayang

Silahkan copy paste script di bawah ini pada gadget HTML/Javascript. Jika bingung apa itu widget HTML/Javascript silahkan ikuti petunjuknya:

  • Login ke Blogger
  • pilih Rancangan
  • pada elemen halaman klik tambah gadget
  • Pilih Gadget HTML/Javascript
  • kemudian paste-kan script di bawah ini.
  • dan Simpan
 <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 disini</center> <script type="text/javascript"> var gb = document.getElementById("gb"); gb.style.center = (30-gb.offsetWidth).toString() + "px"; </script></div></div>

Perhatikan pada tulisan yang berwarna ungu, berisi tentang pengaturan tentang posisi, background, border tentang gadget melayang. Silakan atur sendiri apakah gadget melayang ingin di tempatkan di bagian kiri atau kanan.


Komentar