"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:

Senin, 03 November 2025

Daftar Lagu

Lagu dibawah ini semua diciptakan oleh Dhink Hasrul Parakkasi dengan menggunakan aransemen AI. tetapi lirik semua diciptakan sendiri. berikut daftar lagu yang telah dibuat silahkan di download untuk mendengarkannya:

  1. Ada Rasa yang Kujaga Downloan
  2. Adek dari Polewali Download
  3. Adek Malu Malu Download
  4. Adek Sudah Cuek Download
  5. Bahasa Hati Download
  6. Bangkit Dari Timur Download
  7. Benci Tapi Rindu Download
  8. Berakhir Tanpa Kata Download
  9. Bertahan Download
  10. Berubah Jadi Gaul Download
  11. Beta So Berubah Download
  12. Bodoh Amat Download
  13. Bukan Aku Lagi Download
  14. Cahaya Muhammad Download
  15. Cemburu Tanpa Alasan Download
  16. Cinta di Tiktok Download
  17. Cinta Tak Terbalas (Versi Pria) Download
  18. Cinta Tak Terbalas (Versi Wanita) Download
  19. Cukup Kamu Saja Download
  20. Dalam Hati yang Sama Download
  21. Demi Bahagiamu Download
  22. Demokrasi yang Terjual Download
  23. Di Jalan Bersamamu Download
  24. Ditanah Jauh (untuk Sebuah Mimpi) Download
  25. Di Waktu yang Salah Download
  26. Dunia Milik Mereka Download
  27. Goyang Tanpa Drama Download
  28. Hadirmu Adalah Jawaban Download
  29. Hancur Download
  30. Hari Bahagiamu Download
  31. Hati yang Iri Download
  32. Hidup Hanya Sementara Download
  33. Hilang Arah Download
  34. Jalan Takdirku Download
  35. Jangan Cintai Aku Download
  36. Jatuh di Waktu Yang Salah Download
  37. Jejak Yang Hilang Download
  38. Karena Ego Download
  39. Kau Pergi Demi Restu Download
  40. Kau Yang Kucari Download
  41. Kembali Pada-Mu Download
  42. Kisah Yang Terindah Download
  43. Kita Tak Jodoh Download
  44. Langkah Tak Berujung Download
  45. Luka Penghianatan Download
  46. Masih Disini Mencintai Download
  47. Mencintai Dalam Diam Download
  48. Nikmat Yang Sesungguhnya Download
  49. Peluh Sang Ayah Download
  50. Peluk Dunia Download
  51. Pengorbanan Ayah Download
  52. Ragu Dibalik Rindu Download
  53. Remaja Kekinian Download
  54. Rindu Dibalik Do'a Download
  55. Santai Saja Download
  56. Sayang Jang Marah Download
  57. Sayangi Aku Download
  58. Selamat Tinggal, Kawan Lama Download
  59. Semangat Pagi Download
  60. Sisa Rindu Download
  61. Tabrak Mode On Download
  62. Tak Pernah Bersatu Download
  63. Tanpa Kepastian (HTS) Download
  64. Terlalu Sayang, Terlalu Cemburu Download
  65. Tolong Percaya Padaku Download
  66. Topeng Semu Download
  67. Tua Bersamamu Download
  68. Untuk Ibu Download
  69. Untukmu Sahabat Download
  70. Yang Pertama Download 

Untuk Video dapat di lihat pada Youtube, Serta Karaoke Tanpa Vokal Disini
Jangan Lupa Share, Like, Subscribe dan Komenta pada Youtube ya !!!

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