TUTORIAL MUDAH MEMBUAT MENU NAVIGASI MENGAMBANG KETIKA DIGULIR

Situs ini tidak banyak kata pembukaan, langsung aja

Berikut tutorial singkat pada untuk membuat navigasi atau menu mengambang dan tetap terlihat dibagian atas blog saat menggulir ke bagian bawah

cara 1: setting Menu di Bagian Atas Konten 

Cara pertama dan termudah untuk melakukannya adalah dengan memposisikan menu navigasi kamu di bagian paling atas halaman dan membiarkannya tetap pada posisi tetap (mengambang) saat pengguna menggulir ke bawah. Menjaga menu di bagian paling atas lamanmu itu akan menghindari keharusan menambahkan sebuah JavaScript, jadi jika kamu merasa tidak nyaman dengan mengedit kode blog, maka ini adalah cara terbaik yang harus kamu coba! 

Pastikan kamu telah menambahkan widget "Halaman" Blogger ke salah satu area header di halaman Tata Letak anda. Kemudian, ikuti langkah-langkah di bawah ini:

1. Pergi ke Dashboard Blogspot lalu klik Theme/Template

2. lalu klik Customize / Sesuaikan halaman.
3. selanjutnya Pilih Advanced dari menu samping lalu ganti dengan Tambahkan CSS "add CSS"

4. Tambahkan kode CSS berikut ke kotak:

/* Blogger floating menu by jokkajo.com*/ #navbar {display:none} #PageList1 ul { position:fixed; top:0px; z-index:1000; background-color:#ffffff; width:100%; max-width:1100px; } .content-inner { margin-top:30px; }

5. Ubah variabel "lebar-maks" ke lebar keseluruhan area konten blog. Kamu bisa menemukan lebar blog dengan membuka menu "Theme Width" (Lebar Tema) pada menu advanced. Kemudian akan terlihat angkanya di area "Seluruh Blog". (untuk ini sesuaikan dengan Blog mu)

6. Variabel "margin-top" haruslah tinggi menu navigasi. Kamu dapat membiarkannya jika belum mengubah menu Halaman Blogger.

7. Kamu juga dapat mengubah variabel warna latar belakang menjadi kode warna hex sesuai pilihan kamu.

8. Jika sudah Simpan perubahan dan buka halaman Template> Edit HTML

9. Tepat sebelum </head> di kode, tempel kode berikut:

<script src='https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js'/> <!--Blogger Floating Menu by Jokkajo .com--> <script type='text/javascript'> //<![CDATA[ $(function() {         var nav = $('#PageList1 ul');     var navHomeY = nav.offset().top;     var isFixed = false;     var $w = $(window);     $w.scroll(function() {         var scrollTop = $w.scrollTop();         var shouldBeFixed = scrollTop > navHomeY;         if (shouldBeFixed && !isFixed) {             nav.css({                 position: 'fixed',                 top: 0,                    });             isFixed = true;         }         else if (!shouldBeFixed && isFixed)         {             nav.css({                 position: 'static'             });             isFixed = false;         }     }); }); //]]>   </script>

10. Simpan lali lihat situsmu
Catatan: Jika kamu memiliki masalah dengan menu yang tidak melakukan apa yang seharusnya, itu mungkin karena kamu memiliki skrip jQuery duplikat di kode blog kami. Coba hapus baris pertama kode (jQuery) dan simpan:

<script src='https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js'/>

Baca juga :