Artikel

Cara Membuat Menu Navigasi Drop-down di Blogspot

May 19, 2025

121

Menu navigasi (navbar) adalah “peta” bagi pengunjung blog. Semakin rapi dan mudah dipahami strukturnya, semakin nyaman pula pengalaman membaca mereka. Salah satu teknik populer agar menu tetap ringkas namun memuat banyak tautan adalah drop-down—submenu yang muncul ketika kursor diarahkan (hover) atau diklik pada induk menu.

Kabar baiknya, cara membuat menu navigasi drop-down di Blogspot ternyata tidak sesulit yang dibayangkan. Anda hanya membutuhkan sedikit penyesuaian HTML dan CSS, tanpa plugin eksternal. Artikel ini memandu Anda langkah demi langkah—mulai dari menyiapkan struktur menu di Tata Letak hingga styling agar tampil modern dan responsif.

1 | Persiapan: Buat Halaman & Label yang Akan Ditampilkan

Sebelum menyentuh kode, pastikan Anda sudah:

Menentukan hierarki menu
- Contoh induk: Home, Tutorial, Download, Tentang.
- Contoh submenu di bawah Tutorial: Blogspot, SEO, AdSense.
Membuat Halaman Statis (Pages) atau Label sesuai kebutuhan.
- Halaman statis cocok untuk About, Contact, dsb.
- Label cocok untuk kategori artikel (Blogspot, SEO).

Catat URL tiap halaman/label—nanti ditempel ke struktur menu.

2 | Cara 1: Menu Drop-down via “Tata Letak” Saja (Tanpa Edit HTML)

Metode ini paling mudah, cocok bagi pemula yang enggan menyentuh kode:

Buka Blogger > Tata Letak.
Pada area header atau bagian paling atas, klik Tambahkan Gadget.
Pilih gadget Halaman (Pages).
Klik Tambahkan tautan eksternal ➜ masukkan Nama (mis. “Tutorial”) & URL “#” (tanda pagar) lalu Simpan.
- “#” membuat item induk tak bermuatan konten.
Tambah tautan lagi untuk sub-page di bawah “Tutorial”, tetapi awali nama dengan empat spasi atau karakter “—” supaya tampak menjorok (indentasi).
Susun urutan lewat tarik-geser (drag) hingga submenu berada tepat di bawah induknya.

Kelemahan: Hanya menghasilkan menu bertingkat pada tampilan sidebar Halaman versi mobile; di desktop tetap linear. Untuk drop-down nyata, Anda butuh penyesuaian HTML + CSS berikut.

3 | Cara 2: Menu Drop-down Kustom dengan HTML & CSS

3.1 Menambahkan Gadget HTML

Blogger > Tata Letak ➜ cari area “Navbar” atau Header.
Klik Tambahkan Gadget > HTML/JavaScript.
Masukkan kerangka HTML berikut dan ganti # dengan URL nyata:

html

<ul class="nav-dropdown">

  <li><a href="/">Home</a></li>
  <li><a href="#">Tutorial ▾</a>

    <ul>

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

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

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

    </ul>

  </li>
  <li><a href="#">Download ▾</a>

    <ul>

      <li><a href="/p/template.html">Template</a></li>

      <li><a href="/p/ebook.html">E-Book</a></li>

    </ul>

  </li>

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

Catatan: Tanda “▾” hanya ikon panah kecil; bisa diganti SVG/Icon apa pun.

Klik Simpan.

3.2 Menambahkan CSS

Sekarang buat submenu tersembunyi & muncul saat hover/klik:

Masih di gadget yang sama atau di Tema > Edit HTML ( bagian <head> ), tempel CSS ini:

<style>

/* —— NAV BAR DASAR —— */

.nav-dropdown{

  list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;

  background:#ffffff;border-top:3px solid #ff6600;font-family:inherit;

}

.nav-dropdown > li{

  position:relative;

}

.nav-dropdown > li > a{

  display:block;padding:12px 16px;text-decoration:none;

  color:#333;font-weight:600;transition:background .3s;

}

.nav-dropdown > li:hover > a{

  background:#ff6600;color:#fff;

}
/* —— SUBMENU —— */

