Cara Membuat Menu Navigasi Mengambang

Cara Membuat Menu Navigasi Mengambang - Menu navigasi adalah salah satu bagian terpenting yang digunakan pengunjung untuk menjelajahi Blog. Kebanyakan blogger memasang menu navigasi ini di bagian paling atas halaman. Sehingga ketika pengunjung membaca artikel dan menggulir halaman, menu navigasi tersebut tidak akan terlihat. Jika terdapat konten pada menu navigasi yang tidak ingin terlewatkan dari pandangan pengunjung, kamu bisa menggunakan menu navigasi yang posisinya mengambang. Jadi posisi menu navigasi akan terus berada di bagian paling atas halaman walau pun halaman digulir.

Jika kamu membutuhkan menu navigasi mengambang, maka kamu bisa langsung menggunakan template yang memang menggunakan menu navigasi mengambang. Namun jika kamu tidak ingin mengganti template karena alasan tertentu, dan pada template yang kamu pakai sekarang tidak terdapat sama sekali menu navigasi, maka kamu bisa memasang menu navigasi dengan cara Klik dini . Jika pada template kamu sudah terdapat menu navigasi namun posisinya tidak mengambang, kamu bisa membuatnya melayang dengan cara yang akan saya bahas kali ini.

Silakan ikuti tutorial untuk membuat menu navigasi di Blog kamu menjadi mengambang.

Menentukan selektor

• Pertama kamu harus mengetahui id elemen menu navigasi di Blog kamu. Pada dashboard Blogger masuk ke menu Template dan klik Edit HTML.
• Perhatikan salah satu menu/konten pada menu navigasi. Contohnya terdapat menu "blog". Dalam halaman HTML, carilah kata "blog" dengan (ctrl+f)

Kamu harus memahami script elemen ini dan id elemen menu navigasi akan kamu temukan. Pada contoh di bawah id elemen menu navigasi adalah "navi-arlina"

• Kemudian carilah kode CSS dari elemen menu navigasi dengan cara mencari kata "navi-arlina".
• Kamu harus memahami script maka kode CSS dari menu navigasi akan kamu temukan. Selektor dari menu CSS biasanya diawali dengan "." atau "#".

Maka selektor telah kamu temukan. Pada contoh di bawah ini selektornya adalah "navi-arlina"

Cara membuat menu navigasi di Blog menjadi melayang

• Pada dashboard Blogger silakan masuk ke menu Template dan klik Edit HTML.
• Dengan tombol ctrl+F silakan cari kode </body> kemudian letakan kode berikut di atas kode </body>

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

• Kemudian ganti kode #navi-arlina dengan dengan selektor yang telah kamu temukan di Blog kamu.
• Kemudian save template

Read More