Tutorial Membuat Banner Header Tematik HUT ke-81 RI Keren di Blogger (Bagian 1)

Setelah sebelumnya kita sukses membedah berbagai filosofi dan potensi visual dari kandidat logo sayembara perayaan kemerdekaan, sekarang saatnya kita masuk ke langkah praktik nyata di dasbor Blogger.

Menjelang Hari Kemerdekaan, banyak blogger ingin menghias situs mereka agar terasa relevan dengan atmosfer perayaan nasional. Namun, template bawaan Blogger sering kali membatasi kreativitas kita. Logo situs dikunci di tengah atau ukurannya menjadi terlalu kecil, sehingga terkesan seperti blog pribadi yang kaku. Situs web media atau blog profesional umumnya menggunakan struktur header full-width (lebar penuh) dengan logo tematik diletakkan secara presisi di sisi kiri.

Untuk menyambut momentum HUT ke-81 RI kali ini, kami akan memandu Anda merombak total tata letak header tersebut. Agar panduan ini mudah dipahami dan tidak terlalu panjang, kami membagi tutorial pembuatan header profesional ini menjadi beberapa bagian.

Pada Bagian 1 ini, kita akan fokus membongkar kode HTML dan menyuntikkan CSS dasar untuk membuat fondasi header lebar penuh, serta memasang mockup logo persegi bertema kemerdekaan di sisi kiri.

📢 PENGUMUMAN SERI TUTORIAL HEADER:

Simpan halaman ini untuk memantau pembaruan tautan tutorial kelanjutannya:

Bagian 2: Cara Membuat Menu Navigasi Horizontal Responsive (Desktop Version) di Samping Logo Blogger.
Bagian 3: Panduan Modifikasi Hamburger Menu dan Drawer Navigation Mobile di Blogger.

Langkah 1: Siapkan Aset Logo Kemerdekaan Anda

Sebagai bahan praktik untuk menyemarakkan momen kemerdekaan ini, siapkan sebuah file gambar logo dengan rasio persegi (misalnya 100x100 piksel atau 200x200 piksel). Kita akan menggunakan logo terpilih dari HUT ke-81 RI.

Tips Performa: Agar kecepatan loading halaman blog Anda tetap berada di zona hijau (Core Web Vitals), pastikan file logo tersebut sudah dikonversi ke format WebP. Format ini jauh lebih ringan daripada PNG/JPEG konvensional namun tetap menjaga ketajaman detail logo Anda saat tampil di layar.

Langkah 2: Mengganti Struktur HTML Header Bawaan

Kita akan mengganti struktur header lama menggunakan elemen semantik HTML5 yang bersih dan ramah SEO. Struktur baru ini disiapkan menggunakan metode Flexbox agar logo kemerdekaan Anda berada di kiri dan menyisakan ruang horizontal di kanan untuk menu navigasi nantinya.

Masuk ke dasbor Blogger > pilih menu Tema (Theme).
Klik ikon panah kecil di sebelah "Sesuaikan", lalu pilih Edit HTML.
Cari letak kode <header> bawaan template Anda (atau letakkan tepat di bawah tag <body>).
Ganti atau pasang struktur HTML baru berikut ini:

<header class='main-header-full'>
  <div class='header-container'>
    
    <!-- Sisi Kiri: Penempatan Logo Kemerdekaan Persegi -->
    <div class='header-logo'>
      <a href='/'>
        <img alt='Logo HUT RI Blog' height='60' src='ALAMAT_URL_LOGO_KEMERDEKAAN.webp' width='60'/>
      </a>
    </div>

    <!-- Sisi Kanan: Area Navigasi (Akan Kita Isi pada Bagian 2) -->
    <div class='header-navigation-placeholder'>
      <!-- Kumpulan menu utama akan diletakkan di sini -->
    </div>

  </div>
</header>

Catatan: Ganti ALAMAT_URL_LOGO_KEMERDEKAAN.webp dengan tautan URL gambar logo persegi yang sudah Anda unggah.

Langkah 3: Mengatur Tata Letak dengan CSS Tematik Kemerdekaan

Sekarang, kita akan mengatur agar header tersebut meregang penuh melintasi layar komputer maupun ponsel, sekaligus menyuntikkan skema warna yang selaras dengan tema Hari Kemerdekaan.

Cari kode ]]Header Bawaan atau </style> di dalam editor HTML Blogger Anda, kemudian tempelkan kode CSS berikut tepat di atasnya:

:root {
  --bg-header: #ffffff;
  --merah-ri: #e60000; /* Kode warna merah resmi perayaan kemerdekaan */
  --border-color: #eceff1;
}

/* Memaksa header meregang penuh 100% lebar layar */
.main-header-full {
  width: 100%;
  background-color: var(--bg-header);
  border-top: 4px solid var(--merah-ri); /* Aksen garis merah kemerdekaan di bagian paling atas */
  border-bottom: 1px solid var(--border-color);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04);
  position: relative;
  z-index: 999;
}

/* Membatasi lebar konten di tengah agar tetap sejajar dengan artikel */
.header-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 12px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between; /* Logo dikunci di kiri, ruang menu di kanan */
}

/* Optimasi ukuran logo persegi agar pas di header */
.header-logo img {
  display: block;
  max-height: 50px;
  width: auto;
  height: auto;
  object-fit: contain;
}

/* Ruang kosong untuk persiapan menu horizontal pada tutorial berikutnya */
.header-navigation-placeholder {
  display: flex;
  align-items: center;
}

Kesimpulan & Langkah Selanjutnya

Dengan menerapkan kode di atas, Anda telah berhasil merombak fondasi header blog Anda menjadi lebih profesional dengan posisi logo kemerdekaan yang presisi di sebelah kiri, lengkap dengan aksen garis merah premium di bagian atas header.

Langkah ini baru separuh jalan. Tampilan ini belum lengkap tanpa adanya menu navigasi di sisi kanan logo. Pada Bagian 2, kita akan langsung mengisi area kosong tersebut dengan susunan menu horizontal responsive khusus untuk pengguna desktop.

Pastikan Anda menyimpan perubahan tema Anda dan periksa apakah logo kemerdekaan Anda sudah muncul di sebelah kiri dengan benar. Jika Anda menemui kesulitan struktur kode pada template tertentu, tuliskan pertanyaan Anda di kolom komentar!

Cari Blog Ini

Blogger Theme Tutorial