Duit Blog Cara Menciptakan Sajian Navigasi Melayang Di Blog

Hai sobat! Selamat tiba kembali di blog kami. Kali ini saya akan memberikan Cara menciptakan sajian navigasi blog melayang. kenapa saya membagikan cara ini? Yah alasannya yaitu kini banyak situs terkenal akhir-akhir ini mulai menambahkan navigasi melayang di situsnya. Tujuan memasang Navigasi melayang adalah untuk membantu pengunjung lebih gampang menemukan jalan mereka di sekitar situs sobat. Artinya pembaca tidak perlu menggulir kembali ke bab atas halaman untuk menentukan halaman atau topik yang berbeda. Menu akan tetap muncul di bab atas blogger bahkan ketika teman menggulir ke bawah. Menu navigasi akan tetap berada pada posisi diatas/melayang ketika teman bermain dengan scroll kafe mouse sobat.

Cara Membuat Menu Navigasi Melayang Di Blog

Cara Membuat Menu Navigasi Blog Melayang

● Login Ke Blogger Sobat

● Masuk Ke Template

● Pilih Edit HTML

● Cari isyarat </head> paste isyarat jquery berikut sebelum/tepat diatas </head>

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

Source: Bakul Oreg

Catatan:
Cari dulu isyarat jquery di blog sobat. Jika blog teman sudah terpasang isyarat tersebut,  maka teman tidak perlu lagi memasang kede jquery diatas.

● Selanjutnya Cari isyarat </body>

● Copy isyarat berikut lalu paste sebelum/Tepat diatas isyarat </body>

    <script type='text/javascript'>

      $(document).ready(function() {

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

        var stickyNav = function(){

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

          if (scrollTop > stickyNavTop) {

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

          } else {

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

          }

        };

        stickyNav();

        $(window).scroll(function() {

          stickyNav();

        });

      });

    </script>

Source: Bakul Oreg

● Ubah Teks yang saya beri warna Merah dengan ID Navigasi blog sobat.

Contoh:

<div id='top-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>

Dengan adanya sajian navigasi melayang di blog sobat, pengunjung blog akan lebih gampang mencari hal-hal yang diinginkan. Pembaca tidak perlu kembali lagi ke halaman atas untuk mencari halaman atau topik yang menarik di blog sobat. Cukup sekian artikel kali ini. Semoga artikel ini bermanfaat untuk teman semua.