Mengubah Tampilan Homepage Median UI 1.6 Jadi Kotak - Panduanajib

Mengubah Tampilan Homepage Median UI 1.6 Jadi Kotak

Cara Mengubah Tampilan Homepage Median UI 1.6 Jadi Kotak

Median UI memang terkenal sebagai template blogger yang clean dan simple serta mengutamakan keterlihatan artikel. Namun pada template Median UI 1.6 menurut saya benar-benar terlalu clean terutama pada tampilan homepagenya. Sehingga jujur mata cukup bosan ketika memandangnya.

Untuk itulah saya berinisiatip untuk mengubah tampilan homepage median ui 1.6 ini. Dan akhirnya ketemu juga caranya lalu kemudian coba saya terapkan. Kurang lebih tampilannya akan seperti gambar dibawah ini.


Apa yang akan di ubah?

Disini kita akan mengubah tampilan homepage median ui 1.6 menjadi memiliki tampilan 3 dimensi (3D) dengan menambahkan bingkai serta bayangan di setiap sisi artikel. Sehingga tampilan artikel di homepage akan menjadi lebih enak dilihat mata (tidak flast).

Cara Mengubah Tampilan Homepage Median UI 1.6

  • Buka Dashboard Blogger
  • Klik Tema
  • Tekan icon Segitiga Terbalik
  • Pilih Edit HTML
  • Cari Kode Dibawah ini

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

  • Kemudian silahkan ganti kode diatas dengan kode dibawah 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}

  • Lanjut, silahkan cari kode dibawah ini

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

  • Dan ganti dengan kode dibawah ini

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

  • Simpan Tema
  • Selesai

Itulah artikel tentang Mengubah Tampilan Homepage Median UI 1.6 Jadi Kotak. Semoga bermanfaat.

Halo gan nama saya Ricky. Saya adalah seorang pemuda kampung yang sangat minat mengikuti perkembangan teknologi.

Posting Komentar

Tinggalkan komentar sesuai topik tulisan, centang Notify me untuk mendapatkan notifikasi via email ketika komentar kamu di balas.
Masukkan URL Gambar atau Potongan Kode, atau Quote, lalu klik tombol yang kamu inginkan untuk di-parse. Salin hasil parse lalu paste ke Pesan Komentar.


image quote pre code
© Panduanajib. All rights reserved. Premium By Raushan Design