Cara Membuat Header Melengkung Pada Tampilan Mobile Median UI

Saifullah.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:

1. Membuat Sticky Header
2. Menambahkan Garis Header
3. Menambahkan Bayang Header
4. Mengubah Warna Header
5. Memperkecil Ukuran Header

Nah, sekarang saya akan menambahkan tutorial ke 6 tentang Header ini lagi, yaitu bagaimana cara membuat Header menjadi melengkung mirip poni iPhone. (DEMO)

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
   
   
   
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
   
   
   
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.

Median UI 1.5 Median UI 1.6