CONTOH CARA MEMBUAT MENU NAVIGASI STICKY ALIAS FIX DIATAS HEADER

Posted By: sofyan Ya-an

Serial tutorial khusus

Mari kita coba sticky Menu Navigasi dibawah ini, dan membuktikan apakah kita dapat menerapkannya pada template blogger kita.
Perhatikan cara membuatnya:

Sebaiknya back up template anda terlebih dahulu untuk berjaga jaga

1. Masuk ke pengaturan blogger
2. Pilih Tema
3. Pilih opsi editHTML

Langkah pertama: Cari kode </header> lalu copy kode dibawah ini dan pastekan diatas kode tadi.

<div id="navbar">
<a href="#home">Home</a>
<a href="#news">News</a>
<a href="#contact">Contact</a>
</div>

Langkah kedua: Cari kode ]]></b:skin> lalu copy kode dibawah ini dan pastekan diatas kode tadi.

/* Style the navbar */
#navbar {
overflow: hidden;
background-color: #333;
}

/* Navbar links */
#navbar a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px;
text-decoration: none;
}

/* Page content */
.content {
padding: 16px;
}

.sticky {
position: fixed;
top: 0;
width: 100%;
}

.sticky + .content {
padding-top: 60px;
}

Langkah ketiga: Tambahkan kode JavaScript dibawah ini letakan diatas kode </body>:

<script>window.onscroll = function() {myFunction()};var navbar = document.getElementById("navbar");var sticky = navbar.offsetTop;function myFunction() { if (window.pageYOffset >= sticky) {
navbar.classList.add("sticky")
} else {
navbar.classList.remove("sticky");
}
}</script>

Save tema

Catatan tidak semua templat dapat menerapkan ini, pada beberapa kasus khusus harus diformat terlebih dahulu.

Serial tutorial khusus

Mari kita coba sticky Menu Navigasi dibawah ini, dan membuktikan apakah kita dapat menerapkannya pada template blogger kita.
Perhatikan cara membuatnya:

Sebaiknya back up template anda terlebih dahulu untuk berjaga jaga

1. Masuk ke pengaturan blogger
2. Pilih Tema
3. Pilih opsi editHTML

Langkah pertama: Cari kode </header> lalu copy kode dibawah ini dan pastekan diatas kode tadi.

<div id="navbar">
<a href="#home">Home</a>
<a href="#news">News</a>
<a href="#contact">Contact</a>
</div>

Langkah kedua: Cari kode ]]></b:skin> lalu copy kode dibawah ini dan pastekan diatas kode tadi.

/* Style the navbar */
#navbar {
overflow: hidden;
background-color: #333;
}

/* Navbar links */
#navbar a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px;
text-decoration: none;
}

/* Page content */
.content {
padding: 16px;
}

.sticky {
position: fixed;
top: 0;
width: 100%;
}

.sticky + .content {
padding-top: 60px;
}

Langkah ketiga: Tambahkan kode JavaScript dibawah ini letakan diatas kode </body>:

<script>window.onscroll = function() {myFunction()};var navbar = document.getElementById("navbar");var sticky = navbar.offsetTop;function myFunction() { if (window.pageYOffset >= sticky) {
navbar.classList.add("sticky")
} else {
navbar.classList.remove("sticky");
}
}</script>

Save tema

Catatan tidak semua templat dapat menerapkan ini, pada beberapa kasus khusus harus diformat terlebih dahulu.

Bagikan Artikel ini