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