Cara Ubah Performa Homepage Median Ui V1.5 Sama Menyerupai Median Ui V1.4

Saifulah.id - Tampilan Postingan di Homepage Median UI model 1.5 menurut aku justru kualitasnya malah menurun dibanding template Median UI model 1.4. Saat model 1.4 sudah menggunakan style Card, namun di model 1.5 justru pakai style Flat yang menjadikannya terlihat kurang rapi.

Ternyata ganjalan ini tidak hanya dinikmati aku sendiri, blogger lain juga ada chat aku dan menanyakan cara merubah performa ini. Akhirnya aku bereksperiment lagi, untuk mendapatkan instruksi yang hendak dimodifikasi.

Setelah beberapa hari kemudian, aku mendapatkan sumber kodenya dan mulai menyediakan hasil. Coba lihat perbandingan performa template Median UI yang orisinil dan yang sudah di Modifikasi.

Bagaimana? Bagus yang kiri atau yang kanan? Saya percaya kalian akan menjawab yang kanan, lantaran terkesan lebih rapi dan profesional. Oleh lantaran itu, berikut aku berikan bimbingan 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 instruksi 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 berharga 😊

Tweet