Header Utama dan Header Baca Berbeda

 

Data ini diambil dari Google

Untuk membuat Header utama dan header halaman baca (postingan) di Blogger, Anda bisa melakukan beberapa cara, yaitu menggunakan widget bawaan untuk navigasi dan logo, serta mengedit kode HTML dan CSS melalui tema atau widget jika ingin tampilan yang lebih kustom. 

1. Menggunakan Widget Bawaan (Tanpa Edit HTML)

Cara ini paling mudah dan cocok untuk pemula. 

• Navigasi (Menu):

  • Buka dasbor Blogger Anda.
  • Masuk ke Tata Letak > Tambahkan Gadget. 
  • Pilih gadget Daftar Halaman untuk membuat menu navigasi utama. 
  • Pilih halaman yang sudah Anda buat untuk ditampilkan, lalu atur urutannya. 
  • Klik Simpan untuk membuat menu di header. 
• Mengatur Logo:

  • Masuk ke Tata Letak > Header. 
  • Pilih Pilih File untuk mengunggah logo Anda. 
  • Centang opsi Alih-alih Judul dan Deskripsi jika ingin logo menggantikan judul blog. 
  • Klik Simpan. 

2. Mengedit Kode HTML dan CSS (Lebih Lanjut)

Untuk membuat tampilan header yang lebih spesifik, Anda perlu masuk ke editor kode. 

• Masuk ke Editor Tema:
  • Buka dasbor Blogger Anda. 
  • Pilih Tema > Edit HTML. 
• Menyisipkan Kode Header Utama (di Bagian Tema):
  • Anda akan melihat kode HTML dari tema blog Anda. 
  • Cari bagian <header> di dalam kode tema. 
  • Di dalam tag <header>, Anda bisa menambahkan elemen seperti logo (<img>), judul blog (<h1> atau <div>), dan navigasi menu. 
  • Untuk membuat header halaman baca, Anda bisa menambahkan elemen <h1> untuk judul postingan di dalam tag <header> pada bagian template postingan. 
• Menyisipkan Kode CSS untuk Styling:
  • Di dalam editor HTML, cari bagian <b:skin> atau <style> untuk menambahkan atau mengubah CSS. 
  • Gunakan CSS untuk mengatur ukuran, warna, dan tata letak elemen header. 
• Simpan Perubahan:
  • Setelah selesai mengedit, klik Simpan. 

Contoh Kode Sederhana untuk Header Postingan (HTML)

Kode

<header class='post-header'>
  <h1 class='post-title'>
    <<%= post.title %></h1>
</header>

Anda kemudian bisa menerapkan gaya CSS pada <header class='post-header'> agar tampilannya berbeda di halaman postingan. 

Tips Tambahan

• Hierarki Heading:

  Gunakan <h1> untuk judul utama dan <h2> untuk subjudul. Hindari loncat dari <h1> langsung ke <h3> untuk menjaga SEO dan struktur yang baik. 
• Backup Tema:

  Sebelum mengedit HTML, selalu cadangkan (backup) tema Anda untuk menghindari kehilangan desain asli. 
• Gunakan CSS untuk Kustomisasi:

  Untuk mengontrol ukuran dan warna teks, gunakan properti CSS seperti font-size, color, dan margin.