Home Blogger Tips Works Cara Membuat Navbar Tetap Diatas, Untuk Travel Blog Minimalis

Cara Membuat Navbar Tetap Diatas, Untuk Travel Blog Minimalis

Membuat Menu di Navbar Blog menjadi Sticky, melekat di bagian paling atas blog saat di scroll bar, posisinya diam membeku, tentunya banyak yang masih bingung bagaimana caranya?

Membuat Menu Navbar Blog Travel Menjadi Sticky

Langkah awalnya masuk ke Tema Blogger klik tombol sesuaikan scrol kanan gambar panah turun, pilih edit HTML, setelah masuk halaman HTML, ctrl. f ketik </Head> Enter.

Letakan script beriku CSS berikut tepat diatas <Head>

<style>
* {
 }

body {
  margin: 0;
}

.navbar {

position: fixed;
position: left;
z-index: 99;
width: 100%;

background-color: blue	;
font-family: Arial, Helvetica, sans-serif;
}

.navbar a {
  float: left;
  font-size: 16px;
  color: black;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

.dropdown {
  float: left;
  overflow: hidden;
}

.dropdown .dropbtn {
  font-size: 16px;  
  border: none;
  outline: none;
  color: black;
  padding: 14px 16px;
  background-color: inherit;
  font: inherit;
  margin: 0;
}

.navbar a:hover, .dropdown:hover .dropbtn {
  background-color: Blue;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  width: 100%;
  left: 0;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

.dropdown-content .header {
  background: Green;
  padding: 16px;
  color: white;
}

.dropdown:hover .dropdown-content {
  display: block;
}

/* Create three equal columns that floats next to each other */
.column {
  float: left;
  width: 33.33%;
  padding: 10px;
  background-color: #ccc;
  height: 250px;
}

.column a {
  float: none;
  color: black;
  padding: 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}

.column a:hover {
  background-color: #ddd;
}

/* Clear floats after the columns */
.row:after {
  content: "";
  display: table;
  clear: both;
}

/* Responsive layout - makes the three columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
  .column {
    width: 100%;
    height: auto;
  }
}
</style>

Setelah itu tambahkan script HTML tepad dibawah </Head> berikut:

Setelah semua script CSS dan HTM dimasukan, sekarang coba perhatikan bagian navbar blog yang sudah kita buat tadi, posisi navbar berada paling atas halaman blog dan menempel saat di scroll, jadi inilah cara mudah membuat navbar blog menjadi sticky ,yang perlu diperhatikan pada penulisan script CSS

.navbar {

position: fixed;

Script ini kita telah menambahakan fixed agar navbar posisinya tidak mengikuti halaman saat discroll. segitu dulu penjelasan mengenai cara membua navbar blog travel di Blogger dalam posisi diam.

Papa Hiu | Tips dan Cerita Perjalanan Seru

Cari Blog Ini

Cara Membuat Navbar Tetap Diatas, Untuk Travel Blog Minimalis

Membuat Menu di Navbar Blog menjadi Sticky, melekat di bagian paling atas blog saat di scroll bar, posisinya diam membeku, tentunya banyak yang masih bingung bagaimana caranya?

Comments

Post a Comment