Cara Mudah Membuat Sticky Menu/Navigasi Blog Tetap Muncul Saat di Scroll
Membuat menu navigasi blog agar tetap muncul walaupun discroll adalah salah satu hal yang baik untuk diterapkan pada setiap blog yang kita miliki , hal tersebut berguna untuk memudahkan pengunjung blog membuka menu pada saat telah mengscroll , karena pengunjung tidak lagi direpotkan untuk melakukan scroll kembali menuju atas .
Hal berikut biasa disebut sebagai Sticky menu , sangat friendly dengan tampilan template blog yang sudah kita terapkan , dan tidak perlu lagi untuk membuat menu navigasi baru , karena ini hanya akan membuat menu yang telah kita buat sebelumnya menjadi sticky atau tetap muncul walaupun telah discroll.
Cara untuk membuat Menu Navigasi blog tetap muncul walaupun telah discroll / Sticky Menu
1.Masuk terlebih dahulu pada halaman Dashboard Blogger anda
2.Kemudian pilih Menu Theme / Tema , Kemudian Edit HTML
3.Selanjutnya anda copy dan paste code dibawah ini tepat diatas kode ]]><b:skin>
4.Dan berikutnya copy dan pastekan juga code berikut tepat diatas kode </head>
5.Lalu letakan code berikut dibagian atas dan bawah code Menu Navigasi blog anda
7.Lalu Save template yang telah anda rubah tadi , kemudian silahkan cek blog anda , apakah sudah berhasil atau tidak
Nah .. demikianlah artikel tentang [TERBAIK] Cara Mudah Membuat Menu Navigasi Blog Tetap Muncul Saat di Scroll.
Semoga bermanfaat dan membantu ..
Terima kasih sudah berkunjung
Hal berikut biasa disebut sebagai Sticky menu , sangat friendly dengan tampilan template blog yang sudah kita terapkan , dan tidak perlu lagi untuk membuat menu navigasi baru , karena ini hanya akan membuat menu yang telah kita buat sebelumnya menjadi sticky atau tetap muncul walaupun telah discroll.
Cara untuk membuat Menu Navigasi blog tetap muncul walaupun telah discroll / Sticky Menu
1.Masuk terlebih dahulu pada halaman Dashboard Blogger anda
2.Kemudian pilih Menu Theme / Tema , Kemudian Edit HTML
3.Selanjutnya anda copy dan paste code dibawah ini tepat diatas kode ]]><b:skin>
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;}
4.Dan berikutnya copy dan pastekan juga code berikut tepat diatas kode </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>
5.Lalu letakan code berikut dibagian atas dan bawah code Menu Navigasi blog anda
<sticknav>Biasanya code Menu Navigasi diawali dengan <nav id= , <div id=
Kode HTML Navigasi Menu Anda di Sini
</sticknav>
6.Dan selanjutnya anda copy pastekan script berikut ini tepat diatas </body>
<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>
7.Lalu Save template yang telah anda rubah tadi , kemudian silahkan cek blog anda , apakah sudah berhasil atau tidak
Nah .. demikianlah artikel tentang [TERBAIK] Cara Mudah Membuat Menu Navigasi Blog Tetap Muncul Saat di Scroll.
Semoga bermanfaat dan membantu ..
Terima kasih sudah berkunjung