Cara Membuat Navigasi Menu Melayang Sticky Fixed

Navigasi menu melayang menjadi gaya modern style bagi pengguna blog saat ini. Trend yang booming karena memiliki fungsi yang simpel sebagai pintasan sebuah link seperti menu, judul blog atau pencarian.

Caranya sangat mudah sekali dan terbukti secara nyata karen admin juga sudah membuktikannya sendiri. Admin pun belajar dari salah seorang desainer website yang cukup punya nama di dunia blog. Namanya kalau tidak salah yaitu rhinokage rio, pemilik situ penyedia template untuk para blogger. Soal keahliannya sudah tidak diragukan lagi.

Untuk membuat navigasi melayang saat discrol ke bawah atau ke atas dengan cara memakai kode sticky yang disisipkan ke dalam body template kita masing masing.

>>Silahkan buka dasbor blogger sobat
>>Kemudian pilih tema atau template,
>>Selanjutnya cari kode </body>
>>Dan sisipkan kode berikut ini di atas kode </body>.

<script type='text/javascript'> //<![CDATA[ $(document).ready(function() { // Menentukan elemen yang dijadikan sticky yaitu #header-wrapper var stickyNavTop = $('#header-wrapper').offset().top; var stickyNav = function(){ var scrollTop = $(window).scrollTop(); // Kondisi jika discroll maka menu akan selalu diatas, dan sebaliknya if (scrollTop > stickyNavTop) { $('#header-wrapper').css({ 'position': 'fixed', 'top':0, 'z-index':9999 }); } else { $('#header-wrapper').css({ 'position': 'absolute', 'top':-9999, 'left':-9999 }); } }; // Jalankan fungsi stickyNav(); $(window).scroll(function() { stickyNav(); }); }); //]]> </script>

keterangan:
Silahkan sobat ganti #header-wrapper sesuai pola dari blog sobat masing masing yang tertulis pada tag body yang ingin dibuat melayang.

>>Selanjutnya cari kode </head>
>>Dan sisipkan kode berikut diatasnya

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

>>Klik simpan atau save >>

Selesai

Semoga informasi tutorial ini bisa bermanfaat, sekian dari admin dan terimakasih sebelumnya karena sudah mengunjungi kkhtop, wassalam.