Cara Menambahkan Menu Navigasi Custom di Blogspot

Catatan Penting Sebelum Mencoba Tutorial

Tutorial ini saya tulis sebagai referensi bagi blogger yang ingin mencoba menu navigasi custom di Blogspot. Untuk menjaga kestabilan dan konsistensi tampilan, blog ini sendiri masih menggunakan menu bawaan tema.

Sebagai gambaran hasil jadi, contoh penerapan menu navigasi custom bisa kamu lihat di blog dummy milik saya berikut ini:
👉 https://dsimplecraftcikarang.blogspot.com

Blog dummy tersebut khusus digunakan untuk uji coba, eksperimen CSS/HTML, dan simulasi tutorial sebelum benar-benar diterapkan di blog utama.

Seri Tutorial Blogger (Pemula – Menengah)

Seri ini dibuat khusus untuk kamu yang menggunakan Blogspot/Blogger dan ingin blog terlihat lebih rapi, fungsional, dan enak dipakai pembaca. Bahasa dibuat ringan, langkah jelas, dan bisa dipraktikkan langsung.

Daftar Seri Tutorial:

1. Cara Menambahkan Menu Navigasi Custom di Blogspot
2. Cara Membuat Menu Dropdown di Blogspot
3. Cara Mengatur Ukuran Font Postingan dan Sidebar Blogspot
4. Cara Menambahkan Widget Penting agar Blog Lebih Interaktif
5. Cara Merapikan Tampilan Blog agar Lebih Nyaman Dibaca

Cara Menambahkan Menu Navigasi Custom di Blogspot

Menu navigasi berfungsi membantu pembaca menemukan halaman penting di blog kamu dengan mudah. Menu yang rapi akan membuat blog terlihat lebih profesional dan meningkatkan kenyamanan pengunjung.

Pada tutorial ini, kita akan membuat menu navigasi custom menggunakan HTML dan CSS sederhana, tanpa plugin tambahan.

Persiapan Awal

Pastikan kamu sudah:

• Login ke akun Blogger
• Mengetahui menu apa saja yang ingin ditampilkan (misalnya: Home, About, Blog, Resep, Kontak)

Langkah 1: Masuk ke Dashboard Blogger

Masuk ke Blogger → Dashboard → Tata Letak (Layout).

Langkah 2: Tambahkan Gadget HTML/Javascript

Klik Tambah Gadget pada bagian header atau area menu, lalu pilih HTML/Javascript.

Langkah 3: Masukkan Kode Menu Navigasi

Salin dan tempel kode berikut ke dalam kolom HTML.

<ul class="menu-navigasi">

  <li><a href="/">Home</a></li>

  <li><a href="/p/about.html">About</a></li>

  <li><a href="/search/label/Resep">Resep</a></li>

  <li><a href="/search/label/Tutorial">Tutorial</a></li>

  <li><a href="/p/contact.html">Contact</a></li>

</ul>

Klik Simpan.

Langkah 4: Tambahkan CSS Menu

Masuk ke Tema → Sesuaikan → Advanced → Tambahkan CSS atau Edit HTML lalu letakkan kode berikut sebelum </style>.

.menu-navigasi {

  list-style: none;

  margin: 0;

  padding: 0;

  display: flex;

  gap: 20px;

}

.menu-navigasi li a {

  text-decoration: none;

  font-size: 16px;

  color: #333;

}

.menu-navigasi li a:hover {

  color: #b40404;

}

Simpan perubahan.

Langkah 5: Cek Tampilan Blog

Buka blog kamu dan lihat hasilnya. Menu navigasi custom sekarang sudah tampil dan bisa diklik.

Jika menu terlihat terlalu kecil atau terlalu besar, kamu bisa menyesuaikan ukuran font di bagian CSS.

Tutorial berikutnya akan membahas cara membuat dropdown menu agar menu blog kamu lebih rapi dan tidak memakan banyak tempat.