Deskripsi

Header Median UI secara bawaan sangat datar dan tidak memiliki animasi atau efek yang berkesan. Saya sendiri merasa melihat blog saya kurang menarik, maka dari itu header pada template ini cukup banyak saya poles agar terlihat lebih menarik

Cara Membuat Header Melengkung Pada Median UI Dan Plus UI

Karena beberapa pengguna masih menggunkan template Median UI 1.5 dan Median UI 1.6 dari Jagodesain, jadi akan saya buatkan 2 tutorial yang dibagikan oleh seorang blogger dari website Saifullah id.

Berhubung saya menggunakan Plus UI maka saya memberikan sedikit tutorial supaya header bisa melengkung juga pada mode mobile di template Plus UI dari website fineshopdesign.

Cadangkan tema terlebih dahulu untuk menghindari terjadinya kesalahan atau kegagalan pemasangan

Khusus Median UI 1.5

1. Pertama buka Dashboard Blogger
2. Selanjutnya pergi ke menu Theme atau Tema lalu pilih menu Edit HTML
3. Kemudian cari kode /* Header */ header{border-bottom:none} .headCn atau
   header{width:100% menggunakan tombol CTRL + F
4. 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)}

5. Ubah angka 10px 10px sesuai keinginan, semakin kecil angkanya maka semakin sedikit lengkungannya.

Jangan lupa support blog ini dengan cara berdonasi di Sociabuzz atau Trakteer.id

6. Kemudian simpan Theme atau Tema.
7. Selesai.

---

Khusus Median UI 1.6

1. Pertama buka Dashboard Blogger
2. Selanjutnya pergi ke menu Theme atau Tema lalu pilih menu Edit HTML
3. Kemudian cari kode /* Header */ header{border-bottom:none} .headCn atau
   @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)} menggunakan tombol CTRL + F
4. Tambahkan kode border-radius:0 0 20px 20px; di dalam kurung kurawal

   @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)}

5. Ubah angka 20px 20px sesuai keinginan, semakin kecil angkanya maka semakin sedikit lengkungannya.

Jangan lupa support blog ini dengan cara berdonasi di Sociabuzz atau Trakteer.id

6. Kemudian simpan Theme atau Tema.
7. Selesai.

---

Khusus Plus UI 2.6.3

1. Pertama buka Dashboard Blogger
2. Selanjutnya pergi ke menu Theme atau Tema lalu pilih menu Edit HTML
3. Kemudian cari kode @media screen and (max-width:640px){ /* Header */ menggunakan tombol CTRL + F
4. Lalu Ganti kode @media screen and (max-width:640px){ /* Header */ .headCn{height:var(--headerHm)} menjadi

   @media screen and (max-width:640px){/* Header */ header{border-bottom:none} .headCn{border-radius: 0 0 18px 18px;height:47px;border-bottom: 2px solid #eee;box-shadow: 0px 2px 8px 0px rgba(0,0,0,0.3)}

5. Ubah angka 18px 18px sesuai keinginan, semakin kecil angkanya maka semakin sedikit lengkungannya.

Jangan lupa support blog ini dengan cara berdonasi di Sociabuzz atau Trakteer.id

6. Kemudian simpan Theme atau Tema.
7. Selesai.

Penutup

Jangan lupa meninggalkan jejak dengan cara berkomentar, supaya admin yang menuliskan tau kalau kalian membacanya dan jika ada saran bisa kalian tulis di komentar yaa...