Cara membuat menu blog mengikuti saat di scroll ke bawah - bagaimana
cara agar menu pada blog mengikuti saat di scroll ke bawah? Membuat menu supaya mengikuti scroll
saat di turunkan kebawah merupakan salah satu design web agar memudahkan
pengunjung untuk melihat menu-menu yang
terdapat pada suatu blog atau website. Dengan langkah mudah
dari tutorialku18.ga ini akan memudah kan kamu untuk membuat menu di blo
mengikuti atau melayang saat scroll di putar ke bawah. Cara nya sangat mudah
sekali untuk kamu lakukan. Pada dasarnya menu navigasi pada blog digunakan
untuk mengetauhi menu yang terdapat atau yang disajikan di dalam sebuah situs
website. Yuk, langsung ajah cara
membuat menu di blog mengikuti saat di scroll atau
di turunkan kebawah pada bagian website atau blog.
 |
| Cara Agar Menu Blog Mengikuti Saat Di Scroll Ke Bawah |
Membuat Menu Sticky Pada Blog
1. Kamu masuk akun blogger kamu terlebih dahulu.
2. Untuk membuat
menu navigasi supaya mengikuti saat di scroll, klik template, pilih "edit html".
3. Lalu kamu cari
[ ctrl + f ] pada bagian </style> atau ]]></b:skin> .
4. Lalu kamu taruh
coding ini di atas coding </style> atau ]]></b:skin> :
.sticky {
position:fixed; top:50px;/
* jarak dari atas*/
z-index: 100;
}
position:fixed; top:50px;/
* jarak dari atas*/
z-index: 100;
}
5.
Lalu kamu taruh script di bawah ini, tepat di atas </body> :
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function() {
var stickyNavTop = $('.top-nav').offset().top;
var stickyNav = function(){
var scrollTop = $(window).scrollTop();
if (scrollTop > stickyNavTop) {
$('.top-nav').css({ 'position': 'fixed', 'top':0, 'z-index':9999 });
} else {
$('.top-nav').css({ 'position': 'relative' });
}
};
stickyNav();
$(window).scroll(function() {
stickyNav();
});
});
//]]>
</script>
//<![CDATA[
$(document).ready(function() {
var stickyNavTop = $('.top-nav').offset().top;
var stickyNav = function(){
var scrollTop = $(window).scrollTop();
if (scrollTop > stickyNavTop) {
$('.top-nav').css({ 'position': 'fixed', 'top':0, 'z-index':9999 });
} else {
$('.top-nav').css({ 'position': 'relative' });
}
};
stickyNav();
$(window).scroll(function() {
stickyNav();
});
});
//]]>
</script>
6.
Lalu kamu ganti .top-nav dengan id menu / nav kamu.
Baca Juga : Cara Mengetahui ID Menu / Nav Di Blog
Jika
berhasil kamu bisa sharing atau komen di bawah postingan ini. Sekian tentang
cara membuat menu
mengikuti saat di scroll ke bawah sekian artikel ini semoga artikel
ini dapat membantu sobat untuk dapat membuat sebuh menu mengikuti saat di
scroll ke bawah.
