Cara Mengubah Tampilan Homepage Median UI v1.7
Published: 2021-09-04 06:15:00

**guntureal.com** - Tampilan artikel di beranda Median UI v1.7 Original saya rasa terlihat kurang rapi dan terkesan berantakan jika dibanding menggunakan tampilan Style Card seperti versi median v1.4 sebelumnya terlihat rapi.

Entah kenapa jagodesain memilih menggunakan tampilan Style Flat di versi terbaru median ui 2021 ini, padahal banyak yang menyukai tampilan Style Card karena terlihat lebih rapi dan enak dipandang menurut saya.

Sebelumnya saya juga mencari cara agar tampilan homepage median ui yang saya gunakan sama seperti versi sebelumnya, setelah mencari-cari digoogle ketemu juga cara mengubah tampilan homepage median ui style card di artikel yang dibagikan teman sesama blogger kita yaitu saifullah.id jadi saya mendapat sumber dari blog tersebut dan saya share kembali.

Baca Juga: [Cara Mengubah Posisi Judul Median UI](https://www.wak.my.id)

Lalu bagaimana cara mengubah tampilan beranda median ui ke style card seperti diblog ini? langsung saja simak selengkapnya.
Cara Mengubah Tampilan Homepage Median UI V1.5
Seperi biasa login ke akun blogger yang ingin diubah tampilan homepage artikelnya.

    Buka Dashboard blogger.com
    Pilih menu Tema
    Klik icon segitiga tiga terbalik
    Tekan Edit HTML
    buka menu edit html

    Temukan kode /* blogPosts Section */ untuk memudahkan mencari kode tekan CTRL + F
    temukan kode /* blogposts section */ dan hapus ganti kode baru
    Gantikan kode tersebut dengan Kode Baru dibawah.

    .blogPosts{display:flex;flex-wrap:wrap; position:relative;width:calc(100% + 20px);left:-10px;right:-10px} .blogPosts.empty{width:100%;left:0} .blogPosts.empty ~ .blogPager{justify-content:flex-start} .blogPosts .hentry{padding:10px 10px 40px;border-radius:8px;border:1px solid var(--content-border);border-radius:8px;box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.1);display:block;position:relative; width:calc(33.333% - 20px); margin-left:10px;margin-right:10px;margin-bottom:10px; padding-bottom:38px} .blogPosts .hentry.noInfo, .blogPosts .hentry.product, .blogPosts div.hentry, .blogPosts .hentry.noComment{padding-bottom:0} .blogPosts .hentry.noAd .widget, .Blog ~ .HTML{display:none} .onItem .blogPosts{display:block; width:100%;left:0;right:0} .onItem .blogPosts .hentry{width:100%; margin-left:0;margin-right:0;margin-bottom:0;padding-bottom:0;border:none;box-shadow:none}
    .bayang{padding:10px 10px 40px;border-radius:8px;border:1px solid var(--content-border);border-radius:8px;box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.1);display:block;position:relative; width:calc(33.333% - 20px); margin-left:5px;margin-right:5px;margin-bottom:10px; padding-bottom:38px}

    Jika sudah cari kode <b:eval expr='snippet(data:post.body 
    Ganti kode tersebut menjadi seperti ini

    <b:eval expr='snippet(data:post.snippets.long

    Lanjut cari kode margin-top:18px
    Gantikan dengan kode berikut.

    margin: 10px 10px

    Klik Simpan Tema
    Dan Cek hasilnya.

Catatan:
Ikuti langkah demi langkah sesuai urutan diatas agar tidak terjadi kesalahan/error template median ui anda, juga pastikan berhati-hati dalam menghapus kode. 

Baca Juga: [Cara Unlock Bootloader Redmi 9T](https://www.guntureal.com/2023/09/cara-unlock-bootloader-redmi-9t.html)

Bagaimana mudah bukan mengubah tampilan median ui v1.5 flat style ke card style median ui v1.5 demikianlah Cara Ubah Tampilan Homepage Median UI semoga bermanfaat wassalam. 

Source: [guntureal.com](https://www.guntureal.com)