membuat menu navigasi sidebar

Halo sobat blogger semua, kali ini albabbarrosa akan memberikan tutorial membuat menu melayang di blog yang paling simpel. Menu navigasi memang menjadi komponen wajib yang harus ada di blog ya. Gunanya untuk mempermudah pengunjung mengakses konten apa saja yang ada di blog kamu.

Bahkan google pun menyarankan agar setiap blog memiliki menu navigasi yang tidak ribet. jika kamu punya sebuah blog yang tidak ada menu navigasinya, atau ada menu navigasi tapi sangat ribet, ketika kamu mendaftarkan ke google adsense kemungkinan besar blog kamu akan ditolak adsense, ga percaya? coba aja sendiri.

Mempercantik menu navigasi juga sangat disarankan lho, karena pengunjung akan tertarik untuk membuka menu tersebut, jadi kamu punya peluang lebih banyak agar pengunjung tidak stay di satu artikel saja. salah satu cara mempercantik tampilannya adalah dengan mengedit gaya dari menu tersebut.

Nah, yang lagi trending di tahun 2019 adalah menu navigasi yang melayang atau sticky nav, sebenarnya bukan menunya saya yang melayang tetapi juga header blognya melayang. ada banyak cara untuk membuat sticky nav, dan berikut albabbarrosa kasih beberapa cara dan style membuat menu melayang.

Menambahkan Javascript Sticky Nav

Hampir semua template blog pasti memliki header dan menu navigasi ya, namun tidak semuanya memiliki hedaer dan menu navigasi yang melayang, mungkin karena developernya kurang suka dengan hal tersebut.

Tapi kamu tak perlu kawatir, kamu masih bisa mengikuti trend menu melayang hanya dengan menambahkna javascript saja. pemasangan kodenya pun sangat simpel sekali tinggal kopi paste saja.

Pertama, cari terlebih dahulu kode hedaer menu kamu di pengaturan > edit html. Caranya cukup simpel, cari salah satu menu yang ada di menu navigasi. Contoh menu : documentation, cari tulisan tersebut maka hasilnya seperti dibawah.

Setiap template mempunyai kode header menu yang berbeda-beda. ada yang dituliskan ; nav-menu, head-menu, menu, menu nav.

Kode yang saya block dengan warna kuning itulah kode header menu blog saya.
Selanjutnya, pastekan kode dibawah, tepat di atas </body>.  dan ganti kode yang saya block warna merah dengan kode menu header kamu. Jangan lupa tambahkan titik atau pagar diawal kode, sesuaikan dengan kode yang ada di css contoh : (.header-menu) atau (#header-menu)
$(‘.header-menu‘)
<!-- Sticky Nav -->
<script type='text/javascript'>
      $(document).ready(function() {
        var stickyNavTop = $('.header-menu').offset().top;
        var stickyNav = function(){
          var scrollTop = $(window).scrollTop();
          if (scrollTop > stickyNavTop) {
            $('.header-menu').css({ 'position': 'fixed', 'top':0, 'z-index':9999 });
          } else {
            $('.header-menu').css({ 'position': 'relative' });
          }
        };
        stickyNav();
        $(window).scroll(function() {
          stickyNav();
        });
      });
    </script>
 <!-- End Sticky Nav -->
Save, dan coba lihat hasilnya. kalau sudah melayang berarti kamu tamvan… DEMO
7 comments
Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *

You May Also Like

3 Cara Membuat Daftar Isi Atau Table of Content di Blogspot

Cara Membuat Daftar Isi / Table Of Content – Albabbarrosa.com  SEO Off…

Tips Menulis Artikel di Blog Sampai 500 Kata, 800 Kata Bahkan Lebih

albabbarrosa – Selain tampilan blog yang menarik dan elegan, sebuah blog dikatakan…

Syarat Minimal Blog Agar Diterima Adsense

Artikel tentang adsense memang tak pernah lepas dari pembahasan tips blogging dan…

Saran Template Untuk Blog Toko Online Responsive

Akhir akhir ini banyak blogger ataupun marketing online yang mencoba menjual produknya…