Cara Mempertahankan Header di Tumblr

Menjaga Header Tumblr Tetap Terlihat Saat Scrolling

Header blog Tumblr Anda adalah tempat yang sempurna untuk menampilkan merek atau logo. Namun, ketika pengunjung menggulir halaman, header biasanya menghilang. Dengan sedikit pengeditan kode HTML tema, Anda dapat membuat header tetap terlihat, bahkan saat halaman digulir.

Langkah-langkah Edit Header

1. Buka Akun dan Pengaturan
Masuk ke akun Tumblr Anda dan buka Pengaturan melalui dashboard.

2. Pilih Blog dan Buka Customisasi
Pilih blog yang ingin Anda ubah di daftar kiri, lalu klik Customize untuk masuk ke layar kustomisasi.

3. Edit HTML Tema
Di bagian bawah layar, klik Edit HTML untuk membuka editor kode tema.

4. Temukan Bagian Header
Scroll ke bagian kode yang mendefinisikan header. Pada tema seperti Rubber Cement atau Plaid, header biasanya di dalam tag <h1>. Pada tema yang menggunakan gambar header seperti Redux, cari selector #wrapper #title.

5. Tambahkan CSS Fixed Position
Tambahkan baris berikut di dalam blok header: position: fixed; (tanpa tanda kutip).
Ini membuat header tetap di tempat ketika halaman digulir.

Di bawahnya, tambahkan: z-index: 100; (juga tanpa tanda kutip).
Nilai z-index memastikan header selalu berada di atas elemen lain seperti gambar atau video.

6. Pratinjau dan Simpan
Tekan Update Preview lalu gulir halaman menggunakan scroll bar atau roda mouse untuk memastikan header tetap di tempat. Jika sudah sesuai, klik Save untuk menyimpan perubahan.

Tips Tambahan

Beberapa tema mungkin menyebabkan header menutupi konten posting atau sidebar. Tambahkan baris berikut di bagian body atau content: margin-top: 300px; (ganti angka sesuai tinggi header Anda).
Ini akan menambah jarak di atas konten, sehingga header tidak mengganggu tampilan.