Cara Membuat Menu Header Menjadi Melayang Meskipun di Scroll kebawah

Menu Header adalah (Navigasion Menu) yaitu menu yang biasa dibuat para blogger untuk menu tentang kategori apa saja yang disediakan di blog itu sendiri.  Menu Header ini sangat penting bagi pengunjung agar mereka bisa leluasa berselancar (Surfing) dan membaca blog kita lebih lama. Untuk Menu Header ketika pengunjung sedang membaca mereka membacakan otomatis membaca sampai kebawah, berarti pengunjung scroll down kan. Saya ingin menu header tersebut juga ikut kebawah, jika kalian penasaran caranya bagaimana.

Singkat cerita :  Awalnya saya iri dengan blog yang saya kunjungi, ketika saya membaca konten yang berkualitas itu atau saya sedang blogwalking saya melihat Menu Header yang mereka pakai melayang, meskipun saya scroll kebawah untuk membaca artikel sampai habis dan kembali ketempatnya seperti semula dengan posisi seperti awalnya. Setalah saya meneliti akhirnya saya tahu yang mereka gunakan "Sticky Position (Bar) With CSS Or JQuery". Kode tersebut saya ambil agar Menu Header yang saya gunakan tetap muncul meskipun di scroll kebawah. Cara membuatnya mudah banget, ikuti langkah-langkah berikut ini.

Baca Juga :

• Cara Membuat Top Menu Navigasi Plus Media Sosial Responsive
• Cara Membuat Menu Header Keren dan Responsive

Screenshoot : 

Perhatikan! Menu Header ketika saya 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 kode 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 tulisan yang berwarna biru. Silakan ganti kode tersebut dengan kode 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, saya akan kasih tau cara mencarinya dengan mudah. Anda cukup Inspect Elemen pada Menu Header lihat Souce kodenya pada bagian bawah kanan.

Perhatikan gambar berikut ini.

Ternyata saya Inspect Elemen pada Menu Header Demo Bloggers, Blogger itu punya saya. Ternyata ID Class itu menggunakan #nav. Tinggal ganti kode diatas yang bertuliskan warna merah dengan #nav. Mudah bukan?

Demikianlah Tutorial Blogger kali ini, jika 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.

Share this post

Related Post