Cara Membuat Menu Pilihan Utama (Header) di Blogspot dengan Mudah

Updated: 17 Mei, 2025 • 0 • min read

Table of Contents

Navigasi yang jelas dan rapi adalah kunci kenyamanan pembaca saat menjelajahi blog. Salah satu komponen navigasi terpenting adalah menu utama (header menu)—biasanya berada di bagian atas blog dan menampilkan tautan ke halaman penting seperti “Beranda”, “Tentang”, “Kontak”, atau kategori artikel seperti “Tips”, “Tutorial”, dan lainnya.

Artikel ini akan membimbing Anda langkah demi langkah membuat menu utama yang profesional di Blogspot, tanpa harus menguasai coding!

Berikut adalah artikel siap posting untuk blog Anda dengan judul “Cara Membuat Menu Pilihan Utama (Header) di Blogspot dengan Mudah”

1. Persiapan Awal: Buat Halaman yang Ingin Ditampilkan

Sebelum menambahkan menu, pastikan Anda sudah memiliki halaman seperti:

Beranda
Tentang Saya
Kontak
Daftar Isi
atau kategori artikel tertentu

Untuk menambahkan halaman baru:

Masuk ke Dashboard Blogger
Klik menu Halaman > Halaman Baru
Tulis judul halaman dan isi konten
Klik Publikasikan

2. Menambahkan Menu di Header Blogspot

Langkah-langkah:

Masuk ke Blogger > Tata Letak
Temukan bagian bernama Menu Halaman atau Navigasi Header
Klik Edit
Centang halaman yang ingin ditampilkan
Urutkan posisi menu sesuai keinginan
Klik Simpan

Ilustrasi Gambar 1: Tampilan editor menu halaman Blogspot dari dashboard Tata Letak.

3. Menambahkan Link Kustom (Eksternal atau Label Artikel)

Jika Anda ingin menambahkan tautan kustom seperti kategori atau label, lakukan langkah berikut:

Pada jendela menu halaman, klik Tambahkan Tautan Eksternal
Masukkan Judul Menu (misalnya: Tutorial)
Masukkan URL (misalnya: https://namablog.blogspot.com/search/label/Tutorial)
Klik Tambahkan Tautan
Simpan

Dengan cara ini, Anda bisa menampilkan menu berdasarkan label/kategori tertentu.

4. Alternatif: Menambahkan Menu Header dengan Kode HTML Jika Tidak Ada Menu Halaman di Tata Letak

Beberapa template pihak ketiga atau custom Blogger memang tidak menyediakan bagian Menu Halaman secara otomatis di tata letak. Tapi jangan khawatir! Anda tetap bisa menambahkan menu pilihan utama secara manual dengan menyisipkan kode HTML di Tata Letak.

Langkah-langkah Menambahkan Menu dengan Kode HTML/JavaScript:

Masuk ke Dashboard Blogger
Buka menu Tata Letak
Cari posisi di bagian Header atau di atas Main Blog
Klik "Tambahkan Gadget"
Pilih HTML/JavaScript
Masukkan kode HTML menu berikut ini:

<style>
.custom-menu {
  display: flex;
  justify-content: center;
  gap: 20px;
  background-color: #f4f4f4;
  padding: 10px;
  font-family: Arial, sans-serif;
}
.custom-menu a {
  text-decoration: none;
  color: #333;
  font-weight: bold;
}
.custom-menu a:hover {
  color: #007BFF;
}
</style>

<div class="custom-menu">
  <a href="/"><b>Beranda</b></a>
  <a href="/p/tentang-saya.html">Tentang Saya</a>
  <a href="/p/kontak.html">Kontak</a>
  <a href="/search/label/Tutorial">Tutorial</a>
  <a href="/search/label/Review">Review</a>
</div>

Klik Simpan
Geser gadget ke posisi paling atas (di atas konten blog), jika perlu.

Penyesuaian Warna & Tampilan

Anda bisa mengubah:

Warna latar (background-color)
Warna teks (color)
Jenis font (font-family)
Jarak antar menu (gap)

Untuk menyesuaikan desain agar menyatu dengan tema blog Anda.

5. Tips Jika Menggunakan Template Custom Pihak Ketiga

Jika Anda menggunakan template dari luar seperti Gooyaabi, SoraTemplates, atau Themexpose, kadang menu harus disesuaikan dari:

Edit HTML Template, dan cari bagian  atau <nav>
Tambahkan tautan menu langsung di dalam struktur HTML menu tersebut
Atau arahkan menu dari Desainer Tema > Menu Navigasi (jika template mendukung)

Namun bagi pemula, menggunakan gadget HTML/JavaScript di atas sudah sangat cukup dan fleksibel.

6. Tips Tambahan:

Gunakan judul menu yang singkat namun jelas
Jangan terlalu banyak menu agar tidak membingungkan
Konsisten gunakan huruf besar/kecil (misalnya: Semua huruf besar atau huruf awal kapital)
Jika menggunakan template pihak ketiga, pastikan menu berada di bagian yang bisa disesuaikan

Penutup Tambahan

Membuat menu utama di header Blogspot sangat mudah dan sangat membantu pembaca menavigasi isi blog Anda. Dengan beberapa klik saja, tampilan blog jadi lebih profesional dan ramah pengguna. Jangan lupa perbarui menu jika Anda menambahkan halaman baru!

Dengan panduan ini, kini Anda tidak perlu khawatir meskipun template blog tidak menyediakan menu navigasi bawaan. Gunakan kode HTML yang disediakan untuk membuat menu yang rapi, responsif, dan mudah dikustomisasi. Tetap kreatif dan pastikan navigasi blog Anda ramah pengunjung!

AdinJava