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
Masuk ke pengaturan blogger
Pilih Tema
Pilih opsi editHTML
Langkah pertama: Cari kode </head> lalu copy kode dibawah ini dan pastekan dibawah </head> .
<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. Jika ingin merubah background color, maka bisa diganti warna sesuai selera anda yang ditandai berwarna background color merah, #333.
/* 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;
}
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 templat dapat menerapkan ini, pada beberapa kasus khusus harus diformat terlebih dahulu. Apabila dan jika sticky dan search mengalami pembekuan, maka lakukan perbaikan dan tambahan kode, kunjungi artikel ini Cara-menghilangkan-efek-lengket
Komentar
Posting Komentar
SILAKAN KOMENTAR SESUAI TOPIK.....