Cara Paling Mudah Membuat Menu Navigasi Melayang Pada Blog

Menu Navigasi Melayang atau bahasa kerennya floating mungkin pernah anda lihat pada beberapa blog yang pernah dikunjungi. Menu navigasi ini terlihat keren, karena kemanapun scroll digerakan menu navigasi ini akan tetap berada paling atas. Bagaimana, anda ngiler kan ingin membuat menu navigasi melayang ini.

Cara membuat menu navigasi melayang pada blog ini cukup mudah, berikut Kang AP berikan trik cara membuatnya. Mangga disimak langkah-langkahnya.

1. Setelah login ke Blogger, anda pilih Template » Edit HTML

2. Pastikan kode dibawah ini telah ada pada template anda, jika belum silahkan pastekan tepat diatas kode </head>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js' type='text/javascript'/>

3. Selanjutnya pasang kode berikut tepat 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>

■ Note.
Kode yang berwarna biru sesuaikan dengan kode navigasi anda, di sini Kang AP menggunakan "nav"

Baca juga :
» Cara Mudah Membuat Tombol Share Melayang Di Kiri Blog
» Cara Mudah Memasang Back To Top Pada Blog
» Cara Membuat Banner Iklan Melayang Dibawah Blog

4. Simpan template dan lihat hasilnya

Mudah sekali kan membuat menu navigasi melayang pada blog ini! Semoga artikel ini bisa membantu dan bermanfaat. Terima kasih atas kunjungannya and happy blogging.

Please Share » » Facebook Google+ Twitter