Membuat Navigasi Menu Blog Tetap Muncul Saat Halaman Discroll ke Bawah

CARA Membuat Menjadikan Menu Navigasi Tetap Muncul.

Untuk melengkapi atau sebagai alternatif, CB share kembali arahan yang membuat menu blog Anda melayang, floating, sticky, atau tetap muncul ketika halaman discroll ke bawah.

Navigasi Menu Tetap Muncul Saat Halaman Discroll ke Bawah ini menjadi animo desain blogger kurun kini dan kurun depan. 

Sticky Menu ini ramah mengguna, user friendly, alasannya yaitu memudahkan pengguna untuk membuka link ke konten blog yang lain setelah tamat membaca sebuah postingan, tapi harus scroll lagi ke atas, meski sudah ada tombol Back to Top.

Catatan: kode-kode berikut ini bukan membuat navigasi menu baru, tapi hanya mengubah navigasi menu yang sudah ada menjadi tetap muncul.

Cara Membuat Navigasi Menu Tetap Muncul 

KODE CSS

1. Tema > Edit HTML 

2. Simpan arahan berikut ini di atas arahan ]]></b:skin>

Atau mampu juga dengan cara: Tema > Customise > Advanced > Add CSS > Copas arahan berikut ini:

sticknav {background: #ffffff;height: 30px;width: 100%;margin-right: 0px;margin-left: 0px;left: 0px;
right: 0px;position: relative;z-index: 9999;}
.fixed { position:fixed;}

Alternatif:

Simpan arahan berikut ini di atas arahan </head>

<style>
sticknav {background: #ffffff;height: 30px;width: 100%;margin-right: 0px;margin-left: 0px;left: 0px;
right: 0px;position: relative;z-index: 9999;}
.fixed { position:fixed;}
</style>

KODE HTML

"Bungkus" arahan navigasi menu blogger Anda dengan arahan ibarat di bawah ini:

<sticknav> 

Kode HTML Navigasi Menu Anda di Sini

</sticknav>

Kode navigasi menu biasanya diawali dengan kode <nav id=' dst sampai </nav> atau <div id=' dts.. sampai </div>

KODE JAVASCRIPT

Simpan di atas arahan </body>

</script>
<script type="text/javascript">
$(document).ready(function() {
    var aboveHeight = $('header').outerHeight();
$(window).scroll(function(){
        if ($(window).scrollTop() > aboveHeight){
        $('sticknav').addClass('fixed').css('top','0').next().css('padding-top','60px');
        } else {
       $('sticknav').removeClass('fixed').next().css('padding-top','0');
        }
    });
});
</script>

Pastikan di template Anda sudah ada link ke arahan jQuery.

Save Template!

Demikian Cara Membuat Navigasi Menu Tetap Muncul Saat Halaman Discroll ke Bawah.
Good Luck & Happy Blogging!

Berbagi :