Wednesday, August 11, 2010

Cara Membuat Floating Widget/Widget Melayang

agan udah tau floating widget ? belom ? waduh parah, nih yang kayak gini nih :

tuh yang gambar You Comment I Follow, terus widgetnya whos.amung.us terus button share fb sama retweet, itu floating widget, karena akan selalu mengikuti scroll kita dan tidak akan tertutup
cara bikinnya ? oke oke ane kasih tau.
Langkah pertama yang harusagan lakukan  Design kemudian masuk Edit HTML
lalu cari kode ini
]]></b:skin>
abis itu masukkin script ini diatasnya



#melayang {
position:fixed;_position:absolute;bottom:0px; left:0px;
clip:inherit;
_top:expression(document.documentElement.scrollTop+
document.documentElement.clientHeight-this.clientHeight); _left:expression(document.documentElement.scrollLeft+ document.documentElement.clientWidth - offsetWidth); }

perhatikan, disitu ada kode position:fixed;_position:absolute;bottom:0px; left:0px;
nah itu adalah kode posisi flatingnya dimana, yang bottom, bisa diganti dengan center atau top, dan yang left bisa diganti dengan right

abis itu cari kode ini
</body>

lalu masukkan kode dibawah ini persis diatas kode diatas
<div id="melayang">
<a href="ymsgr:sendIM?IdYmKamu"> <img src="http://opi.yahoo.com/online?u=IdYmKamu&amp;m=g&amp;t=1&amp;l=us"/>
</a>
</div>
perhatikan, disini saya ambil contoh floating widgetnya itu status online/offline yahoo messenger. nah yang ane tebelin itu kode widgetnya, mau diganti apa aja bisa. ada tulisan IdYmKamu, ya tinggal diganti ama id ym agan agan lah, kalo ane kan rock_cover_lover ya dimasukkinnya rock_cover_lover. ngerti ? jelas ? okeh klik save. diliat deh hasilnya. selamat mencoba

No comments:

Post a Comment