Cara Membuat Widget Melayang Pada Web Atau Blog


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.

IKLAN INI BUKAN BAGIAN DARI ARTIKEL

No comments: