Membuat Dan Mengatur Letak atau Posisi Widget Melayang

Pada kesempatan ini saya akan menjelaskan bagaimana cara membuat widget melayang dan cara mengatur posisi widget melayang tersebut. Anda sudah tau widget buku tamu melayang ? Baca dulu biar anda tau, hehehehee disana menjelaskan bagaimana membuat buku tamu melayang, dan sekarang saya akan jelaskan untuk widget melayang dan cara mengatur posisinya.

Nahhh . . . Pertama sama jelaskan dulu bagaimana membuat widget melayang :  

• Pertama Masuk ke Edit HTML di Tata Letak, jangan lupa centang expand widget template, lalu cari code ]]></b:skin> kalau sudah ketemu copy dan paste code berikut tepat diatas code ]]></b:skin> tadi :

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

• Kalau sudah dipaste, silahkan anda Save Template, dan langsung menuju Elemen Laman dan Tambah widget, masukan code berikut :

<div id='melayang'>

Taruh code widget anda disini

</div>

• Kalau sudah dimasukan silahkan anda Save, dan lihat hasilnya.

Nahhh diatas tadi saya sudah menjelaskan bagai mana membuat widget melayang, sekarang saya akan menjelaskan bagaimana mengatur posisi widget melayang tersebut :

• Perhatikan code CSS berikut yang sudah anda copy di atas code ]]></b:skin> tadi:

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

Code yang akan anda gunakan untuk mengatur posisi widget melayang tersebut :

top:0px; left:0px; untuk posisi pojok kiri atas.top:0px; right:0px; untuk posisi pojok kanan atas.bottom:0px; left:0px; untuk posisi pojok bawah kiri.

bottom:0px; right:0px; untuk posisi pojok bawah kanan.

Posted in: HTML,Tutorial Blog,Widget