Beranda Tips Membuat Sticky Navigasi Menu Pada Blog

Membuat Sticky Navigasi Menu Pada Blog

2

Pada kesempatan kali ini saya akan membagikan tips blogger yang akan membahas tentang Cara Membuat Sticky Navigasi Menu pada platform blogspot. Jadi, apasih sticky navigasi menu itu? Untuk yang belum tau, sticky navigasi menu adalah navigasi menu yang sudah di set sedemikian rupa agar letaknya tetap diatas meskipun user scroll kebawah halaman. Hal ini sangat penting selain untuk mempercantik tampilan website juga untuk mempermudah visitor menjelajahi blog kita. Untuk contohnya dapat kamu lihat pada blog ini.

Membuat Sticky Navigasi Menu Pada Blog 1

Lalu, bagaimana cara membuat sticky navigasi menu? Caranya cukup simple, kita hanya perlu menambahkan beberapa baris script pada template blog untuk membuat id navigasi tetap stay diatas.

Membuat Menu Sticky

Sebelum membuat sticky menu navigasi alangkah baiknya kita mengetahui code html dari menu navigasi itu sendiri. Caranya dengan buka Template ⇒ Edit HTML. Setelah terbuka tekan CTRL+F dan ketikkan <nav . Maka akan terlihat code html dari menu navigasi. Saya ambil contoh menu navigasi dari blog www.zea.my.id, memiliki code seperti ini.

Code HTML Menu Navigasi

Terlihat class dari menu navigasi adalah ‘topper’. Untuk tiap template memang berbeda codenya tetapi kurang lebih sama isinya. Yaitu terdapat class dari menu itu sendiri.

Memasang Code Sticky

Baik, setelah mengetahui kode class menu navigasi dari template kita masing-masing sekarang kita dapat beralih ke langkah selanjutnya. Yaitu menambahkan perintah sticky pada menu navigasi. Perlu diingat sebelum meng edit isi template pastikan kamu sudah melakukan backup terlebih dahulu.

Baca: Melakukan Back Up Template Blogspot

Untuk code html perintah sticky adalah seperti berikut. Copy dan letakkan code diatas </body>.

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

Kamu dapat mengganti yang saya tandai merah dengan code menu navigasi pada template mu. Setelah semuanya beres, klik simpan dan taraa.. Menu navigasi blogmu sudah sticky 😀

Itulah Cara Membuat Sticky Navigasi Menu pada Blog. Semoga bermanfaat dan selamat mencoba.