🔔 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)

JAGO - Saifullah (1060-2675-3868)

BSI - Saifullah (0721-5491-550)
Merasa terbantu dengan artikel ini? Ayo dukung dengan memberikan DONASI. Tekan tombol merah.
Selanjutnya kalian mau dibuatkan artikel tentang apalagi? Tuliskan pada kolom komentar di bawah ini

3 komentar

Berkomunikasi adalah salah satu cara untuk saling memahami, yuk tinggalkan komentar :)
Popular Emoji
😊😁😅🤣🤩🥰😘😜😔😥😪😭😱🤭😇🤲🙏👈👉👆👇👌👍❤🤦‍♂️❌✅⭐
Centang Beri Tahu Saya untuk mendapatkan notifikasi ketika komentar kamu sudah di jawab.
Parse:

Gambar Quote Pre Kode
  1. Mantap, ini tutorial yang aku cari-cari.
    1. Sip 👍
  2. Bang bahas template plus ui🙏

Daftar isi



  • Home


  • Follow


  • MENU


  • Share


  • Comment
Oops!
Sepertinya ada yang salah dengan koneksi internet Anda. Harap sambungkan ke internet dan mulai menjelajah lagi.
AdBlock Detected!
Kakak pakai plugin pemblokir iklan ya? Tolong kecualikan website ini dalam pemblokiran ya. Karena kami butuh penghasilan dari iklan untuk terus mengelola website ini agar bisa update artikel bermanfaat. Makasih ya 😊
Site is Blocked
Sorry! This site is not available in your country.