Cara Membuat Menu Navigasi blog Melayang

Tutorial Bangsat - Pada Kesempatan kali ini Tutorial Bangsat akan berbagi tentang cara membuat Menu Navigasi blog tetap muncul (melayang) di bagian atas, saat halaman blog discroll ke bawah. 

Menu Navigasi (Navigation Menu) yaitu menu blog yang biasa ada di deretan Home, About, Disclaimer, Privacy, dan seterusnya. Menu navigasi sangat penting bagi pengunjung agar bisa dengan mudah "berselancar" (surf) dan "baca-baca" (browse) blog kita lebih lama.

Tutorial Bangsat hanya ambil kodenya saja agar Menu Navigasi Blog Tetap Muncul Saat Halaman Discroll. Cara membuatnya mudah banget.

Cara Membuat Menu Navigasi Blog Tetap Muncul Saat Halaman Discroll

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 CB (New Johny Wuss), kodenya bernama #menu, sehingga kodenya menjadi:

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

Anda pengguna template New Johny Wuss, yang ingin Membuat Menu Navigasi Blog Tetap Muncul Saat Halaman Discroll, tinggal COPAS saja kode yang digunakan CB di atas. Tapi jangan lupa, ubah angka 99% di bagian #menu{background:#343434;width:99%;margin:0 5px 0 5px;color menjadi 950px.

Semoga bermanfaat dan salam blogger. . .

Terima Kasih telah membaca artikel tentang Cara Membuat Menu Navigasi blog Melayang . Silahkan baca artikel lainnya di daftar isi.

• Tweet
• Share
• Share
• Share
• Share

Unknown

Judul : Cara Membuat Menu Navigasi blog Melayang .
Ditulis oleh : Unknown .
Pada hari : Friday, 22 August 2014 .
Rating Blog : 5 dari 5

Follow me on: Facebook | Twitter | Google+

×

Related Post