Cara Mengubah Tampilan Homepage Median UI 1.6 Jadi Kotak

Saifulah.id - Tampilan asli template blogger Median UI 1.6 benar-benar simpel dan flat. Datar tanpa ada variasi yang memanjakan mata. Tema nya terlalu bersih padahal ini template premium. Tidak heran setelah saya modifikasi tampilan Median UI, banyak yang bertanya cara tutorialnya.

Bisa kita lihat beberpa pertanyaan yang muncul di kolom komentar, lebih dari 10 orang bertanya tentang cara memodifikasi tampilan beranda awal Median UI sama persis seperti template Saifullah.id

Bagian Mana Yang Diubah?

Jadi, agar tampilannya lebih bagus dan terlihat tiga dimensi (3D), saya akan menambahkan bingkai dan bayangan di sisi setiap postingan. Sehingga hasil akhirnya seperti bentuk kartu (card) yang timbul. Contohnya lihat gambar di bawah.

Cara Ubah Tampilan Beranda Median UI 1.6

1. Buka Dashboard Blogger
2. Klik Tema
3. Tekan icon Segitiga Terbalik
4. Pilih Edit HTML
   
5. Cari kode .onIndx .blogPts >*
   

   .onIndx .blogPts >*{margin-bottom:40px; padding-bottom:35px;position:relative}

6. Ganti jadi seperti ini
   

   .onIndx .blogPts >*{margin-bottom:20px;padding: 8px 10px 35px;border-radius: 8px;border: 1px solid var(--content-border);border-radius:8px;box-shadow:0px 0px 10px 0px rgb(0 0 0 / 10%);position:relative}

7. Temukan kode .onIndx .blogPts .pInf
   

   .onIndx .blogPts .pInf{position:absolute;bottom:0;left:0;right:0}

8. Ganti jadi seperti ini
   

   .onIndx .blogPts .pInf{position:absolute;bottom:8px;left:10px;right:10px}

9. Simpan Tema

LIVE DEMO

Median UI 1.5 Median UI 1.6