Struktur umum sebuah widget adalah seperti contoh di bawah ini :
<b:section class='promo1' id='promo1'
showaddelement='yes'>
<b:widget
id='HTML6' locked='false' title='Software' type='HTML'> ...
</b:widget>
</b:section>
Jadi defaultnya widget itu dibungkus oleh section. Pada
contoh di atas section-nya adalah <b:section class='promo1' id='promo1'
showaddelement='yes'> ......... </section>
Untuk tujuan tertentu, misalnya saja agar lebih kustomabel,
maka section itupun masih dibungkus lagi oleh div. Contohnya adalah :
<div id='promo'>
<b:section class='promo1' id='promo1'
showaddelement='yes'>
<b:widget
id='HTML6' locked='false' title='Software' type='HTML'> ...
</b:widget>
</b:section>
</div>
<div class='promo'>
<b:section class='promo1' id='promo1'
showaddelement='yes'>
<b:widget
id='HTML6' locked='false' title='Software' type='HTML'> ...
</b:widget>
</b:section>
</div>
Perbedaan antara div id dan div class adalah pada cara
menyusun css atau javascript-nya. Untuk id kita memakai tanda # sedangkan untuk
class kita memakai tanda .
Jadi bila kita ingin menyusun sebuah sintaks css atau
sintaks javascript untuk <div id='promo'> maka pembukaannya adalah #promo
Kemudian bila ingin menyusun untuk <div class='promo'>
maka pembukaannya adalah .promo
Lalu bagaimana bila kita hanya akan menggunakan format
default saja, yaitu cukup section, tanpa div? nah jika anda hanya menggunakan
section, maka tidak perlu lagi pusing-pusing memilih apakah mau menggunakan id
ataupun class. Pada section kedua-duanya telah tersedia. Terlihat jelas pada
contoh ini :
<b:section class='promo1' id='promo1'
showaddelement='yes'>
Membuat Widget Melayang
Pada contoh di atas, widget kita id-nya adalah HTML6, tetapi
agar ia melayang yang harus dijadikan patokan adalah section atau div yang
membungkusnya.
Kita bisa menggunakan javascript untuk membuat menu melayang
ini. Kodenya adalah :
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function() {
// Determine which
element that to be created sticky, is .nav
var stickyNavTop =
$('#promo').offset().top;
var stickyNav =
function(){
var scrollTop
= $(window).scrollTop();
// Conditions
when scrolling the navigation menu will always be on above, and vice versa
if (scrollTop
> stickyNavTop) {
$('#promo').css({ 'position': 'fixed', 'top':0, 'z-index':9999 });
} else {
$('#promo').css({ 'position': 'relative' });
}
};
// Execute
function
stickyNav();
$(window).scroll(function() {
stickyNav();
});
});
//]]>
</script>
Yang di-bold merah disesuaikan dengan nama section atau div
pada widget anda.
Di dalam satu div boleh ada beberapa section, dan di dalam
satu section boleh ada beberapa widget. Maka bila anda menginginkan satu widget
saja yang melayang, di dalam satu section atau satu div hanya boleh ada satu
widget, yaitu widget yang anda inginkan untuk melayang.
Demikianlah artikel dari Kontakmedia yang berjudul Cara Membuat Widget Melayang Pada Web Atau Blog, semoga bermanfaat. Dan terima kasih untuk Anda yang telah berkunjung ke blog ini.