Membuat Header dan Menu Navigasi Tidak Bergerak (Tetap Diatas)

Untuk tutorial blog kali ini saya akan share mengenai cara membuat header (logo header) dan menu navigasi jika di scroll mouse posisinya tidak bergerak dan masih tetap diatas (tidak tertutup artikel yang sedang dibukanya). Widget ini akan melayang di blog atau disebut juga dengan istilah sticky widget. Anda nantinya dapat memilih widget apa yang akan dibuat diam ditempat (pilih menu navigasi atau pilih header). Dengan membuat sticky menu dan sticky header ini akan membuat pengunjung lebih enak melihat menu navigasi tanpa harus menggunakan mouse untuk menscroll naik turun.

1. Membuat Sticky Menu Navigasi :
- Buka blog anda di blogger.com
- Pilih Template => Edit HTML
- Tekan Ctrl+F, cari kode </body> dan letakkan kode berikut diatasnya

<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 warna merah dengan kode menu navigasi di blog anda, misalnya #navigasi atau #nav

2. Membuat Sticky Header Blog :
- Buka blog anda di blogger.com
- Pilih Template => Edit HTML
- Tekan Ctrl+F, cari kode </body> dan letakkan kode berikut diatasnya

<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 warna merah dengan kode header anda misalnya .header atau .header-wrapper atau #header-wrapper

Demikianlah cara membuat sticky menu dan sticky header di blogspot, semoga bermanfaat.

tutorial blog

Terlintas

Membuat Header dan Menu Navigasi Tidak Bergerak (Tetap Diatas)

Related Posts

Entri Populer