Cara Membuat Navigasi Melayang Pada Blog

Tips dan Trik

Assalamualaikum.Wr.Wb

Apa kabar sobat sekalian?

Semoga dalam keadaan sehat wal afiat.

Baiklah kali ini saya akan memberitahukan kepada kalian. Bagaimana cara membuat navigasi melayang pada blog. Disini maksudnya adalah navigasi yang ada pada blog kalian, jika di scrollkan kebawah maka navigasi blog kalian akan tetap berada diatas seperti halnya dengan blog saya. Coba kalian scroll ke bawah halaman ini. Apa yang terjadi?? :D :D
Oke, langsung saja tidak perlu panjang lebar lagi ikuti langkah - langkah berikut :

Cara Membuat Navigasi Melayang Ketika Halaman Discroll Ke Bawah Pada Blog

1. Masuk kehalaman www.blogger.com
2. Pilih template > edit HTML
3. Tekan (CTRL+F) untuk mencari kode
4. lalu pastekan kode berikut diatasnya :

   <script type='text/javascript'>
   //<![CDATA[
   $(document).ready(function() {
       var stickyNavTop = $('.navigasi').offset().top;
       var stickyNav = function(){
           var scrollTop = $(window).scrollTop();
           if (scrollTop > stickyNavTop) {
               $('.navigasi').css({ 'position': 'fixed', 'top':0, 'z-index':9999 });
           } else {
               $('.navigasi').css({ 'position': 'relative' });
           }
       };
       stickyNav();
       $(window).scroll(function() {
           stickyNav();
       });
   });
   //]]>
   </script>
   

5. Setelah dipastekan. HARUS DIINGAT!!!. Tulisan .navigasi diganti dengan nama elemen navigasi yang ada pada blog kalian. Kalau yang dblog saya, nama elemennya #autonav. Jadi dibuat seperti ini :

   <script type='text/javascript'>//<![CDATA[
   $(document).ready(function() {
       var stickyNavTop = $('#autonav').offset().top;
       var stickyNav = function(){
           var scrollTop = $(window).scrollTop();
           if (scrollTop > stickyNavTop) {
               $('#autonav').css({ 'position': 'fixed', 'top':0, 'z-index':9999 });
           } else {
               $('#autonav').css({ 'position': 'relative' });
           }
       };
       stickyNav();
       $(window).scroll(function() {
           stickyNav();
       });
   });
   //]]>
   </script>
   

Itulah tadi Cara Membuat Navigasi Melayang Ketika Halaman Discroll Ke Bawah Pada Blog. Semoga bacaan ini dapat bermanfaat bagi kita semua.

Terima Kasih 

Wassalamualaikum. Wr.Wb

Bagikan

Jangan lewatkan

Cara Membuat Navigasi Melayang Pada Blog

4/ 5

Oleh Unknown

Unknown 15.29 Komentar