Trik dan tips kali ini akan mengulas tentang bagaimana Cara Membuat Menu Navigasi Tetap Terlihat Setelah Di Scroll ( MENU STICKY ). Karena akhir-akhir ini saya jarang menulis postingan dikarenakan saya sibuk edit template menu sticky ini.
Dan setelah saya menemukan cara membuat menu navigasi melayang dan berhasil saya terapkan pada template blog saya, saya pun puya keinginan untuk berbagi buat teman-teman blogger yang membutuhkan.
Jika anda pada saat ini sedang mencari cara membuat menu tetap dan Posisi Fixed setelah di scroll kebawah. maka anda berada di artikel yang tepat. Karena saya juga akan menjelaskan dengan jelas sesuai yang saya terapkan pada blog saya Trik Dan Tips Untukmu ini.
Sebenarnya caranya sangat simple sekali, hanya dengan menaruh kode JS kedalam template langsung jadi. Akan tetapi sebagian hasilnya tidak sesuai dengan keinginan kita. Sebenarnya juga banyak sekali template yang sudah menyediakan fitur Menu Sticky, akan tetapi buat kalian yang sudah nyaman dengan template yang sudah terpasang dan ingin mengubahnya sendiri Membuat Menu Sticky tentu juga lebih kreatif bukan..?
Baca juga Trik Agar Menang Domino Qiu Qiu Online Dengan Membaca Kartu Lawan
Baca juga Membuuat Artikel Blog Seo Dan Muncul Di Google Terbaru
Baiklah saya rasa tidak perlu panjang lebar Postingan tentang Cara Membuat Menu Navigasi Tetap Terlihat Setelah Di Scroll, kita langsung ke pada intinya saja.
Cara Membuat Menu Navigasi Tetap Terlihat Setelah Di Scroll ( MENU STICKY )
>> Langkah pertama silahkan login dulu ke akun blogger.
>> Selanjutnya Menuju ke Template dan Edit HTML
>> Silahkan Copy dulu kode di bawah ini.
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function() {
// Menentukan elemen yang dijadikan sticky
var stickyNavTop = $('.nav').offset().top;
var stickyNav = function(){
var scrollTop = $(window).scrollTop();
// Kondisi jika discroll maka menu akan selalu diatas, dan sebaliknya
if (scrollTop > stickyNavTop) {
$('.nav').css({ 'position': 'fixed', 'top':0, 'z-index':9999 });
} else {
$('.nav').css({ 'position': 'relative' });
}
};
// Jalankan fungsi
stickyNav();
$(window).scroll(function() {
stickyNav();
});
});
//]]>
</script>>> Setelah anda copy kode di atas kemudian cari code </body> untuk lebih mudahnya Gunakan Ctrl+f .
>> Paste kan code di Atas tepat di atas code </body>
>> Selenjutnya klik save template dan selesai.
Keterangan:
Pada code di atas ada code yang berwarna kuning yaitu kode .nav tersebut silahkan ganti dengan Nama ID navigasi template anda. Misalnya pada template anda ID-nya <div id='menu-nav'> . Maka tag .nav yang berwarna kuni diatas silahkan diganti dengan .menu-nav .
Baca juga Cara Menghilangkan Noda Tinta Di Baju
Baca juga Cara Menyayangi Mertua Dan Keluarga
Setelah anda terapkan cara di atas sekarang lihatlah hasilnya, caranya cukup mudah kan.
Saya rasa cukup sampai disini saja postingan saya mengenai seputar Cara Membuat Menu Navigasi Tetap Terlihat Setelah Di Scroll ( MENU STICKY ) . Jika ada yang belum jelas silahkan bertanaya. insyaalloh saya jawab.