Cara Paling Mudah Membuat Menu Navigasi Melayang Pada Blog

Menu Navigasi. apa yang di maksut menu navigasi itu? menu navigasi adalah sebuah menu yang biasanya diletaknya di bagian atas, biasanya para mastah blog, menu navigasi ini dibuat untuk menaruh url about, contact, privacy, disclaimer, ataupun url pada label dsb. menurut saya ini sangat penting bagi sebuah website atau blog, karena fungsinya agar pengunjung lebih mudah mencari yang dia inginkan, bila mana yang di cari pas kebetulan diletakkan pada menu navigasi tersebut, sebagai contoh mencari menu contact atau url pada label, kan kalau ada di menu navigasi tinggal klik saja, iya kan. apa lagi menu navigasinya melayang kan enak tuh pengunjung mencari menu tersebut agar bisa menjelajahi isi keseluruhan yang ada di blog kita. dan tak hanya itu gays fungsinya ? bahkan bila kita mengajukan program pengiklan google adsense ini syarat yang sangat penting, karena ya fungsinya itu tadi yang sudah saya sebutkan di atas. yang mengarahkan atau memudahkan pengunjung untuk menemukan konten yang dicari tersebut lebih cepat. jadi pihak google adsense pun pas waktu pertama kali mengunjugi blog kita, diapun terasa nyaman dengan blog tersebut ! lalu bagaimana untuk membuat menu navigasi agar terlihat menarik dan keren yang katanya diatas tadi bisa melayang gitu.? oke sebentar lagi saya akan membagikan kepada kalian semua, tapi perlu kalian tau dulu biar gak salah kaprah, maksutnya melayang itu adalah, bila halaman discroll kebawah oleh pengunjung, menu navigasi tersebut posisinya itu tetep dalam posisinya, agar pengunjung setelah membaca artikel selasai lalu mencari artikel yang lain tanpa perlu scroll naik ke bagian atas halaman blog lagi, gitu ! bukan melayang-melayang ke angkasa ya gays yang saya maksut tersebut. salah kalau yang melayang ke angkasa mah. oke lah dari pada kelamaan kita langsung menuju cara membuat menu navigasi melayang tersebut gays, kita lihat dibawah ini:

1. Kalian buka blogger.com

2. Setelah itu cari Tema atau Template lalu klik Edit HTML

3. Selanjutnya cari kode </head> , agar lebih mudah gunakan Ctrl + F untuk mempercepat pencarian

4. Lalu copas kode di bawah dan letakkan tepat diatas 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 itu kalian tidak perlu memasang lagi, jika ada perbedaan pada angka versi (1.7.2) abaikan saja karena hanya beda versi tapi dengan fungsinya tersebut sama.

5. Lalu sekarang cari kode </body>

6. Langkah selanjutnya kalian salin kode di bawah ini dan pasang tepat 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>

Penting:

Jangan lupa tulisan warna merah kalian ubah dengan ID-menu navigasi template pada blog kalian, biasanya ada pada kode  <nav id='id menu'>, tapi kode ini kalau kalian mengunakan template karya dari mas sugeng, jadi kalian cari kode yang seperti ini  <nav id='id menu'> dan sebagai contoh seperti ini.

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>

Dan bila menggunakan template yang lain bisa cari kode seperti ini.  <div id='id menu'> sebagai contoh seperti ini.

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>

7. Setelah semua sudah kalian ganti tinggal Simpan Tema / Template selesai.

Untuk melihat apakah sudah berhasil, kalian cek buka blog yang baru saja kalian pasangin menu navigasi tersebut, dan kalian geser ke bawah maupun ke atas, jika menu navigasi tetep pada posisinya, berarti kalian sudah berhasil membuat menu navigasi melayang di dalam blog. semoga membantu.. wassalamm..