Cara Membuat Header Melengkung Pada Tampilan Mobile Median UI

Cara Membuat Header Melengkung Pada Tampilan Mobile Median UI
Saifulah.id
 - Header Median UI secara bawaan sangat datar dan tidak memiliki animasi atau efek yang berkesan. Makannya Header pada template ini cukup banyak saya poles agar terlihat lebih menarik. 


Pada artikel sebelumnya, ada 5 tutorial yang sudah saya bagikan untuk memperbaiki tampilan Header Median UI, diantaranya:
Nah, sekarang saya akan menambahkan tutorial ke 6 tentang Header ini lagi, yaitu bagaimana cara membuat Header menjadi melengkung mirip poni iPhone. (DEMO)

Cara Membuat Header Melengkung Pada Tampilan Mobile Median UI

Cara Bikin Header Median UI Melengkung

Berhubung saat ini masih ada pengguna Median UI 1.5 dan Median UI 1.6, jadi akan saya buatkan 2 tutorial sesuai versinya.

Khusus Tempalte Median UI 1.5

  1. Buka Dashboard Blogger
  2. Klik Tema
  3. Tekan icon Segitiga Terbalik
  4. Pilih Edit HTML
    Cara Membuat Header Median UI Melengkung Pada Tampilan Mobile

  5. Cari kode header{width:100%
    header{width:100%;position:sticky;border-bottom:2px solid var(--content-border);box-shadow: 0px 2px 8px 0px rgba(0,0,0,0.3)}
  6. Tambahkan kode border-radius:0 0 10px 10px; di dalam kurung kurawal
    header{width:100%;border-radius:0 0 10px 10px;position:sticky;border-bottom:2px solid var(--content-border);box-shadow: 0px 2px 8px 0px rgba(0,0,0,0.3)}
  7. Ubah angka 10px 10px sesuai keinginan, semakin kecil angkanya maka semakin sedikit lengkungannya.
  8. Simpan Tema
  9. Selesai

Khusus Template Median UI 1.6

  1. Buka Dashboard Blogger
  2. Klik Tema
  3. Tekan icon Segitiga Terbalik
  4. Pilih Edit HTML
    Cara Membuat Header Median UI Melengkung Pada Tampilan Mobile

  5. Cari kode /* Header */ header{border-bottom:none} .headCn
    @media screen and (max-width:640px){/* Header */ header{border-bottom:none} .headCn{height:47px;border-bottom: 2px solid #eee;box-shadow: 0px 2px 8px 0px rgba(0,0,0,0.3)}
  6. Lalu tambahkan kode border-radius: 0 0 20px 20px; di dalam kurung kurawal
    @media screen and (max-width:640px){/* Header */ header{border-bottom:none} .headCn{border-radius: 0 0 20px 20px;height:47px;border-bottom: 2px solid #eee;box-shadow: 0px 2px 8px 0px rgba(0,0,0,0.3)}
  7. Ubah angka 20px 20px sesuai keinginan, semakin besar angkanya maka semakin besar lengkungannya.
  8. Simpan Tema
  9. Selesai
Demikian cara melengkungkan pinggir Header template Blogger Median UI. Semoga bermanfaat. Untuk melihat hasilnya silakan tekan tombol di bawah.

Mau donasi lewat mana?

BRI - Saifullah (05680-10003-81533)

JAGO - Saifullah (1060-2675-3868)

BSI - Saifullah (0721-5491-550)
Merasa terbantu dengan artikel ini? Ayo balas dengan donasi. Tekan tombol merah.