Beranda
Median UI
Median UI 1.5

Cara Modifikasi Widget Related Post Median UI v1.5

Widget Related Post yang bertuliskan Anda mungkin menyukai postingan ini di Median UI versi 1.5 tampilannya buruk banget. Alasannya sudah dijelaskan
Saifullah.id
Cara Memperbaiki Widget Related Post Median UI 1.5
Saifulah.id - Widget Related Post yang bertuliskan "Anda mungkin menyukai postingan ini" di Median UI versi 1.5 tampilannya buruk banget. Alasannya sudah dijelaskan pada postingan sebelumnya tentang Kekurangan Template Median UI v1.5 - Banyak Bugs?.


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

Sebagai sesama blogger, tentu saja saya tidak boleh hanya asal kritik template orang lain. Oleh sebab itu,  saya akan memberikan solusi jitu untuk memperbaiki kekurangan widget related post Median UI 1.5.

CARA MODIF WIDGET ARTIKEL TERKAIT MEDIAN UI

  1. Buka Dashboard Blogger
  2. Klik Tema
  3. Tekan icon Segitiga Terbalik
  4. Pilih Edit HTML
    Cara Memperbaiki Widget Related Post Median UI 1.5

  5. Lalu cari kode /* Related Posts */
  6. Blok semua kode di bawahnya, lalu ganti dengan kode baru yang sudah di modifikasi.
    Cara Memperbaiki Widget Related Post Median UI 1.5

  7. Kode penggantinya 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}} 

  8. Simpan Tema

Demikian cara memperbaiki dan memodifikasi widget artikel terkait template Median UI v1.5. Baca juga tutorial lain tentang Median UI 👉 di sini

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

33 komentar

  1. Ezet
    Ezet
    Request cara memodifikasi headernya mas
    1. Saifullah.id
      Saifullah.id
      Cek di sini https://www.saifullah.id/search?q=header
  2. ZVX-GAMING-34
    ZVX-GAMING-34
    thank bang,request edit header mobile jadi stick bang
    1. Saifullah.id
      Saifullah.id
      Sama². OK
  3. Saifullah.id
    Saifullah.id
    Ok besok ya
  4. Misumi Makoto
    Misumi Makoto
    Bang yang Kemaren ,halaman homepage tampilan bug icon komen sama tanggal keluar garis
    1. Saifullah.id
      Saifullah.id
      Cek tutorial di sini, sudah di update https://www.saifullah.id/2021/07/cara-ubah-tampilan-homepage-median-ui.html
  5. Shela
    Shela
    bang, punya gw udah berhasil jadi kotak akan tetapi mengarah kesamping ngga kebawah gmna tuh bang ada solusikah?
    1. Saifullah.id
      Saifullah.id
      Abang pakai Median UI versi berapa? Udah di terapkan tutorialnya dengan teliti?
  6. Ndi Uke
    Ndi Uke
    bang ko saya dari awal pasang template ini gak muncul ya related post nya ? apa ada setelan tambahan untuk memunculkannya ? terimakasih
    1. Saifullah.id
      Saifullah.id
      Biasanya related post gak muncul karena labelnya kosong. Jadi, pastikan untuk memberi label di setiap postingan.
  7. agusmiko
    agusmiko
    related post gambar blur walau sudah pakai gambar 16:9 fix nya gimana min
    1. Saifullah.id
      Saifullah.id
      Kualitas gambarnya terlalu rendah, coba pakai gambar yang ukurannya tinggi
  8. User
    User
    Sama Bg saya juga Gitu Masalah Nya
    1. User
      User
      bang, punya gw udah berhasil jadi kotak akan tetapi mengarah kesamping ngga kebawah gmna tuh bang ada solusikah?
  9. Receiver Narior
    Receiver Narior
    bang, punya gw udah berhasil tapi kotak related postnya mengarah kesamping ngga kebawah gmna tuh bang ada solusikah?
    gw pake Median Ui versi 1.5 bang
    1. Saifullah.id
      Saifullah.id
      Kemungkinan ada penerapan tutorial yang salah. Teliti lagi dalam mengikuti langkah-langkahnya. Karena tutorial di atas udah sesuai dengan contoh.
  10. Manta Channel
    Manta Channel
    Bng knp saya masih flat ya padahal saya ikutin tutor dngn bnr dan teliti tapi blm ke bentuk grid
    1. Saifullah.id
      Saifullah.id
      Alamat blognya apa kak, biar saya cek kesalahannya dimana.
    2. Manta Channel
      Manta Channel
      https://jajajajasjakooqq.blogspot.com/?m=1
    3. Manta Channel
      Manta Channel
      Itu kak blog nya
    4. Saifullah.id
      Saifullah.id
      Arikel kakak baru ada 2 postingan. Syarat minimal untuk melihat tampilan real widget related post harus ada 6 artikel.
  11. Manta Channel
    Manta Channel
    Owalah oke min makasih😅
    1. Saifullah.id
      Saifullah.id
      Sama-sama 😁
  12. Randy MCID
    Randy MCID
    Kang, versi mobilenya kesamping kalau versi desktopnya iya grid, ada solusi kah, v1.5 https://randyservicenter.blogspot.com coba cek kang. terimakasih
  13. Dwi Iswahyudi
    Dwi Iswahyudi
    Wah berhasil, terima kasih kak. desktop maupun mobile bisa. Memang harus ada yang diedit lagi. Hasilnya bisa dicek di bahanbacaan.com
    1. Manta Channel
      Manta Channel
      Dibagian mana nya yang harus dibenerin? Punya saya belum ke bentuk grid
    2. Saifullah.id
      Saifullah.id
      Sama-sama kak. Saya sudah cek blog kk. Alhamdulillah berhasil sama seperti punya saya
  14. Shela
    Shela
    Punya saya kok masih menyamping ya kak, bisa di cek zonatech .my .id saya sudah ikuti tutorialnya dengan benar. Apakah ada tambahan lagi?? Terima kasih .
  15. Shela
    Shela
    udah bisa kak, hehe
    1. Saifullah.id
      Saifullah.id
      Sip
  16. Young
    Young
    bang Median UI saya kok di artikel pas pencet menu widget Home nya ada dua yah? cara hapusnya gimana yh bang?
    1. Saifullah.id
      Saifullah.id
      Median UI versi berapa?
Popular Emoji: 😊😁😅🤣🤩🥰😘😜😔😪😭😱😇🤲🙏👈👉👆👇👌👍❌✅⭐