🔔 Aktifkan notifikasi disini Google News

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
    Cara Mengubah Posisi Judul Median UI Jadi di Tengah

  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
    Cara Mengubah Posisi Judul Median UI Jadi di Tengah

  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.

Mau donasi lewat mana?

SeaBank - Saifullah (9016-9529-0071)

BRI - Saifullah (05680-10003-81533)

BCA Blu - Saifullah (007847464643)

JAGO - Saifullah (1060-2675-3868)

BSI - Saifullah (0721-5491-550)
Merasa terbantu dengan artikel ini? Ayo dukung dengan memberikan DONASI. Tekan tombol merah.
Seorang Guru Bahasa Inggris, Kreator Digital, Editor, Publisher, Advertiser, Blogger, Youtuber, Distributor, Desain Grafis, Web Developer, dan Programmer.

10 komentar

Popular Emoji: 😊😁😅🤣🤩🥰😘😜😔😪😭😱😇🤲🙏👈👉👆👇👌👍❌✅⭐
  1. Mantap bang, terimakasih
    1. Sekalian mau nanya , untuk ukuran gambar pada header brp yah?
    2. Ukuran gambar logo header Median UI 320x86
  2. Bang cara buat TOC sperti median UI gmna ya ?
    untuk diterapkan di template blogger yg lain.
    Terimkasih
    1. Kalau ada waktu nanti saya bagikan scriptnya.
  3. mas ceritanya saya abis nonaktifkan navigasi mobile, tapi di bawah footer ada kayak space kosong gitu, hapus nya gmnya ya mas? maaf mungkin sedikit oot
  4. tutor bikin header lengkung seperti Gratisun bang
    1. Tutorialnya sudah dibuatkan, cek postingan terbaru ya kak.
  5. klo shadow buat dekstop y gmn gan?
    1. Cari kode ini /* Header Section */ Lalu tambahkan kode untuk penambah garis atau bayang sesuai artikel di atas kode ini header{disini
Centang Beri Tahu Saya untuk mendapatkan notifikasi ketika komentar kamu sudah di jawab.
Parse:

Gambar Quote Pre Kode



  • Home


  • Follow


  • MENU


  • Share


  • Comment
Cookie Consent
Kami menyajikan cookie di situs ini untuk menganalisis lalu lintas, mengingat preferensi Anda, dan mengoptimalkan pengalaman Anda.
Oops!
Sepertinya ada yang salah dengan koneksi internet Anda. Harap sambungkan ke internet dan mulai menjelajah lagi.