Membuat Widget Melayang bagian 2 - Kalo pada kesempatan sebelumnya saya sudah menjelaskan bagaimana cara membuat widget di pojok blog, kali ini saya ingin menjelaskan trik yang sebenarnya tidak jauh berbeda, yaitu bagaimana membuat widget melayang di blog. Hanya bedanya disini kita akan memanfaatkan element saja, tidak perlu mengubah template. Oiya, nantinya widget ini juga akan dilengkapi dengan tombol close 2x, jadi anda bisa memanfaatkan script ini untuk memasanga banner iklan.
OK! langsung aja
- Masuk akun blog anda
- Pilih Tata Letak - Tambah Gadget - HTML/Javascripts
- Lalu Copy pastekan kode berikut
<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 kamu disini</center> <script type="text/javascript"> var gb = document.getElementById("gb"); gb.style.center = (30-gb.offsetWidth).toString() + "px"; </script></div></div>
- Simpan dan lihat hasilnya
- perhatikan bagian yang dicetak biru. anda bisa mengubahnya sesuai dengan keinginan anda
Budayakan Untuk Meninggalkan Komentar Meskipun Hanya Satu Huruf
0 komentar:
Posting Komentar