Tips Tutorial Cara Menciptakan Sajian Melayang Ketika Di Scroll

Tutorial berikut ini yakni ihwal bagaimana menciptakan sajian navigasi tetap berada pada posisinya meskipun halaman digulir / di scroll, atau sering juga disebut sajian navigasi melayang dan dalam dunia blogging namanya sticky navigation.

Kenapa sajian harus dibentuk sticky? Alasan paling logis yakni biar pengunjung blog tidak perlu repot dalam mencari sajian blog meskipun sedang berada di dasar terbawah sebuah halaman blog, sehingga memudahkan pengunjung blog atau web untuk menjelajahi seluruh isi blog lewat sajian navigasi yang kita buat posisinya menjadi fixed menu atau tetap.

Untuk memulai tutorial ini, blog anda harus mempunyai fitur sajian yang nantinya akan di jadikan Sticky Menu Navigation. Jika belum punya anda sanggup ikuti salah satu tutorial berikut :

1. Cara Membuat Menu Navigasi Slide Samping di Blog 
2. CaraMembuat Top Menu plus Search Box di Blog.

Jika anda sudah mempunyai sajian blog yang akan di jadikan sticky navigation, silahkan ikuti tutorial cara menciptakan sajian melayang ketika di scroll berikut ini.

1. Masuk ke edit HTML kemudian copy arahan jquery di bawah, kemudian pastekan sempurna di atas arahan </head>

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

Ket : sebelum di copy paste sebaiknya anda periksa dulu apakah di dalam template anda sudah terdapat arahan jquery menyerupai di atas, kalau sudah ada lewati saja langkah pertama.

Tips: lewati saja dulu langkah pertama, kalau nanti balasannya sajian masih amblas ketika di scroll itu artinya template anda belum mempunyai arahan jquery di atas.

2. Copy arahan javascript di bawah ini, kemudian pastekan sempurna di atas arahan </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>
 

Ket : ganti arahan warna merah dengan id top menu milik anda.
Sekedar gambaran, pada umumnya sebuah sajian blog mempunyai bagan arahan HTML sebagai berikut :

<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>

[UPDATE]
Abaikan langkah di bawah ini. Langsung di simpan saja ok. Untuk keterangan, lihat komentar.
3. PENTING!!!
Sebelum di simpan sebaiknya anda klik Format template dulu, sesudah template terformat gres klik Simpan template.

Catatan :
Ketika penulis menguji artikel ini, sajian navigasi masih amblas ketika di scroll bila template di simpan dalam keadaan belum di FORMAT, sebaliknya sesudah template di simpan dalam keadaan terformat sajian navigasi menjadi melayang.

Sekian tutorial cara menciptakan sajian navigasi melayang di Blog / Web, semoga sanggup bermanfaat dan selamat mencoba, Salam Blogger.