Cara Membuat Menu Navigasi Menempel Diatas

selamat malam sobat kali ini saya bebagi tips trik blog , yaitu "Cara Membuat Menu Navigasi Menempel diatas"

Pengen Contohnya ?? ya liat aja blog ini, hehe

langsung aja ya sobat
1. Template > Edit HTML
2. Cari (CTRL+F) kode </body>
3. Copy kode berikut ini dan Paste di atas 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>

4. JANGAN LUPA! Sebelum klik "Save", Ganti elemen .nav dengan elemen/kode yang menjadi Navigasi Menu blog Anda. Di blog PB (simple theme ini), kodenya bernama #navbar, sehingga kodenya menjadi:

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

Tapi biasanya walaupun sudah berhasil terkadang menu akan nampak lonjong atau terlalu panjang gan, dikarenakan tema bawaan biasanya menggunakan format persen, jadi untuk beberapa tema lebar menunya perlu di ganti menjadi pixel, contohnya punya ane awalnya width:99%.  #navbar{font-weight:bold;background-color:#303030;width:99%;margin:0 auto;height:42px} jadi ane ubah angka 99% menjadi 1050px.
jadinya #navbar{font-weight:bold;background-color:#303030;width:1050px;margin:0 auto;height:42px}

Itu aja gan , semoga dapat membantu :)

Salam , Free For All
Regards, Mr.Potensial

Tweet