Cara Menghasilkan Garis Pada Header Median Ui Model Mobile

Sticky Header
Sticky Header yakni istilah untuk Header yang tetap melekat di layar atas walaupun halaman di scroll ke bawah. Sticky Header berfungsi untuk memperlihatkan Logo, Menu Navigasi, dan Kolom Pencarian mudah-mudahan gampang diakses dimana saja. Namun sayang, Median UI v1.5 belum menggunakan Sticky Header. 👉 Tutorialnya

Border Header
Setelah menggunakan Sticky Header, sungguh penting untuk menyertakan Border (Bingkai atau Garis Pembatas) mudah-mudahan ada pemisah antara pecahan Header dengan Body halaman. Seperti yang kita tahu, background Header dan Body sama-sama menggunakan warna putih. Jadi, bila tidak di beri garis akan terlihat seumpama menyatu. Warna yang menyatu menyebabkan performa menjadi kurang hidup dan kurang astetik.

Navigation Profile
Dibagian pojok kanan atas, ada icon Profile yang cuma timbul di Homepage (halaman utama). Jika dibuka di Postingan dan Halaman, icon Profile ini akan menghilang. Padahal akan lebih anggun bila icon ini tetap terlihat di semua halaman.

Dark Mode (Mode Malam)
Median UI memiliki fitur Dark Mode untuk menangkal mata kita letih sebab terlalu usang membaca postingan di Blog. Fitur ini berfungsi dengan baik, cuma saja simbolnya perlu diganti dengan lambang Bulan dan Matahari mudah-mudahan lebih realistis. Icon yang sempurna akan memudahkan hadirin mengetahui fitur yang ada tanpa perlu diterangkan atau dituliskan.

Nah, dari ke-4 hal di atas, pecahan pertama (Sticky Header) sudah aku buatkan tutorialnya. Jadi, kali ini aku akan membahas pecahan yang kedua, yakni menghasilkan 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 isyarat 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 dapat merubah tampilannya jauh lebih anggun dibandingkan dengan ini dengan cara menyertakan bayangan.

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

Menambahkan bayangan pada widget Blog juga dapat memamerkan 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 model Mobile. Semoga bermanfaat.

Tweet