cara membuat menu navigasi melayang

Menu navigasi adalah salah satu menu yang menurut saya sangat penting bagi sebuah blog atau website karena fungsinya, yaitu untuk memudahkan pengunjung dalam menjelajahi keseluruhan isi blog. Bahkan salah satu syarat dalam pengajuan Google Adsense adalah navigasi mudah yang dapat mengarahkan pengunjung untuk menemukan konten yang dicarinya dengan cepat. Lalu agar menu bisa lebih menarik lagi, saya akan memberikan tutorial tentang cara membuat menu navigasi melayang pada blogger sobat.

https://kendhou.blogspot.co.id/2018/02/cara-membuat-menu-navigasi-melayang.html
Pada gambar di atas adalah menu navigasi (tanda panah) yang dibuka pada gadget desktop dan mobile yang terlihat pada posisi sebelum discroll dan sesudah discroll.
Semua template custom baik yang berbayar maupun yang gratisan telah menggunakan menu navigasi di dalamnya. Hal ini tak lepas dari peranannya yang cukup penting seperti yang saya tuliskan pada kalimat pembuka diatas. Beberapa template custom masih menggunakan menu navigasi biasa, tapi sebagian lagi telah menggunakan menu navigasi yang melayang.

Apa itu menu navigasi melayang?
Yang dimaksud dengan melayang adalah menu yang akan tetap ada dan terlihat meskipun halaman blog discroll ke bawah oleh pengunjung. Tujuannya adalah agar pembaca lebih mudah ketika hendak mencari artikel yang lain setelah membaca sebuah artikel tanpa perlu scroll naik ke bagian atas halaman blog. Dan jika kita perhatikan, saat ini hampir semua website besar dan ternama telah menggunakan menu navigasi yang melayang. Saya sendiri akhirnya tertarik memasang setelah membaca artikel pada sebuah situs besar.
Berikut cara mudah membuat menu navigasi blogger melayang

1. Masuk ke halaman administrator blog sobat

2. Buka menu Template / Tema > Edit HTML

3. Cari kode </Head> , agar lebih mudah gunakan Ctrl + F untuk mempercepat pencarian

4.Copas kode berikut di atas kode </head>

<scriptsrc='//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js'type='text/javascript'/>

Tapi jika sudah ada kode Jquery seperti diatas maka sobat tidak perlu memasang lagi, jika ada perbedaan pada angka versi (1.7.2) abaikan saja karena hanya beda versi tapi dengan fungsi yang sama.

5. Sekarang cari kode </body> 

6. Salin kode di bawah ini dan pasang di atas kode </body>

<script type='text/javascript'>

      $(document).ready(function() {

        var stickyNavTop = $('#id menu').offset().top;

        var stickyNav = function(){

          var scrollTop = $(window).scrollTop();

          if (scrollTop > stickyNavTop) {

            $('#id menu').css({ 'position': 'fixed', 'top':0, 'z-index':9999 });

          } else {

            $('#id menu').css({ 'position': 'relative' });

          }

        };

        stickyNav();

        $(window).scroll(function() {

          stickyNav();

        });

      });

    </script>

Catatan :
Ubah teks yang berwarna merah dengan ID-menu navigasi template pada blog sobat, biasanya ada pada kode <div id='id menu'> , tapi dari pengalaman pribadi saya yang menggunakan template dari mas sugeng id-menu navigasi terdapat pada kode <nav id='id menu'>

Contohnya adalah sebagai berikut

Kode div id

<div id='id menu'>

  <nav id='menu'>

    <ul>

      <li><a href='#'>Menu1</a></li>

      <li><a href='#'>Menu2</a></li>

      <li><a href='#'>Menu3</a></li>

    </ul>

  </nav>

</div>

Template mas Sugeng

  <nav id='id menu'>

     <ul id='menu'> 

      <li><a href='#'>Menu1</a></li>

      <li><a href='#'>Menu2</a></li>

      <li><a href='#'>Menu3</a></li>

    </ul>

  </nav>

7. Jangan lupa untuk Simpan Tema / Template

Selesai sudah proses cara membuat menu navigasi melayang dan sobat bisa memeriksa tampilan blog sobat. Pencarian konten-konten yang lain pada blog menjadi semakin mudah tanpa perlu menggulir ulang ke bagian atas halaman, semoga pengunjung semakin bertambah dan betah untuk berlama-lama. Trik ini saya dapatkan setelah mempelajari tutorial dari blog bloggerkill dan sedikit modifikasi pada template mas Sugeng yang awalnya sempat bingung karena kode berbeda dengan yang ada pada artikel bloggerkill. Semoga bermanfaat dan...
Salam Pintar...

Berlangganan update artikel terbaru via email:

0 Response to "cara membuat menu navigasi melayang"

Post a Comment

Terima kasih atas kunjungannya...
Pertanyaan, pendapat,serta saran dan masukan dapat sobat tuliskan pada kolom komentar yang tersedia. Harap menggunakan bahasa yang baik dan sopan.
Mohon maaf, segala bentuk SPAM dan mengandung unsur SARA akan kami hapus.

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel