Home
Artikel
blogger

Cara Membuat Menu Navigasi Keren di Blogger


Berikut panduan lengkap dan mudah dipahami untuk membuat menu navigasi keren di Blogger, lengkap dengan contoh kode HTML + CSS, supaya blog kamu terlihat profesional dan SEO friendly 👇

Cara Membuat Menu Navigasi Keren di Blogger

Menu navigasi (navigation bar) berfungsi untuk membantu pengunjung menemukan halaman penting di blog kamu — seperti Home, About, Contact, Privacy Policy, dan kategori artikel.

1. Masuk ke Dashboard Blogger

  1. Login ke Blogger.com.

  2. Pilih blog yang ingin kamu edit.

  3. Klik Tata Letak (Layout).

  4. Cari bagian Header atau Menu Bar (biasanya di bawah header).

  5. Klik Tambahkan Gadget → HTML/JavaScript.

2. Masukkan Kode HTML Menu Navigasi

Salin kode di bawah ini ke kolom HTML/JavaScript.

<!-- Navigasi Keren Blogger -->
<nav class="menu-nav">
  <ul>
    <li><a href="/">🏠 Home</a></li>
    <li><a href="/p/tentang.html">Tentang</a></li>
    <li><a href="/p/kontak.html">Kontak</a></li>
    <li><a href="/p/privacy-policy.html">Privacy</a></li>
    <li class="dropdown">
      <a href="#">Kategori ▾</a>
      <ul class="submenu">
        <li><a href="/search/label/Teknologi">Teknologi</a></li>
        <li><a href="/search/label/Tips%20Blogging">Tips Blogging</a></li>
        <li><a href="/search/label/AdSense">AdSense</a></li>
      </ul>
    </li>
  </ul>
</nav>

3. Tambahkan CSS Agar Tampilan Lebih Keren

Letakkan kode CSS ini di:

Tema → Edit HTML → sebelum tag </head>

/* Gaya Menu Navigasi */
.menu-nav {
  background: linear-gradient(90deg, #007bff, #00c6ff);
  box-shadow: 0 2px 6px rgba(0,0,0,0.2);
  font-family: 'Poppins', sans-serif;
  text-align: center;
}

.menu-nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.menu-nav ul li {
  display: inline-block;
  position: relative;
}

.menu-nav ul li a {
  display: block;
  padding: 14px 22px;
  color: white;
  text-decoration: none;
  font-weight: 600;
  transition: 0.3s;
}

.menu-nav ul li a:hover {
  background: rgba(255,255,255,0.2);
  border-radius: 6px;
}

/* Dropdown Menu */
.menu-nav ul li ul.submenu {
  display: none;
  position: absolute;
  background: white;
  padding: 0;
  margin: 0;
  list-style: none;
  border-radius: 6px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}

.menu-nav ul li:hover ul.submenu {
  display: block;
}

.menu-nav ul li ul.submenu li {
  display: block;
}

.menu-nav ul li ul.submenu li a {
  color: #333;
  padding: 10px 20px;
  text-align: left;
}

.menu-nav ul li ul.submenu li a:hover {
  background: #007bff;
  color: white;
}

Sesuaikan dengan Blog Kamu

  • Ganti link /p/tentang.html, /search/label/... dengan URL halaman kamu sendiri.

  • Ubah warna gradasi (#007bff dan #00c6ff) sesuai tema blog.

  • Kamu bisa menambahkan ikon dengan kode emoji atau Font Awesome.

Contoh dengan ikon Font Awesome:

<li><a href="/p/kontak.html"><i class="fa fa-envelope"></i> Kontak</a></li>

Pastikan kamu sudah menambahkan link CSS Font Awesome di bagian <head>:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css">

5. Buat Menu Jadi Responsif (Tampil Bagus di HP)

Tambahkan kode ini setelah CSS di atas untuk membuat menu jadi mobile friendly:

@media screen and (max-width: 768px) {
  .menu-nav ul li {
    display: block;
  }
  .menu-nav ul {
    background: #007bff;
  }
}

6. Simpan dan Lihat Hasilnya

Klik Simpan → Lihat Blog.
Sekarang blog kamu sudah punya menu navigasi keren, elegan, dan responsif.

Tips Tambahan

  • Gunakan warna senada dengan tema blog.

  • Hindari terlalu banyak menu agar tidak penuh di layar HP.

  • Tambahkan animasi hover agar lebih hidup.

  • Bisa juga dikombinasikan dengan sticky navbar (menu tetap di atas saat scroll).

Post a Comment