CONTOH CARA MEMBUAT MENU NAVIGASI STICKY ALIAS FIX DIATAS HEADER

AvatarPosted By:
Serial tutorial khusus
contoh cara membuat menu sticky

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
contoh cara membuat menu sticky

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.

6 Komentar untuk "CONTOH CARA MEMBUAT MENU NAVIGASI STICKY ALIAS FIX DIATAS HEADER"

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

    BalasHapus
    Balasan
    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.

      Hapus

Silahkan berkomentar sesuai dengan topik kita ya...

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel