Cara Membuat Header Median UI Menjadi Sticky Header

Cara Membuat Header Median UI Menjadi Sticky Header
Saifulah.id
 - Lagi-lagi Template Median UI membuat saya heran, entah kenapa ketika hampir semua website besar dan blog populer menggunakan sticky header, justru Median UI menyembunyikan headernya di tampilan mobile. 😅 Kayak tampilan blog jaman dulu lagi dong!


Menurut saya, sticky header itu penting supaya pengunjung melihat logo dan menu navigasi kita di atas layar. Artinya sticky header bisa dipakai untuk tujuan Branding.

Setiap kali pengunjung membuka blog kita, tanpa sadar otak mereka akan merekam dan mengenali logo di header. Hal ini bisa menjadi identitas yang menimbulkan loyalitas saat mereka mencari artikel lain.

Saya kurang tahu pasti alasan pembuat template memilih hide header ini. Tapi kemungkinan besar karena hal berikut:
  1. Mungkin karena menu Navigasi Mobile sudah ada di bawah, jadi si pembuat template merasa header tidak di perlukan lagi.
  2. Mungkin karena sudah ada sticky notifikasi, jadi dia takut membuat tampilan halaman jadi sempit.
  3. Mungkin juga dia lupa atau buru-buru buat templatenya jadi ketinggalan satu kode penting.
  4. Mungkin karena sengaja, supaya template Median UI tidak begitu sempurna agar, orang lain mau membeli template buatannya yang lain. (Strategi Marketing)
  5. Atau mungkin karena selera.
Terlepas dari kemungkinan itu semua, tentu saja saya sebagai blogger biasa tidak bisa berbuat banyak. Cukup berterima kasih kepada Creator yang sudah bersusah payah membuat template Median UI terbaru ini.

Masalah tampilan yang kurang enak dipandang, itu bisa kita ubah sendiri dengan sedikit modifikasi. Berikut saya berikan tutorial 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
    Cara Membuat Header Median UI Menjadi Sticky Header

  5. Lalu cari kode @media screen and (max-width:896px) jika tidak ketemu coba cari kode (max-width:896px) atau kode header{position:relative
    Cara Membuat Header Median UI Menjadi Sticky Header

  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 tampilan blog kalian lewat smartphone. Gampang bukan?

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

Mau donasi lewat mana?

BRI - Saifullah (05680-10003-81533)

BCA Blu - Saifullah (007847464643)

Mandiri - Saifullah (1460019181044)

BSI - Saifullah (0721-5491-550)
Merasa terbantu dengan artikel ini? Ayo dukung dengan memberikan DONASI. Tekan tombol merah.

Penulis

Saifullah.id
PT Saifullah Digital Advantec

11 komentar

  1. ZVX-GAMING-34
    ZVX-GAMING-34
    bang perbaiki lagi artikelnya,soalnya pas di cari gak ada.
    1. Saifullah.id
      Saifullah.id
      Sudah
  2. ZVX-GAMING-34
    ZVX-GAMING-34
    ouh iya bang,tadi saya coba ko tampilan header stick postingan beda sama yang di home?
    1. Saifullah.id
      Saifullah.id
      Iya, memang gitu kalau template aslinya. Makanya harus banyak yang di edit.
  3. Misumi Makoto
    Misumi Makoto
    Terimakasih banyak min,next buat cara agar judul post pas di tengah🙏
    1. Saifullah.id
      Saifullah.id
      https://www.saifullah.id/2021/08/cara-mengubah-posisi-judul-median-ui.html
  4. User
    User
    Jadi gimana ya mas setingan nya supaya Logo header tampila di mana pun seperti Punya nya mas?
  5. Fajar Arif Rahman
    Fajar Arif Rahman
    bang tutorial biar komentar kita ada kotak kode script kaya punya abang
    1. Saifullah.id
      Saifullah.id
      Ok, nanti saya buatkan
  6. Aaron Buitenxorg
    Aaron Buitenxorg
    bang cara ganti warna yg atas nya header yg warna biru kek blog abang gmna
    1. Saifullah.id
      Saifullah.id
      Cek disini https://www.saifullah.id/2017/09/cara-mengubah-warna-address-bar-blogger.html
Popular Emoji: 😊😁😅🤣🤩🥰😘😜😔😪😭😱😇🤲🙏👈👉👆👇👌👍❌✅⭐