Header dan Menu Navigasi Tetap Di atas

1. Membuat Sticky Menu Navigasi

- Login Blogger.com

- Pilih Temlate dan pilih Edit HTML

- Tekan CTRL-F kemudian ketik </head> dan letakkan kode berikut diatasya

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

Keterangan: Ganti kode yang berwarna merah dengan kode menu navigasi

2. Membuat Sticky Header Blog

- Login Blogger.com

- Pilih Temlate dan pilih Edit HTML

- Tekan CTRL-F kemudian ketik </head> dan letakkan kode berikut diatasya

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

Keterangan: Ganti kode yang berwarna merah dengan kode menu header

Contoh penerapan pada blogger saya 

Kode HTML

Contoh tampilan pada blogger saya

Share on Google Plus

About Unknown

This is a short description in the author block about the author. You edit it by entering text in the "Biographical Info" field in the user admin panel.