🔔 Aktifkan notifikasi disini Google News

Cara Modifikasi Widget Related Post Median UI v1.5

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?

SeaBank - Saifullah (9016-9529-0071)

BRI - Saifullah (05680-10003-81533)

BCA Blu - Saifullah (007847464643)

JAGO - Saifullah (1060-2675-3868)

BSI - Saifullah (0721-5491-550)
Merasa terbantu dengan artikel ini? Ayo dukung dengan memberikan DONASI. Tekan tombol merah.
Seorang Guru Bahasa Inggris, Kreator Digital, Editor, Publisher, Advertiser, Blogger, Youtuber, Distributor, Desain Grafis, Web Developer, dan Programmer.

33 komentar

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

Gambar Quote Pre Kode



  • Home


  • Follow


  • MENU


  • Share


  • Comment
Cookie Consent
Kami menyajikan cookie di situs ini untuk menganalisis lalu lintas, mengingat preferensi Anda, dan mengoptimalkan pengalaman Anda.
Oops!
Sepertinya ada yang salah dengan koneksi internet Anda. Harap sambungkan ke internet dan mulai menjelajah lagi.