Cara membuat navigasi sticky untuk blogger

Navigasi sticky ini akan selalu tampil pada bagian atas halaman blog meskipun konten maupun homepage (beranda) halaman di scroll naik turun. Dan satu hal lagi ketika Judul ikut bersembunyi di bagian atas karena halaman di scroll (digulir) ke atas, navigasi menu bertahan pada batas tampilan paling atas.

Demo:

See the Pen NWbbJjL by Sufyan Yaan (@sufyan-yaan) on CodePen.

Cara penerapan:

Masuk ke pengaturan blogger (dasbor blogspot), masuk ke tataletak dan sembunyikan atau kalau tidak ada opsi sembunyikan hapus saja bagian widget header. seperti ini:

	Dari komputer Anda: Dari web. Tempelkan URL gambar di bawah. Penempatan Di balik judul dan keterangan Selain judul dan keterangan Tempatkan keterangan setelah gambar Susutkan agar sesuai Gambar akan disusutkan selebar 257 piksel.

Simpan Batal Hapus

Lalu sesudah melakukan langkah di atas masuk kembali ke pengaturan blogger, kali ini pilih menu tema, lalu pilih edit HTML.

1. Tambahkan CSS

Nah setelah masuk ke dalam halaman editor HTML blogger blogspot cari kode </head> letakan kode CSS berikut tepat diatasnya:

<style>body {

  margin: 0;

  font-size: 18px;

  font-family: Arial, Helvetica, sans-serif;

}

.header {

  background-color: #660033;

  padding: 10px;

  text-align: center;

}

#navbar {

  overflow: hidden;

  background-color: #660033;

}

#navbar a {

  float: left;

  display: block;

  color: #f2f2f2;

  text-align: center;

  padding: 14px 16px;

  text-decoration: none;

  font-size: 17px;

}

#navbar a:hover {

  background-color: #ddd;

  color: black;

}

#navbar a.active {

  background-color: #CC0000;

  color: white;

}

.content {

  padding: 16px;

}

.sticky {

  position: fixed;

  top: 0;

  width: 100%;

}

.sticky + .content {

  padding-top: 10px;

}</style>

2. Tambahkan HTML

Anda dapat merubah tanda pagar (#) dengan alamat URL konten konten dan nama menu yang di tulis merah setelah ini, namun menurut contoh di atas  letakan kode HTML berikut tepat di bawah kode </head>:

<div class="header">

  <h1><font size='9' color='white'>Judul Blog</font></h1>

  <p><font size='1' color='gold'>Blogging by smart.</font></p>

</div>

<div id="navbar">

  <a class="/">Beranda</a>

  <a href="#">Perihal</a>

  <a href="#">Blog</a>

</div>

3. Tambahkan Javascript

Masih di dalam halaman editor HTML blogger blogspot, cari kode </body> dan letakan kode berikut tepat di atasnya:

<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>

Jangan lupa SAVE tema.

Demikian caranya membuat menu navigasi blogger sticky. Cara ini adalah dasar, Anda dapat mengembangkannya sendiri misalnya dengan menambahkan fungsi scrolling menu yang mirip seperti kami gunakan pada template editblogtema ini. Anda juga dapat memodifikasi pengaturan CSS untuk menambahkan efek smooth pada scrollingnya.

Rajin rajin saja mempelajari dan mempeloti kode kodenya, dapat dilakukan tanpa guru kok. Insyaallah.

DEMO

Ikuti terus trik, tips, teknik hack dan kabar terupdate dari blog ini! Share: