"DHIANHY Print & Graphic's" Menerima : Pengetikan Komputer, Cetak Undangan, Instal PC/Laptop, Photo Copy, Cetak Photo, Press Laminating, Cetak Kartu Nama/ID Card/Kartu Mahasiswa/Pelajar, Dll (085 341 403 442)

Senin, 17 November 2025

Cara Membuat Menu Navigasi Drop-down di Blogspot

 

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:

  1. Menentukan hierarki menu

    • Contoh induk: Home, Tutorial, Download, Tentang.

    • Contoh submenu di bawah Tutorial: Blogspot, SEO, AdSense.

  2. 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:

  1. Buka Blogger > Tata Letak.

  2. Pada area header atau bagian paling atas, klik Tambahkan Gadget.

  3. Pilih gadget Halaman (Pages).

  4. Klik Tambahkan tautan eksternal ➜ masukkan Nama (mis. “Tutorial”) & URL “#” (tanda pagar) lalu Simpan.

    • “#” membuat item induk tak bermuatan konten.

  5. Tambah tautan lagi untuk sub-page di bawah “Tutorial”, tetapi awali nama dengan empat spasi atau karakter “—” supaya tampak menjorok (indentasi).

  6. 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

  1. Blogger > Tata Letak ➜ cari area “Navbar” atau Header.

  2. Klik Tambahkan Gadget > HTML/JavaScript.

  3. 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:

  1. 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

TipsPenjelasan
Beri label jelasGunakan kata kunci deskriptif. Mis.: “Tutorial SEO” alih-alih “Belajar”.
Batasi kedalamanSebaiknya maksimal dua tingkat (menu > submenu) agar UX tetap baik.
Gunakan ikon atau panah ▼Membantu user memahami bahwa item punya submenu.
Pastikan aksesibilitasTambah aria-haspopup="true" dan aria-label jika ingin lebih ramah screen reader.
Cek performaTerlalu 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

MasalahPenyebab & Solusi
Submenu tidak munculPastikan position:relative pada <li> induk dan position:absolute pada <ul> anak.
Menu turun ke baris baruTambahkan flex-wrap:wrap; (sudah ada) atau atur padding agar tidak terlalu lebar.
Ikon ▾ tampil di baris terpisahGunakan white-space:nowrap; pada .nav-dropdown > li > a.
Submenu tertutup di balik elemen lainTambah z-index lebih tinggi (mis. 9999) pada .nav-dropdown li ul.
JavaScript click-toggle tidak jalanPastikan kode ditempel setelah elemen HTML menu (atau masukkan di footer).

Kesimpulan

Membuat navigasi drop-down memberikan tiga manfaat utama:

  1. User Experience – Pengunjung menemukan konten lebih cepat tanpa scroll panjang.

  2. Desain Ringkas – Menu bersih, profesional, dan tetap muat di bar atas.

  3. 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

By di Tidak ada komentar:
Langganan: Komentar (Atom)


By:UdhinkHasrulParakkasi.blogspot.co.id

Cara Membuat Menu Navigasi Drop-down di Blogspot

  cara membuat menu navigasi drop-down di Blogspot  ternyata tidak sesulit yang dibayangkan. Anda hanya membutuhkan sedikit penyesuaian HTML...