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

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

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

Macam-Macam Penghasilan Dari Dunia Blog

albabbarrosa – Perkembangnya dunia teknologi informasi membawa keberkahan kepada beberapa kalangan tertentu.…

Membuat Subdomain free Gratis Tanpa hosting Dengan Domain Utama

Halo sobat blogger Indonesia, sebelumnya saya ucapin dulu “Selamat Hari Blogger Nasional…

Ditolak Karena Low Value Content Adsense Begini Solusinya Mengatasinya

Cara Mengatasi Low Value Content Adsense – Minggu-minggu ini banyak sekali yang…