Trik Blog kali ini adalah Cara membuat widget melayang pada blog. Terutama yg akan saya bahas adalah membuat widget melayang pada pengguna Blogspot, manfaat dari widget melayang itu sendiri banyak, biasanya di gunakan untuk ditempati iklan berbasis PPC atau iklan yang begitu penting dan sangat terbatas waktu promosinya juga berfungsi agar pengunjung tau bahwa ada bisnis yang mungkin sangat penting di publikasikan.
Widget melayang ini bisa kita atur tata letaknya entah mau diletakan sebelah kiri, kanan, atas, maupun bawah pada posisi blog.
Untuk tampilan besar kecilnya ukuran widget melayang ini tergantung pada isi yang akan kita tempatkan, atau otomatis menyesuaikan.
Jika widget melayang ini kita tempati iklan berbasis PPC, maka ukuranya akan menyesuaikan dengan ukuran iklan, untuk contohnya bisa di lihat disebelah kanan Blog ini.
Bagaimana apakah kamu tertarik untuk membuatnya? Jika ya.. mari kita langsung praktekkan.
Silahkan copi paste script di bawah ini pada widget HTML/Javascript.
Jika bingung apa itu widget HTML/Javascript silahkan ikuti petunjuknya:
- Masuk ke dasboard blog kamu.
- Pilih "Rancangan"
- Pada elemen halaman klik ''Tambah widget''
- Dan pilih "Widget 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> ganti kalimat ini dengan code script banner atau code script lainnya</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 merah pada script di atas, di situ berisi tentang pengaturan tentang posisi, background,border widget melayang tersebut. Atur sesuai dengan keinginan kamu apakah ingin di tempatkan di bagian kiri atau kanan.
Bagaimana apakah sudah bisa membuat widget melayang atau membuat iklan melayang? di Blog kamu..??
Semoga bermanfaat..!!
Artikel Terkait:
Share it to your friends..!