Thursday, November 28, 2019

√ Cara Paling Gampang Menciptakan Sajian 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, alasannya kemanapun scroll digerakan sajian navigasi ini akan tetap berada paling atas. Bagaimana, anda ngiler kan ingin menciptakan sajian navigasi melayang ini.


Cara menciptakan sajian 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 arahan dibawah ini telah ada pada template anda, kalau belum silahkan pastekan sempurna diatas arahan </head>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js' type='text/j4vascript'/>

3. Selanjutnya pasang arahan berikut sempurna diatas arahan </body>
<script type='text/j4vascript'>
//<![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 arahan navigasi anda, di sini Kang AP memakai "nav"

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

4. Simpan template dan lihat hasilnya

Praktis sekali kan menciptakan sajian navigasi melayang pada blog ini! Semoga artikel ini dapat membantu dan bermanfaat. Terima kasih atas kunjungannya and happy blogging.


Sumber http://ap-thea.blogspot.com


EmoticonEmoticon