Cara Membuat Menu dan Sub Melayang saat di geser kebawah (floating).

Mungkin Bagi orang yang biasa buka Facebook, tentu tak asing lagi dengan tampilan menu di header tetap melayng pada tempatnya saat scroll kebawah. Bagi sebagian orang membuat yang seperti ini mudah, tapi bagi yang masih belajar tentu menjadi tanda tanya. Bagaimana cara membuatnya?????...

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

Dari Pada kelamaan bagi yang pingin tampilan menu tetap melayang atau Sticky, tanpa harus merubah nama nama dalam menu maupun sub menu, berikut salah satu tutorialnya.

Cara Membuat Menu Navigasi Blog Tetap Muncul Saat Halaman Discroll

1. Login Blogger
1. Template > Edit HTML
2. Cari kode </body> atau untuk mudahnya tekan Ctr+F
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. PENTING..!!!!!!!!!!!!!
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>