Menu Navigasi Menjadi Melayang Ketika Discroll

Mengubah Menu Navigasi Menjadi Melayang Ketika Discroll
1. Login ke akun Blogger sobat.
2. Masuk ke bagian Temaplate dan klik Edit HTML.
3. Dengan tombol ctrl + F, cari kode </body> dan letakan kode berikut di atas 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>

4. Ubah kode #NavbarMenu dengan kode elemen menu navigasi pada Blog sobat.
5. Klik Simpan Template.

Sebenarnya sampai di sini langkah-langkah untuk membuatnya telah selesai. Namun saya yakin bagi pemula pasti akan merasa bingung dalam mengganti kode #NavbarMenu. Mungkin dia belum mengetahui kode elemen menu navigasi pada Blog-nya. Maka saya akan mengembangkan lagi pembahasan ini.

Cara Mengetahui Kode Elemen Menu Navigasi

1. Perhatikan menu navigasi pada Blog sobat. Contoh:

Salah satu menu di dalamnya adalah "Daftar Isi"

2. Masuk ke Blogger >> Template >> Edit HTML.
3. Cari kata "Daftar Isi" dan temukan script-script yang mirip seperti berikut.

4. Cari id atau class yang terdapat di paling atas pada kode html. Maka itulah kode elemen pada menu navigasi Blog sobat.

Maka selanjutnya pada script yang saya berikan sobat ganti kode #NavbarMenu dengan kode elemen menu navigasi  yang telah sobat ketahui.