Home
Blog
Median Ui

Cara Modifikasi Tampilan Related Post Median UI Menjadi Gaya List

Shaytekno.com - Bagi pengguna baru median UI mungkin masih banyak yang belum tahu bahwa tampilan Related Post Median UI memiliki banyak sekali gaya dan variasi yang bisa anda gunakan.

Berikut ini adalah panduan lengkap Cara Modifikasi Tampilan Related Post Median UI Menjadi Gaya List
Ada 4 tampilan yang bisa anda gunakan diantara lain'
  • Gaya List Right Pictures (Daftar gambar di kanan)
  • Gaya Grid (Kotak).
  • Gaya List Left Pictures (Daftar gambar di kiri).
  • Dan Scroll Right (Usap ke kanan).

Selain itu juga anda bisa memodifikasi tampilan related Post menjadi gaya List yang saat ini admin gunakan, namun dengan caranya ini kita akan melakukan sedikit merubah tampilan Related Post Median UI menjadi gaya List modifikasi, sesuai gaya pada website yang admin gunakan saat ini.

Baiklah tanpa berlama-lama lagi mari simak tutorial lengkap berikut ini, tantang langkah cara memodifikasi tampilan halaman Related Post Median UI menjadi gaya list.

Baca juga: Kumpulan Tutorial Tentang template Median UI Versi 1.5 disini

Cara Modifikasi Tampilan Related Post Median UI Menjadi Gaya List

Informasi penting !! Sebelum melanjutkan pastikan bahwa kalian sudah menyalin kode utama dari template Median UI yang kalian miliki, agar terhindar dari kesalahan pemasangan kode.

Warning!!!! Untuk lebih mudah dalam mencari code, gunakan Laptop atau FC, Jika anda menggunakan perangkat smartphone android silahkan gunakan keyboard android yang mendukung Ctrl F agar mudah mencuri kode-kode html pada template Median UI.

Baiklah jika sudah mari simak panduan selengkapnya tentang langkah modifikasi tempilan Related Post Median UI agar menjadi Gaya List berikut ini.
  • Buka Dasbor Blogger.
  • Pilih menu TEMA.
  • Pilih metode Edit HTML.
  • Gunakan Ctrl F.
  • Lalu cari kode /* Related Posts */
  • Lalu hapus kode dari .relatedPosts{margin:40px 0 0;line-height:1.6em
  • Sampai kode {margin-left:0}}
  • Lalu ganti semua dengan kode yang sudah di modifikasi di bawah ini.

.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}}
  • Jika sudah klik simpan.
Dan hasilnya akhirnya seperti ini:

Jika sudah anda bisa melihat website anda, pastikan anda melihat website anda menggunakan perangkat smartphone karena dengan menggunakan perangkat smartphone, maka perubahan pada tempilan Related Post akan terlihat.

Demikian itulah tutorial cara modifikasi tampilan widget Related Post Median UI menjadi gaya List, semoga artikel ini bermanfaat dan bisa membantu teman-teman.

Jika ada pertanyaan terkait tutorial di atas kalian juga bisa bertanya melalui kolom komentar yang tersedia di bawah ini, jika ada rekuesan tutorial lainnya kalian juga bisa bertanya melalui kolom komentar, terimakasih selamat mencoba.

Post a Comment