Pasang Iklan Disini

Minggu, 22 Juni 2014

Cara Membuat Menu Navigasi Menjadi Sticky Widget

Assalamualaikum wr.wb
Setelah membahas cara untuk membuat sidebar menjadi sticky pada artikel yang kemarin maka sekarang akan saya lanjutkan saja dengan Cara Membuat Menu Navigasi Menjadi Sticky.
Untuk penjelasan sticky mungkin tidak usah saya ulang kembali, intinya saja sticky itu artinya melayang, jadinya widget melayang.

Menu Navigasi Sticky


Jika ingin mencobanya ikuti langkah berikut:
  • Pertama login dahulu ke akun blogger kalian
  • Klik Template
  • Klik Edit HTML
  • Lalu cari kode </body>
  • Kemudian simpan kode dibawah ini tepat diatas kode </body>

<script type='text/javascript'>
//<![CDATA[
$(document).ready(function() {
    // Menentukan elemen yang dijadikan sticky yaitu #NavbarMenu
    var stickyNavTop = $('#NavbarMenu').offset().top; 
    var stickyNav = function(){
        var scrollTop = $(window).scrollTop(); 
        // Kondisi jika discroll maka menu akan selalu diatas, dan sebaliknya       
        if (scrollTop > stickyNavTop) { 
            $('#NavbarMenu').css({ 'position': 'fixed', 'top':0, 'z-index':9999 });
        } else {
            $('#NavbarMenu').css({ 'position': 'relative' });
        }
    };
    // Jalankan fungsi
    stickyNav();
    $(window).scroll(function() {
        stickyNav();
    });
});
//]]>
</script>


Note: Ganti kode berwarna hijau dengan kode element pada menu navigasi di blog kalian.


  • Jika sudah maka klik Simpan
  • Semoga Berhasil!



Itulah Cara Membuat Menu Navigasi Menjadi Sticky Widget.
Jangan lupa untuk share artikel ini kepada teman-teman kalian ya.
Terimakasih.
Wassalamualaikum wr.wb

Ketikkan email kalian dibawah dan klik Berlangganan untuk dapat berlangganan artikel kami:

Delivered by FeedBurner

Please Give Us Your 1 Minute In Sharing This Post!
SOCIALIZE IT →
FOLLOW US →
SHARE IT →

 
notifikasi
close