Cara Memodifikasi Header Pada Median UI v1.5

Pada artikel kali ini saya akan membuat beberapa langkah yang bisa dilakukan untuk memodifikasi header pada template Median UI v1.5. karena ada suatu permintaan dari salah satu sobat kita untuk membuat header menjadi keliatan melengkung. 

Di tutorial kali ini saya akan membuat beberapa langkah untuk membuat header pada Median UI v1.5 menjadi lebih elegan :

1. Membuat Sticky Header : Sticky Header adalah sebutan untuk Header yang tetap menempel di layar atas meskipun halaman di scroll ke bawah. Sticky Header berfungsi untuk menampilkan Logo, Menu Navigasi, dan Kolom Pencarian agar mudah diakses dimana saja. Namun sayang, Median UI v1.5 belum menggunakan Sticky Header
2. Membuat Garis Pada Header : Setelah Sticky Header sudah selesai, sangat penting untuk menambahkan Border (Bingkai atau Garis Pembatas) agar ada pemisah antara bagian Header dengan Body halaman. Seperti yang kita tahu, background Header dan Body sama-sama menggunakan warna putih. Jadi, kalau tidak di beri garis akan terlihat seperti menyatu. Warna yang menyatu menyebabkan tampilan menjadi kurang hidup dan kurang elegan.
3. Membuat Lengkungan Pada Header : Setelah garis header sudah di terapkan hal yang membuat header lebih elegan yaitu header agak melengkung tidak flat seperti bawaan Median UI v1.5.

Walaupun masih banyak kekurangan di template Median UI v1.5 tetapi hal tersebut tidak menjadi masalah karena bisa di modifikasi dan terima kasih kepada pembuat template Median UI karena telah membuat template yang begitu bagus. berikut tutorial memodifikasi header Median UI v1.5 :

1. Cara Membuat Sticky Header 

1. Buka Dashboard Blogger
2. Klik Tema
3. Tekan icon Segitiga Terbalik
4. Pilih Edit HTML
5. Lalu cari kode @media screen and (max-width:896px) jika tidak ketemu coba cari kode (max-width:896px) atau kode header{position:relative
   
   
   
6. Kemudian ganti kata relative dengan sticky

<!--Sebelum :->
header{position:relative;border-bottom:0}

<!--Sesudah di modifikasi :-->
header{position:sticky;border-bottom:0}

7. Lalu Simpan tema

Kemudian tes tampilan blog kalian sudah berubah apakah belum.

2. Cara Membuat Garis Pada Header

1. Buka Dashboard Blogger
2. Klik Tema
3. Tekan icon Segitiga Terbalik
4. Pilih Edit HTML
5. Cari kode header{position:
6. Lalu ubah nilai border-bottom:0 menjadi 2px solid var(--content-border)

Sebelumnya:
header{position:sticky;border-bottom:0}

Sesudahnya:
header{position:sticky;border-bottom:2px solid var(--content-border)}

7. Lalu Simpan Tema

Kemudian tes apakah sudah berhasil atau belum.

3. Cara Membuat Lengkungan Pada Header

1. Buka Dashboard Blogger
2. Klik Tema
3. Tekan icon Segitiga Terbalik
4. Pilih Edit HTML
5. Masih sama dengan cara yang kedua yaitu mencari kode header{position:
6. Kita hanya menambahkan border-radius: 10px; sebelum kode border-bottom:2px

Sebelumnya :
header{position:sticky;border-bottom:2px solid var(--content-border)}

Sesudah :
header{position:sticky; border-radius: 10px;  border-bottom:2px solid var(--content-border)}

border-radius: 10px; angka 10px bisa kalian ganti sesuai keinginan

7. Lalu Simpan Tema

Setelah semuanya selesai tampilan lebih kelihatan elegan. demikian cara memodifikasi header pada template Median UI v1.5 semoga membantu.

Sumber :
https://Saifullah.id

Baca Juga