Tips Membuat Menu Navigasi Blog Agar Tetap Muncul atau Sticky Ketika Di Scroll Ke bawah

Hai sobat blogger, kali ini saya akan membagikan tutorial tentang cara Membuat Menu Navigasi Pada Blog Agar Tetap Muncul saat Pengunjung Blog kita melakukan scrool kebawah pada saat mereka membaca artikel kita. Jadi, menu navigasi kita akan selalu dilihat oleh pengunjung blog kita, sehingga dapat memudahkan mereka mencari tema artikel lainnya. Sebagai contohnya ada pada blog ini sendiri, sobat pasti bisa melihat kan menu navigasi blog ini akan ikut kebawah dan selalu tampil ketika sobat melakukan scroll kebawah. 

Contoh menu navigasi yang mengikuti artikel saat kita scroll artikel blognya kebawah 

Sobat hanya perlu menambahkan kode Javascript pada HTML template kalian, perlu diingat juga apabila sebelumnya sobat sudah pernah melakukan cara ini pada blog kalian (Semisal pada widget Popular Post, Artikel terbaru, dll) yang posisinya berada di sebelah kanan blog sobat, sebaiknya javascript widget tersebut di hapus dulu sob, kenapa kok harus dihapus? Sebab nanti akan membuat penampilan blog sobat berantakan, karena adanya dua kode javascript yang fungsinya sama. 

Sekarang langsung saja kita menuju "Template">"Edit HTML", kemudian cari kode "</body>" menggunakan "CTRL+F" untuk mempermudah pencarian. Setelah ketemu kode "</body>"nya, sobat tinggal Copy kode javascript dibawah ini lalu Paste kan diatas kode "</body>" tersebut:

<script type='text/javascript'>
//<![CDATA[
$(document).ready(function() {
    var stickyNavTop = $('#navi-arlina').offset().top;
    var stickyNav = function(){
        var scrollTop = $(window).scrollTop();
        if (scrollTop > stickyNavTop) {
            $('#navi-arlina').css({ 'position': 'fixed', 'top':0, 'z-index':9999 });
        } else {
            $('#navi-arlina').css({ 'position': 'relative' });
        }
    };
    stickyNav();
    $(window).scroll(function() {
        stickyNav();
    });
});
//]]>
</script>

Ingat, sebelum kalian "Save" template kalian, terlebih dahulu ubah dulu kode yang saya beri warna merah "#navi-arlina", sesuai dengan kode yang menjadi Menu Navigasi Blog sobat, untuk cara mencarinya, sobat tinggal manfaatkan jasa pencarian kode melalui "CTRL+F" pada HTML template sobat, lalu ketikkan "main navigation" > "Enter" maka akan muncul beberapa kode Menu Navigasi yang sama, sebagai contohnya lihat gambar dibawah ini:

Kode yang saya beri kotak merah adalah menu navigasi dari template mbak Arlina "Vikka Fast and Responsive Blogger Template", kode menu navigasi berbeda-beda pada setiap template. Jadi, sobat tinggal cari aja Main Navigation nya.

Jika sobat memakai template yang sama dengan yang saya pakai ini, sobat langsung saja Copy kode diatas dan langsung pastekan di HTML template sobat. Oke, mungkin itu saja dulu, jika ada masalah, ataupun pertanyaan, sobat bisa langsung isi komentar dibawah artikel ini. Selamat Mencoba ya sob. Semoga berhasil.

Update: Letakkan kode CSS di bawah ini diatas kode ]]></b:skin> untuk mengatur panjang menu navigasi pada saat melakukan scrool, sesuaikan sampai pas.

#navi-arlina{width:100%;max-width:960px}

#navi-arlina = Sesuaikan dengan ID "main navigation" dari template sobat
960 = Untuk menyesuaikan ukuran menu navigasi template sobat