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.

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

1. Buka Dashboard Blogger
2. Klik Tema
3. Tekan icon Segitiga Terbalik
4. Pilih Edit HTML

   
   
   
5. Lalu cari kode /* blogPosts Section */

   
   
   
6. 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}
7. Lalu cari kode <b:eval expr='snippet(data:post.body

   

   
   
8. Kemudian ganti menjadi
   

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

9. Cari kode margin-top:18px

   

10. Ganti dengan kode
    

    margin: 10px 10px

11. Simpan Tema

Demikian Cara Mengubah Tampilan Homepage Median UI v1.5 Sama Seperti Median UI v1.4. Semoga bermanfaat 😊