Hallo sahabat blogger pada kesempatan kali ini saya akan berbagi tutorial cara membuat membuat header median ui melengkung pada tampilan mobile dengan mudah.
Pada tampilan bawaan median ui 1.5 maupun median ui 1.6 tidak ada animasi atau efek yang membuat saya berkesan, makanya saya pribadi sedikit mempoles template median ui yang saya pakai agar lebih cantik dan lebih menarik, seperti memperkecil header, membuat header sticky, dan lain sebagainya.
Sebenarnya tutorial ini sengaja saya buat karena ada yang request lewat email yaitu bang herry ingin di buatkan header median ui melengkung khusus di tampilan mobile saja.
Menurut saya pribadi dengan merubah header median ui menjadi melengkung itu seperti Iphone, untuk tampilannya silahkan lihat gambar di bawah ini:
Cara Membuat Header Median Ui 1.5 dan Median UI 1.6 Melengkung Pada Tampilan Mobile
Sebelum lanjut ke tutorial saya akan membagi tutorial ini menjadi 2 bagian yaitu :
- Cara Membuat Header Median Ui 1.5 Melengkung Pada Tampilan Mobile
- Cara Membuat Header Median UI 1.6 Melengkung Pada Tampilan Mobile
Cara Membuat Header Median Ui 1.5 Melengkung Pada Tampilan Mobile
- Silahkan masuk ke blog kalian lalu pilih tema dan edit html
- 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)}- Maka akan tampil kode keseluruhannya seperti di bawah ini
header{width:100%;position:sticky;border-bottom:2px solid var(--content-border);box-shadow: 0px 2px 8px 0px rgba(0,0,0,0.3)}- Tambahkan kode border-radius:0 0 10px 10px; di dalam kurung awal
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)}- Rubah angka 10px 10px sesuai selera kalian, semakin kucil angkanya maka hasilnya semakin sedikit
- Simpan tema kalian dan selesai.
Cara Membuat Header Median UI 1.6 Melengkung Pada Tampilan Mobile
- Silahkan masuk ke blog kalian lalu pilih tema dan edit html
- 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)}- Tambahkan kode border-radius: 0 0 20px 20px; di dalam kurung awal
@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)}- Rubah angka 20px 20px sesuai selera kalian, semakin besar angkanya semakin besar melengkungnya
- Simpan tema kalian dan selesai.
Demikianlah tutorial Cara Membuat Header Median Ui 1.5 dan Median UI 1.6 Melengkung Pada Tampilan Mobile, semoga bermanfaat dan terimakasih ats kunjungannya.