Cara Mengubah Tampilan Homepage Median UI v1.5

cara ubah tampilan homepage median ui v1.5

guntur.eu.org - Tampilan artikel di beranda Median UI v1.5 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.


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.
  1. Buka Dashboard blogger.com
  2. Pilih menu Tema
  3. Klik icon segitiga tiga terbalik
  4. Tekan Edit HTML
    buka menu edit html

  5. Temukan kode /* blogPosts Section */ untuk memudahkan mencari kode tekan CTRL + F
    temukan kode /* blogposts section */ dan hapus ganti kode baru
  6. Gantikan kode tersebut dengan Kode Baru dibawah.
  7. .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}
  8. Jika sudah cari kode <b:eval expr='snippet(data:post.body 
  9. Ganti kode tersebut menjadi seperti ini
  10. <b:eval expr='snippet(data:post.snippets.long
  11. Lanjut cari kode margin-top:18px
  12. Gantikan dengan kode berikut.
  13. margin: 10px 10px
  14. Klik Simpan Tema
  15. 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: Template Median UI v1.5 Original Free

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