Cara Membuat Garis Pada Header Median UI versi Mobile

Saifulah.id - Header template Median UI versi 1.5 menurut saya masih memiliki kekurangan. Ada 4 bagian yang bisa dimodifikasi agar tampilannya lebih modern dan menarik. Tapi sebelum masuk ke tutorialnya, saya jelaskan terlebih dahulu apa saja yang bisa kita ubah di bagian Header.

Bagian yang bisa diubah

1. 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. 👉 Tutorialnya
2. Border Header
   Setelah menggunakan Sticky Header, 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 astetik.
3. Navigation Profile
   Dibagian pojok kanan atas, ada icon Profile yang hanya muncul di Homepage (halaman utama). Jika dibuka di Postingan dan Halaman, icon Profile ini akan menghilang. Padahal akan lebih bagus jika icon ini tetap terlihat di semua halaman.
   
4. Dark Mode (Mode Malam)
   Median UI memiliki fitur Dark Mode untuk mencegah mata kita lelah karena terlalu lama membaca artikel di Blog. Fitur ini berfungsi dengan baik, hanya saja simbolnya perlu diganti dengan lambang Bulan dan Matahari agar lebih realistis. Icon yang tepat akan mempermudah pengunjung memahami fitur yang ada tanpa perlu dijelaskan atau dituliskan.

Nah, dari ke-4 hal di atas, bagian pertama (Sticky Header) sudah saya buatkan tutorialnya. Jadi, kali ini saya akan membahas bagian yang kedua, yaitu membuat garis Border pada Header Median UI 1.5

CARA MEMBUAT GARIS HEADER MEDIAN UI 1.5

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

Hasilnya

Setelah diberi garis, tampilannya udah agak mendingan bukan? Tapi tunggu dulu, kita bisa mengubah tampilannya jauh lebih bagus daripada ini dengan cara menambahkan bayangan.

Bayangan berfungsi untuk memperjelas posisi widget, apakah berada menimpa atau ditimpa widget lain.

Menambahkan bayangan pada widget Blog juga bisa memberikan kesan Tiga Dimensi (3D) yang lebih memukau.

CARA MEMBUAT BAYANG HEADER MEDIAN UI 1.5

1. Buka Dashboard Blogger
2. Klik Tema
3. Tekan icon Segitiga Terbalik
4. Pilih Edit HTML

   
   
   
5. Cari kode header{position:
   
6. Tambahkan kode ;box-shadow: 0px 2px 8px 0px rgba(0,0,0,0.3) sebelum tutup kurung kurawal
   

   Sebelumnya:
   header{position:sticky;border-bottom:2px solid var(--content-border)}
   
   Sesudahnya:
   header{position:sticky;border-bottom:2px solid var(--content-border);box-shadow: 0px 2px 8px 0px rgba(0,0,0,0.3)}

7. Simpan Tema

Demikian Cara Membuat Garis dan Bayangan Pada Header Median UI versi Mobile. Semoga bermanfaat.