Tutorial Membuat Menu Navigasi Horizontal Responsive (Desktop) di Header Blogger (Bagian 2)

Pada tutorial sebelumnya, kita telah berhasil merombak fondasi header bawaan Blogger menjadi tata letak full-width (lebar penuh) dan menempatkan logo secara presisi di sebelah kiri. Namun, header tersebut masih menyisakan ruang kosong di sisi kanannya.

Sebuah situs web profesional, seperti portal berita atau company profile, wajib memiliki struktur navigasi utama (main menu) yang jelas agar pengunjung mudah menemukan konten-konten penting.

Pada Bagian 2 dari seri perombakan header ini, kita akan mengisi ruang kosong tersebut dengan deretan menu navigasi horizontal khusus untuk tampilan desktop. Kita akan menggunakan HTML semantik dan CSS Flexbox agar susunannya rapi, modern, dan tentunya disematkan efek hover yang selaras dengan aksen merah kemerdekaan kita.

PENGUMUMAN SERI TUTORIAL HEADER:

Pastikan Anda telah mengikuti Bagian 1 sebelum mengeksekusi tutorial ini. Simpan halaman ini untuk kelanjutan serinya:

Bagian 1 (Sudah Rilis): Tutorial Membuat Banner Header Tematik HUT ke-81 RI Keren di Blogger (Bagian 1).
Bagian 3 (Segera Hadir): Panduan Modifikasi Hamburger Menu dan Drawer Navigation Mobile di Blogger.

Langkah 1: Menyisipkan Kode HTML Navigasi

Kita akan memasukkan daftar menu berformat <ul> (Unordered List) ke dalam elemen placeholder yang sudah kita persiapkan pada Bagian 1 kemarin.

Masuk ke dasbor Blogger > pilih menu Tema (Theme).
Klik ikon panah di sebelah "Sesuaikan", lalu pilih Edit HTML.
Temukan kode <div class='header-navigation-placeholder'> yang kita buat di tutorial sebelumnya.
Hapus teks komentar di dalamnya, lalu masukkan kode struktur menu berikut:

<div class='header-navigation-placeholder'>
  
  <!-- Awal Struktur Menu Desktop -->
  <nav class='desktop-menu'>
    <ul>
      <li><a href='/'>Beranda</a></li>
      <li><a href='/search/label/Nasional'>Nasional</a></li>
      <li><a href='/search/label/Tutorial'>Tutorial</a></li>
      <li><a href='/p/tentang-kami.html'>Tentang Kami</a></li>
      <!-- Tombol CTA dengan class khusus -->
      <li><a class='btn-kontak' href='/p/kontak.html'>Kontak</a></li>
    </ul>
  </nav>
  <!-- Akhir Struktur Menu Desktop -->

</div>

Catatan: Anda bisa mengubah teks seperti "Nasional" atau "Tutorial" beserta URL href-nya sesuai dengan kategori atau halaman statis yang ada di blog Anda.

Langkah 2: Menata Menu dengan CSS Flexbox

Secara bawaan, kode HTML berformat daftar (<ul> dan <li>) akan tampil menurun ke bawah lengkap dengan titik (bullet). Kita harus "menjinakkannya" menggunakan CSS agar berjajar rapi ke samping secara horizontal.

Cari kode ]] Header Bawaan atau </style> di dalam editor HTML Anda, kemudian tempelkan kode CSS berikut di atasnya (bisa diletakkan di bawah kumpulan CSS header dari tutorial Bagian 1):

/* Mengatur wadah utama navigasi */
.desktop-menu ul {
  list-style: none; /* Menghilangkan titik (bullet) */
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  gap: 24px; /* Jarak renggang antar menu */
}

/* Mengatur estetika teks link menu */
.desktop-menu ul li a {
  text-decoration: none;
  color: #333333;
  font-family: 'Segoe UI', Arial, sans-serif;
  font-weight: 600;
  font-size: 15px;
  padding: 8px 12px;
  border-radius: 6px;
  transition: all 0.3s ease; /* Transisi halus saat di-hover */
}

/* Efek interaktif (Hover) menggunakan variabel merah kemerdekaan dari Bagian 1 */
.desktop-menu ul li a:hover {
  color: var(--merah-ri);
  background-color: #fff0f0; /* Efek sorot (highlight) merah sangat muda */
}

/* Desain khusus untuk tombol "Kontak" agar menonjol sebagai CTA */
.desktop-menu ul li a.btn-kontak {
  background-color: var(--merah-ri);
  color: #ffffff;
  box-shadow: 0 4px 6px rgba(230, 0, 0, 0.2);
}

.desktop-menu ul li a.btn-kontak:hover {
  background-color: #cc0000; /* Warna merah menggelap saat disentuh */
  transform: translateY(-2px);
  color: #ffffff;
}

/* PERSIAPAN MENU MOBILE: Menyembunyikan menu ini di layar HP */
@media screen and (max-width: 768px) {
  .desktop-menu {
    display: none;
  }
}

Memahami Cara Kerja Kode Tersebut

Display Flex & Gap: Properti display: flex; memaksa elemen daftar yang awalnya vertikal menjadi horizontal, sedangkan gap: 24px; memastikan ada jarak napas yang elegan antar menu tanpa harus pusing mengatur margin.
Variabel CSS: Perhatikan kode var(--merah-ri). Menu ini secara otomatis membaca warna merah kemerdekaan yang sudah kita deklarasikan di elemen :root pada tutorial Bagian 1. Ini membuat warna template Anda selalu konsisten.
Media Query (Persiapan Mobile): Di bagian paling bawah kode CSS, kami menyematkan perintah untuk menyembunyikan .desktop-menu pada layar di bawah 768 piksel.

Kenapa disembunyikan di layar HP? Karena menu horizontal yang dipaksakan masuk ke layar kecil akan merusak tata letak (membuat teks berdesakan atau tumpah ke bawah).

Sebagai solusinya, pada tutorial Bagian 3, kita akan membuat menu khusus pengguna smartphone, yaitu ikon Hamburger Menu yang jika diklik akan membuka laci menu geser (drawer navigation) yang sangat elegan!

Pastikan Anda menyimpan pengaturan tema ini dan cek tampilannya di perangkat komputer atau laptop Anda. Jika ada menu yang jaraknya kurang pas atau warnanya tidak keluar, jangan ragu untuk berdiskusi di kolom komentar. Sampai jumpa di Bagian 3!

Cari Blog Ini

Blogger Theme Tutorial