Cara Ubah Tampilan Homepage Median UI v1.5 Sama Seperti Median UI v1.4

Saifulah.id - Tampilan Postingan di Homepage Median UI versi 1.5 menurut saya justru kualitasnya malah menurun dibanding template Median UI versi 1.4. Saat versi 1.4 sudah menggunakan style Card, tapi di versi 1.5 justru pakai style Flat yang membuatnya terlihat kurang rapi.

Ternyata keluhan ini tidak hanya dirasakan saya sendiri, blogger lain juga ada chat saya dan menanyakan cara mengubah tampilan ini. Akhirnya saya bereksperiment lagi, untuk menemukan kode yang akan dimodifikasi.

Setelah beberapa hari kemudian, saya menemukan sumber kodenya dan mulai menunjukkan hasil. Coba lihat perbandingan tampilan template Median UI yang asli dan yang sudah di Modifikasi.

Cara Ubah Tampilan Homepage Median UI v1.5 Sama Seperti Median UI v1.4

Bagaimana? Bagus yang kiri atau yang kanan? Saya yakin kalian akan menjawab yang kanan, karena terkesan lebih rapi dan profesional. Oleh sebab itu, berikut saya berikan tutorial memodifikasinya.

Cara Ubah Tampilan Homepage Median UI Terbaru

Buka Dashboard Blogger
Klik Tema
Tekan icon Segitiga Terbalik
Pilih Edit HTML
Lalu cari kode /* blogPosts Section */
Ganti dengan kode yang sudah dimodifikasi
.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}
Lalu cari kode <b:eval expr='snippet(data:post.body
Kemudian ganti menjadi
<b:eval expr='snippet(data:post.snippets.long
Cari kode margin-top:18px
Ganti dengan kode
margin: 10px 10px
Simpan Tema