Membuat Menu Navigasi dengan Sub-Menu di Blogger Rapi Modern

Siapa yang pernah ngalamin kode dipaste ke Blogger tapi malah nggak tampil? Yang muncul kosong… atau malah berubah jadi tampilan aneh? Tenang. Itu bukan salah kamu. Itu karena Blogger membaca tag HTML sebagai perintah.

Di artikel ini gue kasih versi FULL FIX 2026. Tinggal copy → paste → publish. Kode pasti tampil normal dan bisa langsung dipakai.

STEP 1 – Tambahkan CSS ke Template

Masuk ke: Tema → Edit HTML lalu cari kode:

]]></b:skin>

Letakkan kode berikut tepat di atasnya:

/* NAVIGATION MENU */
#NavbarMenu {
width:100%;
height:40px;
background:#ff6600;
margin:0 auto;
font:bold 13px Arial;
}
#nav {
margin:0;
padding:0;
list-style:none;
}
#nav li {
float:left;
position:relative;
}
#nav li a {
display:block;
padding:12px 15px;
color:#fff;
text-decoration:none;
}
#nav li:hover {
background:#cc5200;
}
#nav li ul {
display:none;
position:absolute;
top:40px;
left:0;
background:#ff6600;
padding:0;
}
#nav li:hover ul {
display:block;
}
#nav li ul li {
float:none;
width:180px;
}
#nav li ul li a {
padding:10px;
}

STEP 2 – Pasang HTML Menu

Masuk ke Tata Letak → Tambah Gadget → HTML/JavaScript Lalu paste kode berikut:

<div id="NavbarMenu">
<ul id="nav">

<li><a href="/">Beranda</a></li>

<li><a href="#">Menu 1</a>
  <ul>
    <li><a href="#">Sub Menu 1</a></li>
    <li><a href="#">Sub Menu 2</a></li>
  </ul>
</li>

<li><a href="#">Menu 2</a>
  <ul>
    <li><a href="#">Sub Menu A</a></li>
    <li><a href="#">Sub Menu B</a></li>
  </ul>
</li>

<li><a href="#">Kontak</a></li>

</ul>
</div>

Penjelasan Penting

1. Ganti Tanda #

Tanda # adalah placeholder. Ganti dengan link tujuan blog kamu.

2. Tambah Menu

Untuk menambah menu baru, cukup duplikat bagian:

<li><a href="#">Menu</a></li>

3. Supaya Responsive

Kalau template kamu sudah responsive, menu ini otomatis ikut menyesuaikan.

Script Tombol Copy (Pasang Sekali Saja)

<script>
function copyCode(id){
var copyText=document.getElementById(id);
copyText.select();
document.execCommand("copy");
alert("Kode berhasil disalin!");
}
</script>

Letakkan script ini di bagian paling bawah postingan atau sebelum </body>.

Kenapa Sekarang Pasti Tampil?

Karena kita menggunakan <textarea readonly>. Tag ini tidak akan mengeksekusi HTML di dalamnya. Artinya: kode tampil apa adanya. Tidak hilang. Tidak berubah. Tidak dihapus Blogger.

Sekarang tinggal copas, publish, selesai.

PISBON™ Automotive