Connect with us

Blogging

Script Membuat Menu Melayang di Blog Simpel

Avatar

Published

on

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
Continue Reading
Advertisement
4 Comments

4 Comments

  1. Avatar

    DesainKu M.Ry

    Desember 27, 2019 at 5:15 am

    Mau tanya, kalau buat menu blog di sebelah kanan gimana ya, maksudnya menunya vertikal gitu

  2. Avatar

    Albab

    Desember 27, 2019 at 9:24 am

    Oh mirip template igniel gitu ya. Oke deh besok saya buatin tutorialnya.

  3. Avatar

    Iqsan

    Juni 1, 2020 at 8:11 am

    kalau bikin Menu tampilan seperti albabbarrosa bagaimana??

    • Avatar

      albabbarrosa

      Juni 21, 2020 at 5:46 am

      kalau tampilan yang sekarang udah dari templatnya . . .

Leave a Reply

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

Trending