CONTOH CARA MEMBUAT MENU NAVIGASI STICKY ALIAS FIX DIATAS HEADER | editblogtema editblogtema: CONTOH CARA MEMBUAT MENU NAVIGASI STICKY ALIAS FIX DIATAS HEADER

Logtema

×
tutorial dan teknik

CONTOH CARA MEMBUAT MENU NAVIGASI STICKY ALIAS FIX DIATAS HEADER

Serial tutorial khusus
sticky atau fix atau tetap diatas halaman blog

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

The EditblogTema: Scroll keatas dan kebawah

scroll untuk melihat efek.

Contoh Navigasi Sticky

Navbar akan lengket alias sticky begitu mencapai posisi sticky
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.
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.

<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 (share):

5 comments:

  1. Tes mengapa huruf komen disini gede? Pasti terpengaruh html dalam postingan

    ReplyDelete
    Replies
    1. Masuk 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.

      Delete

🌐请给我们一个礼貌的评论与任何相关的主题
⚘⚘Kami menghargai semua masukan
👫👫 Namun kami juga menjunjung tinggi kesopanan