Membuat Navigasi Menu Blog Tetap Muncul Saat Halaman Discroll ke Bawah

CARA Membuat Navigasi Menu ^[1] Tetap Muncul Saat Halaman Discroll ke Bawah (Sticky Navigation Bar) sudah pernah CB share di posting sebelumnya: Menjadikan Menu Navigasi Tetap Muncul ^[2].

Untuk melengkapi atau sebagai alternatif , CB share kembali isyarat 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 musim desain blogger periode kini dan periode depan.

Sticky Menu ini ramah mengguna , user friendly , sebab memudahkan pengguna untuk membuka link ke konten blog yang lain setelah final membaca sebuah postingan , tapi harus scroll lagi ke atas , meski sudah ada tombol Back to Top ^[3].

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 isyarat berikut ini di atas isyarat ]]></b:skin>

Atau mampu juga dengan cara: Tema > Customise > Advanced > Add CSS > Copas isyarat 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 isyarat berikut ini di atas isyarat </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" isyarat navigasi menu blogger Anda dengan isyarat mirip 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 isyarat </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 isyarat jQuery ^[4].

Save Template!

Demikian Cara Membuat Navigasi Menu Tetap Muncul Saat Halaman Discroll ke Bawah. Good Luck & Happy Blogging! (www.contohblog.com).*

Labels: Desain Blog ^[5]

Membuat Navigasi Menu Blog Tetap Muncul Saat Halaman Discroll ke Bawah

Cara Membuat Navigasi Menu Tetap Muncul

References