Cara menghilangkan efek sticky header pada template versi terbaru blogger

Cara Aman Menghilangkan Efek Sticky Header di Template Blogger Terbaru

Beberapa template modern Blogger memiliki efek sticky header, yaitu bagian kepala (header) blog tetap menempel di atas saat halaman digulir. Efek ini bisa ditemukan di template berikut:

• Contempo
• Emporio
• Soho
• Notable
• Essentials

Sticky artinya "lengket". Header akan tetap berada di atas halaman ketika halaman digulir ke bawah, dan ikut bergerak naik saat halaman digulir ke atas.

Cara Menghilangkan Efek Sticky

Berikut adalah kode CSS yang mengatur efek sticky pada 5 template Blogger modern yang saya sebutkan di atas:

.centered-top-container.sticky {
  left: 0;
  position: fixed;
  right: 0;
  top: 0;
  width: auto;
}

✔ Cara yang Paling Disarankan

Cukup ubah nilai top dari 0 menjadi -10. Ini adalah metode terbaik karena tidak merusak bagian lain dari halaman blog.

.centered-top-container.sticky {
  left: 0;
  position: fixed;
  right: 0;
  top: -10;
  width: auto;
}

Efek: Sticky header akan hilang, namun fungsi menu navigasi dan tombol pencarian tetap berjalan normal.

✘ Cara lain juga bisa tapi Tidak Disarankan.

1. Mengubah position: fixed; menjadi relative;

.centered-top-container.sticky {
  left: 0;
  position: relative;
  right: 0;
  top: 0;
  width: auto;
}

Kelemahan: Walau efek sticky hilang, ini menyebabkan bug baru di bagian footer blog seperti footer ikut "menempel" atau tampak lompat saat scroll.

2. Atau, (tidak disarankan) menambahkan kode css (override) dengan display: none !important;

.centered-top-container.sticky {
  display: none !important;
}

Kelemahan fatal: Ini akan mempengaruhi seluruh header, termasuk menu navigasi dan tombol pencarian. Akibatnya, pengguna tidak bisa klik menu atau melakukan pencarian! Penambahan kode baru berakibat overade dan menambah DOM.

Kesimpulan

• Gunakan metode ubah top: 0 menjadi top: -10 — ini adalah solusi paling aman.
• Jangan gunakan position: relative karena bisa mengganggu tampilan footer.
• Hindari display: none !important; karena akan mematikan fungsi header blog sepenuhnya.
• Perubahan ini hanya berlaku untuk template Blogger terbaru (Contempo, Emporio, dll).

Semoga membantu! Kami percaya berbagi itu berharga.

FAQ (Pertanyaan Umum)

Apa itu sticky header?

Sticky header adalah bagian kepala blog yang tetap terlihat di atas saat halaman digulir ke bawah.

Apakah semua template Blogger punya sticky header?

Tidak. Hanya template terbaru seperti Contempo, Emporio, Soho, Notable, dan Essentials yang menyertakan fitur ini.

Cara paling aman menghilangkan sticky?

Ubah kode top: 0 menjadi top: -10 dalam CSS.

Mengapa tidak boleh pakai display: none !important;?

Karena itu menyembunyikan seluruh bagian header — termasuk tombol menu dan pencarian.

Apa akibat jika saya ubah jadi position: relative;?

Efek sticky memang hilang, tapi bisa menimbulkan gangguan visual pada bagian bawah blog (footer).