Note : Kunjungi juga channel youtube saya ... Get now!

Cara Memodifikasi Related Post Median UI v1.5

Widget Artikel Terkait yang berada di bawah postingan Median UI v1.5 ini memang enaknya diubah seperti pada median UI v1.4. Sehingga lebih eyecatching dan tidak membuat pengunjung capek melakukan scroll saat dibuka melalui HP.

Untuk itu ikuti langkah berikut ini untuk memodifikasi related post pada Template Median UI v1.5 karena tidak bisa diubah style secara bawaan maka dari itu kita perlu memodifikasi sedikit.

CARA MODIF WIDGET ARTIKEL TERKAIT MEDIAN UI

  1. Buka Dashboard Blogger
  2. Klik Tema
  3. Tekan icon Segitiga Terbalik
  4. Pilih Edit HTML
  5. Lalu cari code /* Related Posts */
  6. Bisa juga dengan menekan ctrl + F dan tuliskan code yang di cari

atau bisa kalian copy code di bawah ini.

/* Related Posts */
.relatedPosts{margin:40px 0 0;line-height:1.6em} .relatedPosts ul{display:flex;flex-wrap:wrap; position:relative;width:calc(100% + 20px);left:-10px; list-style:none;margin:0;padding:0} .relatedPosts li{display:block;width:calc(33.333% - 20px); margin:0 10px 30px} .relatedPosts .itemThumbnail a{background-image:none; color:inherit} .relatedPosts .itemThumbnail > *:before{content:'No image';display:block;position:absolute;top:50%;left:50%;max-width:none;max-height:100%;-webkit-transform:translate(-50%, -50%);transform:translate(-50%, -50%); font-size:12px; opacity:.7} .relatedPosts .itemThumbnail div{background-position:center;background-size:cover;background-repeat:no-repeat; display:block;position:absolute;top:0;left:0;bottom:0;right:0} .relatedPosts .itemTitle{font-size:.85rem;line-height:1.5em; font-family:var(--font-head);font-weight:700}

Dan ganti dengan yang baru yang sudah di modifikasi di bawah ini.

/* Related Posts */
.relatedPosts{margin:40px 0 0;line-height:1.6em} .relatedPosts ul{display:flex;flex-wrap:wrap; position:relative;width:calc(100% + 20px);left:-10px;right:-10px; list-style:none;margin:0;padding:0} .relatedPosts li{display:block;width:calc(33.333% - 20px); margin:0 10px 30px;border:1px solid #f6f6f6;padding:10px;border-radius:10px;box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.1)} .relatedPosts .itemThumbnail a{background-image:none; color:inherit} .relatedPosts .itemThumbnail > *:before{content:'Loading';display:block;position:absolute;top:50%;left:50%;max-width:none;max-height:100%;-webkit-transform:translate(-50%, -50%);transform:translate(-50%, -50%); font-size:12px; opacity:.7} .relatedPosts .itemThumbnail div{background-position:center;background-size:cover;background-repeat:no-repeat; display:block;position:absolute;top:0;left:0;bottom:0;right:0} .relatedPosts .itemTitle{font-size:.85rem;line-height:normal; font-family:var(--font-head);font-weight:700}

@media screen and (max-width:1100px){.relatedPosts li{width:calc(50% - 20px)}} @media screen and (max-width:896px){.relatedPosts li{width:calc(33.333% - 20px)}} @media screen and (max-width:640px){.relatedPosts li{width:calc(50% - 20px)}} @media screen and (max-width:480px){.relatedPosts ul{flex-wrap:wrap;width:calc(100% + 40px);left:-20px;right:-20px;margin-bottom:50px;padding:10px 20px 0; overflow-y:hidden;overflow-x:scroll;scroll-behavior:smooth;scroll-snap-type:x mandatory; -ms-overflow-style:none;-webkit-overflow-scrolling:touch} .relatedPosts li{width:calc(50% - 20px);display:block;flex-shrink:0;margin:0 10px 10px; scroll-snap-align:center} .relatedPosts li:last-child{margin-right:0} .relatedPosts ul:after{content:'';display:block;flex-shrink:0; align-self:stretch;padding-left:20px} .relatedPosts .itemTitle{font-size:13px} .rtlMode .relatedPosts li{margin:0 0 0 15px} .rtlMode .relatedPosts li:last-child{margin-left:0}}
/* darkmode pinned post */
@media screen and (max-width:500px){
.darkMode .itemFeatured .itemContent {
    background: var(--dark-bgSec);

Setelah di ganti kalian harus menghapus code di bawah ini. copy dan cari code di bawah ini lalu hapus codenya.

@media screen and (max-width:1100px){
.relatedPosts li{width:calc(50% - 20px)}}
@media screen and (max-width:896px){.relatedPosts li{width:calc(33.333% - 20px)}}
@media screen and (max-width:640px){.relatedPosts li{width:calc(50% - 20px)}}
@media screen and (max-width:480px){
.darkMode .itemFeatured .itemContent{background-color:var(--dark-bgSec)}
.relatedPosts ul{flex-wrap:nowrap;width:calc(100% + 40px);left:-20px;margin-bottom:50px;padding:0 20px; overflow-y:hidden;overflow-x:scroll;scroll-behavior:smooth;scroll-snap-type:x mandatory; -ms-overflow-style:none;-webkit-overflow-scrolling:touch} .relatedPosts li{display:block;flex-shrink:0; width:70%; margin:0 15px 0 0; scroll-snap-align:center} .relatedPosts li:last-child{margin-right:0} .relatedPosts ul:after{content:'';display:block;flex-shrink:0; align-self:stretch;padding-left:20px}
.relatedPosts .itemTitle{font-size:13px}
}

Klik Simpan untuk menyimpan tema yang telah kita modifikasi.

Nah sudah berhasil dan selesai demikian lah cara merubah atau memodifikasi tampilan related posts di template Median UI v1.5 agar tampilan nya lebih bagus dan elegan.

Sumber :
https://Saifullah.id

Baca Juga
aplikasi, software, tutorial dan video

Anda mungkin menyukai postingan ini

9 komentar

• Tinggalkan komentar sesuai dengan topik tulisan.
• Ceklis / Centang Beri Tahu Saya (Supaya saya langsung merespons)

Terima Kasih.......

Masukkan URL Gambar / Cuplikan Kode / Kutipan / tag nama, lalu klik tombol parse sesuai yang sudah anda masukkan. kemudian salin hasil parse dan tempelkan ke kolom komentar.


  1. Mas Request cara membuat tampilan header seperti blog ini ada lengkungan di pinggiran nya
    1. pakai template apa mas ?
  2. Saya pakai median UI 1.5 maa
    1. di bikin kaya gini aja kan https://apk4all.fajararifrahman.com/?m=1
  3. Iya mas seperti itu,tolong bikinan tutorialnya ya
    1. https://www.fajararifrahman.com/2022/08/cara-memodifikasi-header-pada-median-ui-v15.html sudah saya bikin tutorialnya
  4. Iya mas seperti itu, tolong bikinkan tutorialnya ya
    1. oke mas segera di bikin artikelnya
  5. https://www.fajararifrahman.com/2022/08/cara-memodifikasi-header-pada-median-ui-v15.html sudah saya bikin tutorialnya
Cookie Consent

We serve cookies on this site to analyze traffic, remember your preferences, and optimize your experience.

Google Translate
Bookmark Post