Cara Membuat Menu Blog Melayang (Sticky)

Add Comment , ,

keliling selama ini pilih scrift buat sticky navbar, ane shared gan hasil keliling ane sama wkwkwkw
dan pasti sticky cocok untuk berbagai macam themplet
ok langsung kita gas...

Cara Menjadikan Menu Tetap Muncul Saat Discroll 

1. Tema > Edit HTML
2. Copas kode berikut ini di atas kode ditag menu sobat






<div id='sticky-menu'>

/* Tag Pembuka HTML Menu Blog Sobat */
<div id='menu-nav' class='menu'>
<ul>
<li><a href='/'>Home</a></li>
<li><a href='/menu1'>Menu1</a></li>
<li><a href='/menu2'>Menu2</a></li>
<li><a href='/menu3'>Menu3</a></li>
<li><a href='/menu4'>Menu4</a></li>
</ul>
</div>
/* Tag Penutup HTML Menu Blog Sobat */

</div>



Copas kode berikut ini di atas kode ]]>



#sticky-menu{
position:fixed;
top: 0;
left: 0;
width: 100%
}



Copas kode Javascript berikut ini di atas kode



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



selesai

pengen lebih jelas disini sumbernya

ARTIKEL TERKAIT:

Otodidak Belajar Web SEO
Trick Newbie SEO

0 Response to "Cara Membuat Menu Blog Melayang (Sticky) "

Posting Komentar

Langganan: Posting Komentar (Atom)

Artikel Terkini:

Trick Artikel Seo | Otodidak Seo
Cara Membuat Menu Blog Melayang (Sticky)
Cara Bikin Layout Grid yang Rapi Di Bloger
Belajar Seo Tahun 2019
Seo Tahun 2018
KODE WARNA