Cara Membuat Menu Melayang di Blog

Ciyonk - Setiap situs/blog pada umumnya memiliki menu. Untuk isi setiap menu berbeda-beda, tergantung keinginan pemilik blog ingin menampilkannya bagaimana.

Misalnya saja diambil dari jenis halaman, label, atau link lainnya baik masih dalam situs itu sendiri maupun menampilkan URL situs lain.

Menu merupakan alat navigasi untuk memudahkan pengunjung sekaligus memperkenalkan kepada mereka tentang topik apa saja yang dibahas dalam situs tersebut.

Supaya menu navigasi ini terlihat unik, salah satunya yaitu dengan menggunakan menu melayang ketika discroll, biasanya disebut sticky menu. Kalau Anda tertarik untuk menerapkannya pada situs Anda, ikuti saja caranya berikut ini:

1. Masuk ke dasbor Blogger.

2. Pilih Template lalu klik Edit HTML.

3. Cari kode </body> (Gunakan Crtl+F untuk memudahkan).

4. Copy-Paste kode berikut sebelum atau diatas kode </body>:

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

    stickyNav();
    $(window).scroll(function() {
        stickyNav();
    });
});
//]]>
</script>

5. Simpan Template dan lihat hasilnya.

Perlu diketahui bahwa setiap template memiliki kode yang berbeda-beda tergantung desainer templatenya. Khususnya disini elemen .nav, kalau dengan kode diatas belum berfungsi, maka Anda harus mengganti semua kode .nav diatas sesuai dengan nama elemen pada bagian menu situs Anda.

Baca juga: Cara Menghapus Widget Navbar Dengan Mudah