Cara Mengubah Tampilan Homepage Median UI 1.6 Jadi Kotak

Agar tampilannya lebih bagus dan terlihat tiga dimensi (3D), saya akan menambahkan bingkai dan bayangan di sisi setiap postingan.
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)

BCA Blu - Saifullah (007847464643)

Mandiri - Saifullah (1460019181044)

BSI - Saifullah (0721-5491-550)
Merasa terbantu dengan artikel ini? Ayo dukung dengan memberikan DONASI. Tekan tombol merah.

Penulis

Saifullah.id
PT Saifullah Digital Advantec

9 komentar

  1. Anonim
    cara bikin nama orang di komentar jadi bold gimana ya?
    1. Saifullah.id
      Saifullah.id
      Cek disini https://www.saifullah.id/2022/06/cara-bold-nama-orang-yang-komen.html
  2. Fery
    Fery
    kak cara mengatasi postingan blog tidak muncul di halman utama bagaimana?
    1. Saifullah.id
      Saifullah.id
      Di kasih label
  3. GimXSec7
    GimXSec7
    cara menghilangkan kotak kosong dibawah latest post gimana?
    1. Saifullah.id
      Saifullah.id
      Kotak yang mana ya kak? Bisa kirim screenshot nya di forum? https://www.saifullah.id/p/forum.html
  4. Kante
    Kante
    versi Median 1.7 bang
    1. SaifullahTV
      SaifullahTV
      Ok
    2. Saifullah.id
      Saifullah.id
      https://www.youtube.com/watch?v=Hc_UmVxgp_M
Popular Emoji: 😊😁😅🤣🤩🥰😘😜😔😪😭😱😇🤲🙏👈👉👆👇👌👍❌✅⭐