.nav-dropdown li ul{

  display:none;position:absolute;left:0;top:100%;

  background:#fff;list-style:none;padding:0;border:1px solid #ccc;

  min-width:180px;z-index:999;

}

.nav-dropdown li ul li a{

  padding:10px 14px;font-weight:400;color:#333;display:block;

}

.nav-dropdown li ul li a:hover{

  background:#f2f2f2;color:#ff6600;

}
/* Tampilkan submenu saat hover */

.nav-dropdown li:hover > ul{

  display:block;

}

/* —— RESPONSIVE —— */ @media(max-width:768px){ .nav-dropdown{ flex-direction:column; } .nav-dropdown > li{ width:100%; } .nav-dropdown li ul{ position:static;border:none; } } </style>

Klik Simpan. Sekarang submenu muncul ketika pointer hover di desktop dan turun rapi di mobile.

4 | Menambahkan Efek Klik di Mobile (Opsional)

Pada beberapa template, hover tidak bekerja di layar sentuh. Anda bisa mengubah logika menjadi click-toggle dengan JavaScript ringan:

<script>

document.addEventListener('DOMContentLoaded',function(){

  var navItems=document.querySelectorAll('.nav-dropdown > li > a');

  navItems.forEach(function(item){

    item.addEventListener('click',function(e){

      var next=this.nextElementSibling;

      if(next && next.tagName==='UL'){

        e.preventDefault();           // cegah link '#'

        next.classList.toggle('show'); // toggle submenu

      }

    });

  });

});

</script>

<style> .nav-dropdown li ul.show{display:block;} </style>

Tambahkan tepat di bawah kode CSS.

5 | Tips Desain & SEO untuk Menu Drop-down

Tips	Penjelasan
Beri label jelas	Gunakan kata kunci deskriptif. Mis.: “Tutorial SEO” alih-alih “Belajar”.
Batasi kedalaman	Sebaiknya maksimal dua tingkat (menu > submenu) agar UX tetap baik.
Gunakan ikon atau panah ▼	Membantu user memahami bahwa item punya submenu.
Pastikan aksesibilitas	Tambah `aria-haspopup="true"` dan `aria-label` jika ingin lebih ramah screen reader.
Cek performa	Terlalu banyak CSS/JS bisa memperlambat blog. Kompres kode bila perlu.

6 | Mengganti Warna agar Sesuai Tema

Ubah variabel warna utama pada CSS di atas:

#ff6600 ⇒ warna aksen (hover & border atas)
#333 ⇒ warna teks default
#ffffff ⇒ warna latar menu

Gunakan ekstensi browser Inspect untuk eksperimen real-time, lalu salin nilai akhirnya ke CSS blog.

7 | Troubleshooting Umum

Masalah	Penyebab & Solusi
Submenu tidak muncul	Pastikan position:relative pada `<li>` induk dan position:absolute pada `<ul>` anak.
Menu turun ke baris baru	Tambahkan `flex-wrap:wrap;` (sudah ada) atau atur padding agar tidak terlalu lebar.
Ikon ▾ tampil di baris terpisah	Gunakan `white-space:nowrap;` pada `.nav-dropdown > li > a`.
Submenu tertutup di balik elemen lain	Tambah `z-index` lebih tinggi (mis. 9999) pada `.nav-dropdown li ul`.
JavaScript click-toggle tidak jalan	Pastikan kode ditempel setelah elemen HTML menu (atau masukkan di footer).

Kesimpulan

Membuat navigasi drop-down memberikan tiga manfaat utama:

User Experience – Pengunjung menemukan konten lebih cepat tanpa scroll panjang.
Desain Ringkas – Menu bersih, profesional, dan tetap muat di bar atas.
SEO – Struktur internal link lebih jelas, membantu crawler Google memahami hierarki.

Dengan mengikuti panduan cara membuat menu navigasi drop-down di Blogspot di atas, Anda bisa:

Menyusun HTML menu dasar dalam gadget HTML/JavaScript
Menerapkan CSS hover (atau click) untuk tampil dinamis dan responsif
Menyesuaikan warna, font, dan ikon agar selaras tema blog

Luangkan waktu untuk menguji tampilan di berbagai perangkat serta memastikan setiap tautan bekerja. Jika sudah oke, publikasikan perubahan dan nikmati tampilan blog yang lebih profesional!