Cara Membuat Header Median UI Menjadi Sticky Header

tutorial membuat header median ui menjadi sticky header

guntur.eu.org - Seperti yang kita ketahui template Median UI v1.5 masih menggunakan header format relative membuat headernya tidak terlihat di tampilan mobile dan komputer ini salah kekurangan yang ada di median ui menurut saya.

Jika saja pembuat median ui menggunakan header sticky tentu itu sangat bagus apalagi fungsi ini sangat berperan bagi kemudahan pengunjung blog dalam mencari sesuatu di bagian navigasi dan pencarian.

Menurut pandangan saya bisa saja alasan pembuat template ini tidak menggunakan header sticky di median ui karena beberapa kemungkinan untuk alasan pastinya saya tidak tahu, opini saya bisa saja karena alasan berikut.

  1. Bisa saja karena menu Navigasi Mobile sudah ada di bawah, jadi si pembuat template berpikir header tidak di perlukan lagi.
  2. Bisa saja karena sudah ada sticky notifikasi, jadi pembuat takut membuat tampilan halaman jadi terlihat sempit.j
  3. Karena sengaja, agar template Median UI tidak begitu sempurna agar, orang lain mau membeli template buatannya yang lain. (Strategi Marketing, i don't now.)
  4. Atau mungkin memang sudah dirancang seperti itu.

Ini hanya sebatas opini saya, terlepas dari itu saya berterimakasih kepada pembuat template ini sudah berusaha keras membuat template median ui walau ada kurang saya sebagai pengguna juga perlu bersyukur.

Walau begitu untuk masalah header ini bisa diatasi dengan sedikit modifikasi template, nah untuk itu tutorial cara membuat header median ui menjadi sticky header saya bagikan untuk itu langsung saja ketutorialnya.

Cara Membuat Sticky Header Median UI

Seperti biasa login terlebih dahulu ke akun blog anda jika sudah ikuti langkah-langkah berikut ini.

  1. Buka Dashboard blogger.com
  2. Pilih menu Tema
  3. Klik icon segitiga terbalik
  4. Tekan Edit HTML
    pilih menu edit html
  5. Temukan kode @media screen and (max-width:896px) atau jika tidak ketemu cari kode kedua (max-width:896px)
  6. Ada kode header{position:relative dideretan kode diatas untuk memudahkan pencarian tekan CTRL F di keyboard anda.
  7. Gantikan kata di position:relative (relative ganti sticky) contoh:
  8. Sebelum diganti:
    header{position:relative;border-bottom:0}
    Sesudah diganti:
    header{position:sticky;border-bottom:0}
  9. Sebagai pelengkap gantikan nilai border-bottom:0 menjadi 2px solid var(--content-border) 
  10. Sebelum:
    header{position:sticky;border-bottom:0}
    Sesudah:
    header{position:sticky;border-bottom:2px solid var(--content-border)}
  11. Fungsinya agar header terilhat bergaris dan berbayang wajib dipasang ya.
  12. Klik Simpan Tema
  13. dan Cek hasilnya.

Catatan

Kode CSS diatas yang di bold diganti sesuai petunjuk diatas jadi pastikan mengikuti step by step nya agar tidak terjadi kesalahan.

Untuk hasilnya bisa di cek langsung header akan otomatis sudah sticky bagaimana mudah bukan mengubah nya? demikianlah artikel tutorial membuat header median ui menjadi sticky header dengan sedikit modifikasi.