Cara Menciptakan Sajian Header Menjadi Melayang Meskipun Di Scroll Kebawah

Menu Header yakni (Navigasion Menu) yaitu sajian yang biasa dibentuk para blogger untuk sajian ihwal kategori apa saja yang disediakan di blog itu sendiri. Menu Header ini sangat penting bagi pengunjung biar mereka dapat leluasa berselancar (Surfing) dan membaca blog kita lebih lama. Untuk Menu Header dikala pengunjung sedang membaca mereka membacakan otomatis membaca hingga kebawah, berarti pengunjung scroll down kan. Saya ingin sajian header tersebut juga ikut kebawah, kalau kalian ingin tau caranya bagaimana.

Singkat dongeng : Awalnya aku iri dengan blog yang aku kunjungi, dikala aku membaca konten yang berkualitas itu atau aku sedang blogwalking aku melihat Menu Header yang mereka pakai melayang, meskipun aku scroll kebawah untuk membaca artikel hingga habis dan kembali ketempatnya ibarat semula dengan posisi ibarat awalnya. Setalah aku meneliti alhasil aku tahu yang mereka gunakan "Sticky Position (Bar) With CSS Or JQuery". Kode tersebut aku ambil biar Menu Header yang aku gunakan tetap muncul meskipun di scroll kebawah. Cara membuatnya gampang banget, ikuti langkah-langkah berikut ini.

Baca Juga :

Screenshoot :

Perhatikan! Menu Header dikala aku Scroll kebawah.

yaitu sajian yang biasa dibentuk para blogger untuk sajian ihwal kategori apa saja yang dised Cara Membuat Menu Header Menjadi Melayang Meskipun di Scroll kebawah

Cara Membuat Menu Header Menjadi Melayang Meskipun di Scroll kebawah

Cara Pertama :

1. Buka Blogger - Kemudian login.
2. Dashboard - Template.
3. Edit HTML.

Proses Pembuatan :

1. Temukan <CTRL+F> kode </body>
2. Copy&paste aba-aba Java Script berikut ini, dan letakkan diatas kode </body>

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

3. Perhatikan ID CLASS pada goresan pena yang berwarna biru. Silakan ganti aba-aba tersebut dengan aba-aba Menu yang ada di Template anda. Biasanya .nav atau #nav atau #menu

4. Sehingga menjadi Seperti ini <Saya Menggunakan ID Class #menu>

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

5. Simpan Template!.

Cara Mencari ID Class pada Menu Header dengan Mudah

Jika anda kesulitan dalam mencari ID Class, aku akan kasih tau cara mencarinya dengan mudah. Anda cukup Inspect Elemen pada Menu Header lihat Souce kodenya pada bab bawah kanan.

Perhatikan gambar berikut ini.

Ternyata aku Inspect Elemen pada Menu Header Demo Bloggers, Blogger itu punya saya. Ternyata ID Class itu memakai #nav. Tinggal ganti aba-aba diatas yang bertuliskan warna merah dengan #nav. Praktis bukan?

Demikianlah Tutorial Blogger kali ini, kalau anda mengalami kesulitan? Jangan sungkan untuk berkomentar dibawah ini. Terakhir, silakan anda lihat home page anda dan jangan lupa Scroll kebawah. Sekian dari saya, Semoga Bermanfaat! Thanks for Reading, Sharing & Visited and Search : Cara Membuat Menu Header Menjadi Melayang Meskipun di Scroll kebawah.