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  kode 

2. Copy&paste kode Java Script berikut ini, dan letakkan diatas kode 

<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 

<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 on Facebook

Share on Twitter

Share on Google+

Share on LinkedIn

Subscribe to receive free email updates: