Cara Mengubah Tampilan Homepage Median UI 1.6 Jadi Kotak

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

Cara Mengubah Tampilan Homepage Median UI 1.6 Jadi Kotak

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 Mengubah Tampilan Homepage Median UI 1.6 Jadi Kotak


Cara Ubah Tampilan Beranda Median UI 1.6

  1. Buka Dashboard Blogger
  2. Klik Tema
  3. Tekan icon Segitiga Terbalik
  4. Pilih Edit HTML
    Cara Mengubah Tampilan Homepage Median UI 1.6 Jadi Kotak
  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

Mau donasi lewat mana?

BRI - Saifullah (05680-10003-81533)

JAGO - Saifullah (1060-2675-3868)

BSI - Saifullah (0721-5491-550)
Merasa terbantu dengan artikel ini? Ayo balas dengan donasi. Tekan tombol merah.