Cara Menghasilkan Header Median Ui Menjadi Sticky Header

Saifulah.id - Lagi-lagi Template Median UI menghasilkan saya heran, entah kenapa di saat nyaris semua situs web besar dan blog terkenal menggunakan sticky header, justru Median UI menyembunyikan headernya di performa mobile. 😅 Kayak performa blog jaman dahulu lagi dong!

Menurut saya, sticky header itu penting supaya hadirin menyaksikan logo dan hidangan navigasi kita di atas layar. Artinya sticky header dapat dipakai untuk tujuan Branding.

Setiap kali hadirin membuka blog kita, tanpa sadar otak mereka akan merekam dan mengerti logo di header. Hal ini bisa menjadi identitas yang memunculkan loyalitas di saat mereka mencari postingan lain.

Saya kurang tahu niscaya argumentasi pembuat template menegaskan hide header ini. Tapi kemungkinan besar sebab hal berikut:

1. Mungkin sebab hidangan Navigasi Mobile telah ada di bawah, jadi si pembuat template merasa header tidak di butuhkan lagi.
2. Mungkin sebab telah ada sticky notifikasi, jadi beliau takut menghasilkan performa halaman jadi sempit.
3. Mungkin juga beliau lupa atau tergesa-gesa buat templatenya jadi ketinggalan satu isyarat penting.
4. Mungkin sebab sengaja, supaya template Median UI tidak begitu tepat agar, orang lain mau berbelanja template buatannya yang lain. (Strategi Marketing)
5. Atau mungkin sebab selera.

Terlepas dari kemungkinan itu semua, tentunya saya selaku blogger biasa tidak bisa berbuat banyak. Cukup berterima kasih terhadap Creator yang telah melakukan pekerjaan keras menghasilkan template Median UI modern ini.

Masalah performa yang kurang yummy dipandang, itu bisa kita ubah sendiri dengan sedikit modifikasi. Berikut saya berikan bimbingan cara memodifikasi header Median UI.

CARA MEMBUAT STICKY HEADER MEDIAN UI

1. Buka Dashboard Blogger
2. Klik Tema
3. Tekan icon Segitiga Terbalik
4. Pilih Edit HTML

   
   
   
5. Lalu cari isyarat @media screen and (max-width:896px) jika tidak ketemu coba cari kode (max-width:896px) atau isyarat header{position:relative

   

   
   
6. Kemudian ganti kata relative menjadi sticky
   

   Sebelum:
   header{position:relative;border-bottom:0}
   
   Sesudah:
   header{position:sticky;border-bottom:0}

7. Simpan Tema

Selanjutnya, tinggal tes performa blog kalian melalui smartphone. Gampang bukan?

Selain bimbingan di atas, ada beberapa bimbingan lain tentang Median UI yang bisa di cek disini

Tweet