🔔 Aktifkan notifikasi disini Google News

Cara Membuat Header Melengkung Pada Tampilan Mobile Median UI

Cara Membuat Header Melengkung Pada Tampilan Mobile Median UI
Saifullah.id
 - Header Median UI secara bawaan sangat datar dan tidak memiliki animasi atau efek yang berkesan. Makannya Header pada template ini cukup banyak saya poles agar terlihat lebih menarik. 


Pada artikel sebelumnya, ada 5 tutorial yang sudah saya bagikan untuk memperbaiki tampilan Header Median UI, diantaranya:
Nah, sekarang saya akan menambahkan tutorial ke 6 tentang Header ini lagi, yaitu bagaimana cara membuat Header menjadi melengkung mirip poni iPhone. (DEMO)

Cara Membuat Header Melengkung Pada Tampilan Mobile Median UI

Cara Bikin Header Median UI Melengkung

Berhubung saat ini masih ada pengguna Median UI 1.5 dan Median UI 1.6, jadi akan saya buatkan 2 tutorial sesuai versinya.

Khusus Tempalte Median UI 1.5

  1. Buka Dashboard Blogger
  2. Klik Tema
  3. Tekan icon Segitiga Terbalik
  4. Pilih Edit HTML
    Cara Membuat Header Median UI Melengkung Pada Tampilan Mobile

  5. Cari kode header{width:100%
    header{width:100%;position:sticky;border-bottom:2px solid var(--content-border);box-shadow: 0px 2px 8px 0px rgba(0,0,0,0.3)}
  6. 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)}
  7. Ubah angka 10px 10px sesuai keinginan, semakin kecil angkanya maka semakin sedikit lengkungannya.
  8. Simpan Tema
  9. Selesai

Khusus Template Median UI 1.6

  1. Buka Dashboard Blogger
  2. Klik Tema
  3. Tekan icon Segitiga Terbalik
  4. Pilih Edit HTML
    Cara Membuat Header Median UI Melengkung Pada Tampilan Mobile

  5. Cari kode /* Header */ header{border-bottom:none} .headCn
    @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)}
  6. Lalu tambahkan kode border-radius: 0 0 20px 20px; di dalam kurung kurawal
    @media screen and (max-width:640px){/* Header */ header{border-bottom:none} .headCn{border-radius: 0 0 20px 20px;height:47px;border-bottom: 2px solid #eee;box-shadow: 0px 2px 8px 0px rgba(0,0,0,0.3)}
  7. Ubah angka 20px 20px sesuai keinginan, semakin besar angkanya maka semakin besar lengkungannya.
  8. Simpan Tema
  9. Selesai
Demikian cara melengkungkan pinggir Header template Blogger Median UI. Semoga bermanfaat. Untuk melihat hasilnya silakan tekan tombol di bawah.

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.

3 komentar

Popular Emoji: 😊😁😅🤣🤩🥰😘😜😔😪😭😱😇🤲🙏👈👉👆👇👌👍❌✅⭐
  1. Mantap, ini tutorial yang aku cari-cari.
    1. Sip 👍
  2. Bang bahas template plus ui🙏
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.