Oleh:
sofyan Ya-an
Serial tutorial khusus
The EditblogTema: Scroll keatas dan kebawah
scroll untuk melihat efek.Contoh Navigasi Sticky
Navbar akan lengket alias sticky begitu mencapai posisi stickySome text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.
Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.
Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.
Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.
Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.
Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.
Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.
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 </header> lalu copy kode dibawah ini dan pastekan diatas kode tadi.
<a href="#home">Home</a>
<a href="#news">News</a>
<a href="#contact">Contact</a>
</div>
/* 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>:
navbar.classList.add("sticky")
} else {
navbar.classList.remove("sticky");
}
}</script>
Catatan tidak semua templat dapat menerapkan ini, pada beberapa kasus khusus harus diformat terlebih dahulu.
5 komentar
Sip. tengs sharenya...
BalasHapussama sama bro
HapusTes mengapa huruf komen disini gede? Pasti terpengaruh html dalam postingan
BalasHapusMasuk ke opsi postingan pilih mode HTML, cari Ukraine font pada kode css, misalnya jika 28px robah menjadi 17px, atau 15px saja untuk font komentar pada postingan ini.
Hapusmujarab! Tengkiyu dear
HapusTinggalkan komentar: