Menu navigasi merupakan bagian penting dari template Blogger karena membantu pengunjung berpindah dari satu halaman ke halaman lain. Ketika blog sudah memiliki banyak kategori atau label, menu biasa yang hanya berisi satu tingkat sering kali tidak cukup. Salah satu solusinya adalah menggunakan menu dropdown Blogger agar beberapa submenu dapat dikelompokkan di bawah satu menu utama.
Dropdown bukan hanya persoalan tampilan. Menu juga harus mudah digunakan pada desktop maupun smartphone. Pada layar besar, submenu dapat ditampilkan ketika menu utama diarahkan dengan mouse. Sementara pada layar kecil, navigasi perlu memiliki mekanisme yang mudah disentuh dan tidak menyebabkan submenu keluar dari layar.
Dalam tutorial ini, kita akan membuat dropdown Blogger menggunakan HTML dan CSS tanpa library tambahan. Struktur yang digunakan dibuat sederhana agar dapat dijadikan dasar untuk template Blogger yang sudah ada. Kita juga akan membahas cara membuat submenu, membuat tampilan responsive, mengatur posisi dropdown, menangani masalah z-index, dan kesalahan yang sering menyebabkan navbar Blogger tidak bekerja dengan baik.
Apa Itu Menu Dropdown Blogger?
Menu dropdown adalah menu navigasi yang memiliki submenu di bawah sebuah menu utama. Ketika pengunjung melakukan interaksi tertentu, submenu tersebut ditampilkan dan berisi beberapa pilihan tambahan.
Contohnya, Anda memiliki menu utama Tutorial Blogger. Di dalamnya dapat terdapat submenu seperti:
- Template Blogger
- SEO Blogger
- HTML dan CSS
- JavaScript Blogger
Dengan cara tersebut, navbar tidak perlu menampilkan seluruh kategori sekaligus. Struktur menu menjadi lebih ringkas dan pengunjung dapat melihat kelompok topik berdasarkan menu induknya.
Kenapa Menu Dropdown Perlu Dibuat Responsive?
Menu yang terlihat bagus di desktop belum tentu nyaman digunakan pada smartphone. Layar mobile memiliki ruang horizontal yang jauh lebih terbatas sehingga menu horizontal dengan banyak submenu mudah bertabrakan atau keluar dari area layar.
Menu responsive perlu menyesuaikan tata letak berdasarkan ukuran layar. Contohnya, navbar desktop dapat menggunakan submenu horizontal atau dropdown ke bawah, sedangkan pada mobile seluruh menu dapat disusun secara vertikal.
| Bagian | Desktop | Mobile |
|---|---|---|
| Menu utama | Dapat disusun horizontal. | Lebih nyaman jika disusun vertikal. |
| Dropdown | Dapat terbuka ke bawah saat hover. | Sebaiknya dapat dibuka melalui interaksi sentuh. |
| Lebar menu | Dapat mengikuti konten. | Lebih aman menggunakan lebar container. |
| Jarak item | Dapat dibuat lebih rapat. | Perlu ruang sentuh yang cukup. |
Struktur Dasar Dropdown Menu Blogger
Sebelum memasukkan CSS, pahami struktur HTML yang akan digunakan. Menu utama memiliki daftar item, lalu salah satu item memiliki daftar submenu di dalamnya.
Struktur sederhananya seperti berikut:
<ul class="blogger-nav">
<li>
<a href="/">Home</a>
</li>
<li class="has-dropdown">
<a href="#">Tutorial Blogger</a>
<ul class="dropdown-menu">
<li>
<a href="/search/label/SEO">SEO Blogger</a>
</li>
<li>
<a href="/search/label/Template">Template Blogger</a>
</li>
<li>
<a href="/search/label/HTML">HTML dan CSS</a>
</li>
</ul>
</li>
<li>
<a href="/p/contact.html">Contact</a>
</li>
</ul>Class has-dropdown digunakan untuk menandai item yang mempunyai submenu, sedangkan dropdown-menu merupakan daftar submenu.
Cara Membuat Menu Dropdown Blogger dengan HTML dan CSS
Langkah 1: Backup Template Blogger
Sebelum mengedit HTML template, buat backup terlebih dahulu. Ini penting terutama jika Anda akan mengganti atau menambah struktur navbar yang sudah digunakan.
Jika terjadi kesalahan pada XML, CSS, atau struktur menu, Anda masih mempunyai salinan template sebelumnya untuk dipulihkan.
Langkah 2: Tambahkan Struktur HTML Navbar
Jika template Anda belum mempunyai struktur menu yang dapat digunakan, tambahkan HTML dasar berikut pada lokasi navbar yang sesuai.
<nav class="blogger-navbar" aria-label="Navigasi utama">
<ul class="blogger-nav">
<li>
<a href="/">Home</a>
</li>
<li class="has-dropdown">
<a href="#">Tutorial</a>
<ul class="dropdown-menu">
<li>
<a href="/search/label/Blogger">Blogger</a>
</li>
<li>
<a href="/search/label/SEO">SEO</a>
</li>
<li>
<a href="/search/label/HTML">HTML dan CSS</a>
</li>
</ul>
</li>
<li>
<a href="/p/about.html">About</a>
</li>
<li>
<a href="/p/contact.html">Contact</a>
</li>
</ul>
</nav>URL label pada contoh hanya ilustrasi. Ganti URL tersebut sesuai label dan halaman yang benar pada blog Anda.
Langkah 3: Tambahkan CSS Navbar
Selanjutnya tambahkan CSS untuk membuat menu utama tersusun horizontal dan submenu tersembunyi sebelum dibuka.
.blogger-navbar {
width: 100%;
}
.blogger-nav {
display: flex;
align-items: center;
gap: 4px;
margin: 0;
padding: 0;
list-style: none;
}
.blogger-nav > li {
position: relative;
margin: 0;
padding: 0;
list-style: none;
}
.blogger-nav a {
display: flex;
align-items: center;
min-height: 44px;
padding: 0 14px;
color: #222222;
text-decoration: none;
white-space: nowrap;
box-sizing: border-box;
}
.blogger-nav a:hover {
background: #f2f2f2;
}
.dropdown-menu {
position: absolute;
top: 100%;
left: 0;
z-index: 9999;
display: none;
min-width: 190px;
margin: 0;
padding: 6px 0;
list-style: none;
background: #ffffff;
border: 1px solid #dddddd;
border-radius: 8px;
box-shadow: 0 8px 24px rgba(0,0,0,0.10);
}
.dropdown-menu li {
margin: 0;
padding: 0;
list-style: none;
}
.dropdown-menu a {
display: flex;
width: 100%;
min-height: 42px;
padding: 9px 14px;
box-sizing: border-box;
}
.has-dropdown:hover > .dropdown-menu {
display: block;
}Aturan position: relative pada item induk diperlukan agar submenu yang menggunakan position: absolute mempunyai titik acuan yang benar.
Langkah 4: Tambahkan Tampilan Responsive
Sekarang kita perlu mengubah struktur menu ketika layar menjadi sempit. Untuk mobile, menu utama dapat disusun vertikal dan submenu dibuat berada di dalam alur menu.
@media (max-width: 768px) {
.blogger-nav {
flex-direction: column;
align-items: stretch;
width: 100%;
}
.blogger-nav > li {
width: 100%;
}
.blogger-nav > li > a {
width: 100%;
}
.dropdown-menu {
position: static;
width: 100%;
min-width: 0;
border: 0;
border-radius: 0;
box-shadow: none;
background: #f7f7f7;
}
.has-dropdown:hover > .dropdown-menu {
display: none;
}
.has-dropdown:focus-within > .dropdown-menu {
display: block;
}
}Pada contoh tersebut, hover desktop tidak dipakai sebagai mekanisme utama pada mobile. Selector :focus-within dapat membantu menampilkan submenu ketika elemen di dalam item memperoleh fokus. Namun, perilaku pada perangkat sentuh dapat berbeda tergantung struktur dan browser.
Cara Membuat Dropdown Mobile yang Lebih Mudah Dibuka
Salah satu tantangan dropdown responsive adalah membedakan fungsi menu induk dan kontrol untuk membuka submenu. Jika menu induk langsung berupa link, pengguna mungkin ingin mengunjungi halaman induk tetapi juga perlu membuka submenu.
Salah satu solusi yang lebih terstruktur adalah menggunakan tombol terpisah sebagai kontrol dropdown. Contohnya:
<li class="has-dropdown">
<div class="menu-parent">
<a href="/search/label/Tutorial">Tutorial</a>
<button
class="dropdown-toggle"
type="button"
aria-label="Buka submenu Tutorial">
+
</button>
</div>
<ul class="dropdown-menu">
<li>
<a href="/search/label/Blogger">Blogger</a>
</li>
<li>
<a href="/search/label/SEO">SEO</a>
</li>
</ul>
</li>Dengan struktur tersebut, link induk dan kontrol submenu memiliki fungsi yang berbeda. Untuk membuat tombol tersebut benar-benar membuka dan menutup submenu berdasarkan klik, JavaScript dapat ditambahkan.
Versi Dropdown dengan JavaScript untuk Mobile
Jika Anda ingin perilaku yang lebih konsisten pada perangkat sentuh, gunakan JavaScript untuk mengaktifkan class ketika tombol dropdown ditekan.
Contoh script:
<script>
document.addEventListener("DOMContentLoaded", function () {
var toggles = document.querySelectorAll(".dropdown-toggle");
toggles.forEach(function (toggle) {
toggle.addEventListener("click", function () {
var parent = toggle.closest(".has-dropdown");
if (!parent) {
return;
}
parent.classList.toggle("dropdown-open");
var isOpen = parent.classList.contains("dropdown-open");
toggle.setAttribute("aria-expanded", isOpen ? "true" : "false");
});
});
});
</script>Kemudian tambahkan CSS untuk class dropdown-open:
@media (max-width: 768px) {
.has-dropdown .dropdown-menu {
display: none;
}
.has-dropdown.dropdown-open > .dropdown-menu {
display: block;
}
}Dengan metode ini, tombol dapat digunakan untuk membuka dan menutup submenu. Script di atas menggunakan class dropdown-open sehingga CSS tetap bertanggung jawab atas tampilan.
Cara Menampilkan Tanda Panah pada Menu Dropdown
Agar pengguna mengetahui bahwa sebuah menu memiliki submenu, tambahkan indikator visual seperti tanda panah.
Salah satu cara sederhana adalah menggunakan pseudo-element CSS:
.has-dropdown > a::after {
content: "▾";
margin-left: 8px;
font-size: 11px;
}
@media (max-width: 768px) {
.has-dropdown > a::after {
margin-left: auto;
}
}Anda dapat menggunakan karakter lain atau SVG jika ingin indikator yang lebih sesuai dengan desain template.
Cara Membuat Dropdown Tidak Terpotong oleh Container
Masalah yang sering muncul pada dropdown Blogger adalah submenu sebenarnya sudah terbuka tetapi bagian bawahnya terpotong. Kondisi ini sering terjadi karena salah satu parent memiliki overflow: hidden;.
Contoh aturan yang dapat menyebabkan masalah:
.navbar-wrapper {
overflow: hidden;
}Jika dropdown berada di dalam container seperti itu, submenu bisa terpotong ketika melewati batas container. Periksa elemen parent dan gunakan overflow: visible; bila memang aman untuk layout tersebut.
Cara Mengatasi Dropdown Tertutup di Belakang Elemen Lain
Masalah berikutnya berkaitan dengan z-index. Dropdown bisa saja muncul tetapi berada di belakang header, slider, gambar, atau elemen lain.
Contoh:
.blogger-navbar {
position: relative;
z-index: 1000;
}
.dropdown-menu {
z-index: 9999;
}Namun, nilai z-index tidak bekerja sendiri. Elemen yang memiliki stacking context tertentu dapat membuat angka besar tetap berada di belakang elemen lain. Karena itu, periksa parent jika menaikkan z-index belum menyelesaikan masalah.
Cara Membuat Dropdown dengan Lebar yang Fleksibel
Lebar submenu sebaiknya cukup untuk menampilkan teks tanpa terpotong. Anda dapat menggunakan min-width sebagai batas minimum.
.dropdown-menu {
min-width: 200px;
}
.dropdown-menu a {
white-space: normal;
}Jika nama submenu cukup panjang, white-space: normal; memungkinkan teks turun ke baris berikutnya. Ini dapat menghindari dropdown menjadi terlalu lebar pada desktop.
Cara Membuat Dropdown Bertingkat
Dropdown juga dapat dibuat memiliki submenu di dalam submenu. Struktur ini disebut menu bertingkat. Namun, sebaiknya gunakan seperlunya karena struktur yang terlalu dalam dapat menyulitkan navigasi, khususnya pada mobile.
Contoh strukturnya:
<li class="has-dropdown">
<a href="#">Tutorial Blogger</a>
<ul class="dropdown-menu">
<li>
<a href="/search/label/Dasar">Dasar Blogger</a>
</li>
<li class="has-dropdown">
<a href="#">SEO</a>
<ul class="dropdown-menu">
<li>
<a href="/search/label/SEO-On-Page">SEO On Page</a>
</li>
<li>
<a href="/search/label/Indexing">Indexing</a>
</li>
</ul>
</li>
</ul>
</li>Pada desktop, submenu tingkat kedua biasanya membutuhkan aturan posisi tambahan agar tampil di samping submenu pertama. Pada mobile, struktur bertingkat lebih kompleks sehingga sebaiknya diuji dengan hati-hati.
Cara Menyesuaikan Warna Dropdown Blogger
Anda dapat mengganti warna background, teks, border, dan hover sesuai desain template.
.dropdown-menu {
background: #ffffff;
border: 1px solid #dddddd;
}
.dropdown-menu a {
color: #222222;
}
.dropdown-menu a:hover {
background: #f2f2f2;
color: #111111;
}Jika template memiliki dark mode, buat aturan tambahan agar warna dropdown ikut menyesuaikan ketika mode gelap aktif.
html[data-theme="dark"] .dropdown-menu {
background: #111827;
border-color: #374151;
}
html[data-theme="dark"] .dropdown-menu a {
color: #e5e7eb;
}
html[data-theme="dark"] .dropdown-menu a:hover {
background: #1f2937;
}Selector data-theme="dark" hanya contoh. Gunakan selector yang sama dengan sistem dark mode yang sudah diterapkan pada template Anda.
Cara Menggunakan Label Blogger sebagai Isi Dropdown
Dropdown sangat cocok digunakan untuk mengelompokkan label. Misalnya blog memiliki topik Blogger, SEO, Template, dan Tutorial.
Contohnya:
<li class="has-dropdown">
<a href="#">Tutorial</a>
<ul class="dropdown-menu">
<li>
<a href="/search/label/Blogger">Blogger</a>
</li>
<li>
<a href="/search/label/SEO">SEO</a>
</li>
<li>
<a href="/search/label/Template">Template</a>
</li>
</ul>
</li>Pastikan nama label dan URL sesuai dengan yang benar-benar digunakan pada blog. Jika nama label mempunyai karakter khusus atau spasi, URL perlu disesuaikan dengan struktur URL pencarian yang digunakan Blogger.
Cara Membuat Navbar HTML Blogger Tetap Ringkas
Semakin banyak menu yang ditambahkan, semakin besar kemungkinan navbar menjadi terlalu padat. Dropdown dapat membantu mengelompokkan halaman yang mempunyai hubungan topik.
Contoh struktur yang lebih ringkas:
| Menu Utama | Isi Dropdown |
|---|---|
| Blogger | Dasar Blogger, Template, Widget, HTML, CSS. |
| SEO | Keyword, Internal Link, Indexing, Search Console. |
| Tutorial | Panduan HTML, CSS, JavaScript, dan berbagai tutorial teknis. |
Struktur seperti ini membantu mengurangi jumlah item tingkat pertama tanpa menghilangkan akses ke halaman yang ada di dalamnya.
Kesalahan yang Sering Terjadi pada Dropdown Blogger
| Kesalahan | Penyebab | Solusi |
|---|---|---|
| Dropdown tidak muncul | Selector CSS tidak sesuai atau aturan display tertimpa. | Periksa class has-dropdown dan dropdown-menu. |
| Dropdown terpotong | Parent menggunakan overflow:hidden. |
Periksa overflow pada container navbar. |
| Dropdown berada di belakang slider | Stacking context atau z-index tidak sesuai. | Periksa parent dan atur z-index pada konteks yang benar. |
| Tidak bisa dibuka di HP | Hanya menggunakan hover sebagai trigger. | Gunakan mekanisme klik atau struktur mobile yang sesuai. |
| Menu keluar layar | Lebar dropdown terlalu besar atau posisi tidak disesuaikan. | Gunakan width responsive dan media query. |
| Semua menu ikut berubah | Selector CSS terlalu umum. | Gunakan class khusus untuk navbar. |
Tips Membuat Menu Dropdown Blogger yang Lebih Baik
- Kelompokkan menu yang berhubungan. Gunakan dropdown untuk mengatur topik yang memang mempunyai hubungan.
- Jangan membuat terlalu banyak tingkat. Struktur yang terlalu dalam dapat menyulitkan pembaca.
- Berikan area sentuh yang cukup. Menu mobile membutuhkan jarak dan tinggi item yang nyaman.
- Gunakan label yang jelas. Pengunjung sebaiknya bisa mengetahui isi submenu dari nama menu induk.
- Periksa posisi dropdown. Pastikan submenu tidak tertutup atau keluar dari viewport.
- Gunakan class khusus. Hindari selector generik yang dapat mengubah menu atau link lain.
- Uji pada desktop dan mobile. Jangan hanya mengandalkan tampilan browser desktop.
Cara Menguji Responsive Navbar Blogger
Setelah dropdown dipasang, lakukan pengujian dari beberapa ukuran layar. Periksa bukan hanya tampilan, tetapi juga apakah semua link dapat digunakan.
- Buka halaman utama blog.
- Arahkan mouse ke menu dropdown pada desktop.
- Klik setiap submenu dan pastikan URL benar.
- Ubah ukuran browser menjadi lebih kecil.
- Uji menu pada ukuran sekitar tablet.
- Buka blog menggunakan smartphone.
- Pastikan submenu dapat dibuka melalui interaksi yang tersedia.
- Pastikan dropdown tidak keluar dari area layar.
- Periksa apakah navbar menutupi judul atau konten artikel.
Cara Menghindari Konflik dengan CSS Template Blogger
Template Blogger biasanya sudah mempunyai banyak aturan CSS global untuk ul, li, a, button, dan nav. Jika Anda menggunakan selector terlalu umum, aturan dropdown dapat memengaruhi bagian lain dari template.
Sebagai contoh, hindari aturan seperti:
ul {
margin: 0;
padding: 0;
}Aturan tersebut bisa mengubah semua daftar di website, termasuk daftar pada artikel.
Lebih aman menggunakan selector khusus seperti:
.blogger-navbar .blogger-nav {
margin: 0;
padding: 0;
}Apakah Dropdown Blogger Membutuhkan JavaScript?
Tidak selalu. Dropdown dasar pada desktop dapat dibuat dengan HTML dan CSS menggunakan selector seperti :hover. Untuk kebutuhan yang lebih sederhana, pendekatan tersebut sudah cukup.
Namun, perangkat layar sentuh tidak memiliki pola hover yang sama seperti mouse. Karena itu, dropdown mobile sering kali membutuhkan mekanisme tambahan seperti klik dengan JavaScript atau pola HTML yang mendukung interaksi keyboard dan sentuhan dengan lebih baik.
Jadi, HTML dan CSS cukup untuk struktur dan tampilan dasar, sedangkan JavaScript dapat digunakan apabila Anda membutuhkan kontrol buka-tutup yang lebih konsisten pada mobile.
Apakah Menu Dropdown Berpengaruh pada SEO?
Dropdown bukan faktor yang secara otomatis meningkatkan peringkat halaman di mesin pencari. Fungsi utamanya adalah membantu struktur navigasi dan membuat sejumlah link dapat dikelompokkan dengan lebih rapi.
Yang perlu diperhatikan adalah memastikan link penting tetap dapat ditemukan dan digunakan. Jangan menyembunyikan seluruh navigasi penting dengan cara yang membuat pengguna kesulitan. Struktur menu sebaiknya dibuat berdasarkan kebutuhan pengunjung dan hubungan antarhalaman.
Versi Sederhana Menu Dropdown Blogger
Jika Anda hanya membutuhkan dropdown dasar untuk desktop, kombinasi HTML dan CSS berikut dapat dijadikan fondasi.
<nav class="blogger-navbar">
<ul class="blogger-nav">
<li>
<a href="/">Home</a>
</li>
<li class="has-dropdown">
<a href="#">Tutorial</a>
<ul class="dropdown-menu">
<li>
<a href="/search/label/Blogger">Blogger</a>
</li>
<li>
<a href="/search/label/SEO">SEO</a>
</li>
<li>
<a href="/search/label/Template">Template</a>
</li>
</ul>
</li>
<li>
<a href="/p/contact.html">Contact</a>
</li>
</ul>
</nav>CSS dasarnya:
.blogger-nav {
display: flex;
margin: 0;
padding: 0;
list-style: none;
}
.blogger-nav > li {
position: relative;
}
.blogger-nav a {
display: block;
padding: 12px 15px;
text-decoration: none;
}
.dropdown-menu {
position: absolute;
top: 100%;
left: 0;
display: none;
min-width: 190px;
margin: 0;
padding: 0;
list-style: none;
background: #ffffff;
}
.has-dropdown:hover > .dropdown-menu {
display: block;
}Untuk template produksi, jangan berhenti pada contoh sederhana tersebut. Tambahkan aturan responsive, pengaturan z-index, overflow, serta mekanisme yang sesuai untuk perangkat mobile.
FAQ Menu Dropdown Blogger
1. Apa itu menu dropdown Blogger?
Menu dropdown Blogger adalah menu navigasi yang memiliki submenu di bawah sebuah menu utama. Submenu dapat digunakan untuk mengelompokkan beberapa halaman atau kategori yang berhubungan.
2. Apakah dropdown Blogger bisa dibuat tanpa JavaScript?
Bisa untuk kebutuhan dasar, terutama pada desktop dengan CSS :hover. Untuk interaksi mobile yang lebih terkontrol, JavaScript dapat digunakan untuk membuka dan menutup submenu melalui klik.
3. Kenapa dropdown hanya bekerja saat menggunakan mouse?
Kemungkinan dropdown hanya menggunakan :hover. Perangkat sentuh tidak bekerja dengan pola hover seperti mouse sehingga perlu mekanisme interaksi lain.
4. Kenapa menu dropdown Blogger terpotong?
Salah satu penyebabnya adalah parent container menggunakan overflow: hidden. Periksa juga tinggi container dan struktur navbar.
5. Kenapa dropdown berada di belakang slider atau gambar?
Masalah tersebut biasanya berkaitan dengan stacking context dan z-index. Jangan hanya menaikkan angka z-index; periksa juga elemen parent yang membentuk stacking context.
6. Berapa jumlah submenu yang ideal?
Tidak ada jumlah yang berlaku untuk semua blog. Gunakan sebanyak yang memang membantu navigasi dan hindari membuat daftar submenu terlalu panjang sehingga sulit dipindai.
7. Apakah menu dropdown bisa digunakan untuk label Blogger?
Bisa. Label dapat ditempatkan sebagai link submenu selama URL label yang digunakan sesuai dengan struktur blog.
8. Apakah dropdown responsive bisa digunakan di semua template Blogger?
Konsep HTML dan CSS-nya dapat diterapkan pada banyak template, tetapi selector, struktur navbar, dan aturan CSS setiap template berbeda. Karena itu, kode kemungkinan perlu disesuaikan.
9. Apakah menu dropdown dapat dibuat bertingkat?
Bisa, tetapi dropdown bertingkat lebih kompleks dan perlu pengujian tambahan, terutama pada mobile. Untuk kebanyakan blog, satu tingkat submenu sudah cukup.
10. Apakah dropdown menu dapat mengganggu tampilan mobile?
Bisa jika ukurannya, posisi, atau mekanisme buka-tutup tidak dirancang untuk layar kecil. Karena itu, gunakan media query dan lakukan pengujian langsung pada smartphone.
Kesimpulan
Membuat menu dropdown Blogger dapat dilakukan menggunakan HTML dan CSS tanpa library tambahan. Struktur dasarnya terdiri dari menu utama, item yang memiliki submenu, serta daftar dropdown yang ditampilkan berdasarkan interaksi pengguna.
Untuk desktop, CSS :hover dapat digunakan sebagai mekanisme sederhana untuk menampilkan dropdown. Namun, untuk smartphone, sebaiknya jangan hanya mengandalkan hover. Anda dapat menggunakan struktur yang lebih sesuai untuk touch interaction atau menambahkan JavaScript untuk mengontrol buka-tutup submenu.
Selain membuat tampilan, perhatikan juga masalah overflow, z-index, lebar submenu, ukuran area sentuh, serta konflik dengan CSS bawaan template. Selector yang terlalu umum sebaiknya dihindari agar dropdown tidak merusak daftar dan link lain di artikel.
Dengan struktur yang rapi dan responsive, navbar HTML Blogger dapat digunakan untuk mengelompokkan label, halaman, atau kategori tanpa membuat navigasi terlihat terlalu penuh. Setelah memasangnya, lakukan pengujian pada desktop, tablet, dan smartphone untuk memastikan setiap menu tetap mudah ditemukan dan digunakan.