Tutorial membuat Navigation Bar responsif pada blogger

Navigation Bar Sederhana pada Blogger

Navigation bar tidak hanya membuat blog ataupun website terlihat lebih terorganisir, tetapi juga membuat blog terlihat profesional sehingga keberadaan fitur ini menjadi penting. Meskipun begitu, bagi orang yang awam terhadap HTML serta bahasa pemograman lain, pastinya akan sedikit kebingungan. Silahkan ditonton pada video berikut

Sebenarnya, ada berbagai macam cara untuk membuat navigation bar pada blog. Terdapat juga beberapa aplikasi online yang menyediakan fitur seperti ini. Namun, menunurut saya, ini adalah cara yang paling sederhana karena kita hanya perlu untuk memanfaatkan fitur widget ditambah dengan kode sederhana HTML.

Berikut adalah kode HTML untuk membuat Navigation bar sederhana pada blogger

<style>


/* Style dari bar navigasi atas*/
.navbar {
display: flex;
background-color: #333;
font-size: 24px;
}

/* Style dari link di navigasi*/
.navbar a {
color: white;
padding: 15px 21px;
text-decoration: none;
text-align: center;
background-color: #00b894;
}

/* perubahas warna saat dilintasi mouse */
.navbar a:hover {
background-color: #ddd;
color: black;
}

/* Responsive layout - saat layar lebih kecil dari 600px, style mengikuti bagian ini */
@media (max-width: 600px) {
.row, .navbar {
background-color: #fff;
font-size: 0px;
padding: 0px 0px;
display: none;
}
}


</style>


<!-- Navigation Bar -->
<div class="navbar">
<a class="active" href="link">Nama tombol 1</a>
<a href="link">Nama tombol 2</a>
<a href="link">Nama tombol 3</a>
<a href="link">Nama tombol 4</a>
</div>