Cara Membuat Navigasi Menu Melayang di Blogger

Cara Membuat Navigasi Menu Melayang di Blogger

NAVIGASI Menu melayang (floating menu, sticky menu, fixed menu) adalah navigasi menu blogger yang jika halaman discroll ke bawah menu tetap tampil atau muncul di bagaian teratas.

Untuk memasangnya di template blog DetikStyle lama (yang belum diupdate), lakukan langkah berikut ini.

Cara Membuat Navigasi Menu Melayang di Blogger

1. Di Dashboard Blogger: Klik Theme > Edit HTML
2. Cari dan GANTI KODE berikut ini

#menu1 {color:#fff;height:50px;margin-bottom:0;margin-bottom: 15px;border-bottom:5px solid #f0f0f0;}

DENGAN

#menu1 {color:#fff;height:50px;margin-bottom:0;margin-bottom: 15px;border-bottom:5px solid #f0f0f0;width:100%;max-width:1050px;}

3. Pasang (Copas) Kode Berikut ini di atas kode </body>

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

4. Save Template!

Kode untuk membuat Navigasi Menu Melayang di nomor 3 di atas juga bisa diterapkan di template blogger apa pun. Tinggal sesuaikan nama atau kode menunya yang bertanda merah.

Demikian Cara Membuat Navigasi Menu Melayang di Blogger. Good Luck! (CB Blogger).*

Related Posts: