Solusi Mengatasi Gambar Tidak Muncul di Widget Kustom Akibat Editor Baru Blogger

Cara Agar Gambar Thumbnail Muncul di Widget Custom Blogger

Saat ini pihak Blogger sudah mulai menerapkan User Interface (UI) alias tampilan baru untuk editor Blogger. Sekilas, UI ini terlihat lebih bersih dan minimalis dibanding versi lama. Tampilannya pun menjadi responsif saat dibuka di layar yang lebih kecil seperti ponsel atau tablet.

Iya, tampilannya memang bagus sih. Tapi ada satu bug yang cukup mengganggu sebagian besar pengguna. Entah kenapa setiap postingan yang diterbitkan melalui editor baru ini menjadi tidak memiliki gambar dalam RSS feed. Biasanya gambar terdapat dalam value media$thumbnail.url seperti ini:

Solusi Mengatasi Gambar Tidak Muncul di RSS Feed Blogger

Versi barunya menjadi begini:

Cara Agar Gambar Muncul di Related Post Blogger

Apa Ruginya Sih?

Hilangnya media$thumbnail.url dalam RSS feed menyebabkan hilangnya pula gambar dalam widget kustom seperti recent post, related post, dan lain sebagainya. Ini karena tidak ada value yang bisa diambil untuk ditampilkan menjadi gambar.

Saya sebagai pengembang tema Blogspot dibuat cukup kelabakan akibat editor baru ini karena banyak sekali pengguna yang mengeluhkan hilangnya gambar dalam widget kustom tersebut.

Kenapa Bisa Terjadi Error?

Usut punya usut, ternyata gambar yang diunggah melalui editor baru memiliki format URL yang berbeda dengan editor lama. Sebagai perbandingan, inilah formatnya:

LAMA:

<img src="https://4.bp.blogspot.com/-l9SL8uvfOZ4/XyK8RBOTC6I/AAAAAAAAI0c/n0aRv-GmIGIZowsFKugwSoBj8iku2wRMwCLcBGAsYHQ/sXXXX/gambar.jpg"/>

BARU:

<img src="https://4.bp.blogspot.com/-l9SL8uvfOZ4/XyK8RBOTC6I/AAAAAAAAI0c/n0aRv-GmIGIZowsFKugwSoBj8iku2wRMwCLcBGAsYHQ/wXXX-hXXX/gambar.jpg"/>

XXXX dalam sXXXX dan wXXX-hXXX adalah angka, dimana nilainya berbeda-beda sesuai dengan dimensi ukuran gambar yang ingin ditampilkan.

Ternyata perbedaan format URL ini menjadi hal yang berdampak besar. Jika URL tidak mengandung sXXXX, maka gambar tidak akan terbaca di RSS feed. Masalahnya, setiap gambar yang diunggah di editor baru Blogger TIDAK memilik format tersebut, namun otomatis diganti dengan wXXX-hXXX.

Cara Memunculkan Gambar Thumbnail di Widget Pada Editor Baru Blogger

Ini adalah solusi untuk memperbaiki gambar tidak muncul di widget akibat editor baru Blogger. Sesuai penjelasan di atas, solusinya sederhana sekali.

  1. Edit postingan yang gambarnya tidak muncul pada widget kustom.
  2. Pindah pada mode HTML (bukan Compose).
  3. Lihat kode gambar dan perhatikan nilai src. Jika memiliki format wXXX-hXXX, maka tinggal ganti menjadi sXXXX.
  4. Terbitkan lagi postingannya.

CONTOH:

Lihat ini:

<img src="https://4.bp.blogspot.com/-l9SL8uvfOZ4/XyK8RBOTC6I/AAAAAAAAI0c/n0aRv-GmIGIZowsFKugwSoBj8iku2wRMwCLcBGAsYHQ/w625-h351/gambar.jpg"/>

Ubah jadi seperti ini:

<img src="https://4.bp.blogspot.com/-l9SL8uvfOZ4/XyK8RBOTC6I/AAAAAAAAI0c/n0aRv-GmIGIZowsFKugwSoBj8iku2wRMwCLcBGAsYHQ/s1600/gambar.jpg"/>

Klik untuk melihat ukuran lebih besar

Hasil Akhir

Ini contoh dari widget kustom yang mengambil data dari RSS feed, yaitu related post. Saya coba di template Fiksioner gratis. Tadinya tidak ada gambar (diganti oleh gambar default). Setelah menerapkan cara di atas, gambar thumbnail langsung tampil. Ini karena value media$thumbnail.url muncul kembali di RSS feed.

Memunculkan Gambar Thumbnail Pada Script Related Post
Contoh gambar pada widget related post

Penutup

Akan sangat menyusahkan bagi pengguna yang tidak mau ribet, yang biasanya langsung posting dari mode Compose. Kalau perubahan format URL bisa berdampak besar pada hilangnya gambar di RSS feed, ada baiknya pihak Blogger melakukan update pada sisi RSS feednya juga. Karena yang mengubah format URL gambar secara otomatis itu editor baru Blogger, bukan pengguna.

Jadi kalau widget kustom di template kamu tiba-tiba tidak memunculkan gambar, entah itu widget related post (artikel terkait), recent post (artikel terbaru), dan lain sebagainya, jangan buru-buru mengumpat template yang sedang digunakan. Bisa jadi memang masalahnya ada di format gambar seperti yang sudah dijelaskan di atas.

Itu dia cara mengatasi gambar tidak muncul di related post atau recent post Blogger karena editor baru. Semoga bisa sedikit membantu. Kita pakai cara ini saja dulu sambil menunggu pihak Blogger melakukan update yang lebih baik.

SHARE Pin Share
Artikel Terkait
51 komentar
  1. Pantesan...makasi bang infonya..

    BalasHapus
  2. mantap dah lama ga ngeblog hihihi

    BalasHapus
  3. Terima kasih infonya, sangat terbantu.

    BalasHapus
  4. Ada bug baru mbak, coba lihat paling atas blog, ada kode -->
    Kalau di blog saya berada di tengah atas, kalau di blog mbak igniel ada di kiri atas

    BalasHapus
    Balasan
    1. Ini blogger ada update lagi mas. Cek postingan fanspage igniel.com untuk melihat solusinya.
      https://m.facebook.com/story.php?story_fbid=3463811533657705&id=106660612706164

      Hapus
    2. Cara yang mbak kasih ke saya, setelah saya terapkan memang berhasil. Tapi menyebabkan template saya berantakan. Namun saya sudah nemu cara yang cocok untuk tempate saya tanpa mengubah banyak kode, berikut tutorialnya https://www.saifullah.id/2020/08/blogger-update-lagi-muncul-tanda--diatas-blog.html

      Hapus
  5. I see you used my hint from the official blogger forum. I'm glad it works for you too. You can mark it as recommended for others ;-)

    BalasHapus
  6. Teh request artikel dong, tentang widget top komentar disqus di blog. Sebelumnya makasih teh, soalnya saya cari di google masih belum ada

    BalasHapus
    Balasan
    1. Ini maksudnya jumlah komentar terbanyak teh

      Hapus
    2. Dalam artian orang yg paling banyak memberi komentar teh 🙏

      Hapus
  7. done dan berhasil, makasih tipsnya teh

    BalasHapus
  8. Kemarin saya ngalami yang begitu kak, akhirnya saya nyerah karena gk nemu jawaban soalnya keyword yang saya cari kurang tepat

    BalasHapus
  9. Editor baru blogger sudah mulai diterapkan blum ya?

    Kira-kira bisa jadi masalah gak ya? Soalnya sudah terbiasa dengan dashboard blogger yang ada sekarang, jadi agak dikit "munyer" liat dashboard baru nya, makanya jarang pake yang baru.

    BalasHapus
  10. Hallo Mbak Igniel, mintol tutorial bikin slider mirip ignielplex.

    Sepertinya keren.
    Terima kasih...

    BalasHapus
  11. Iya ya, lebih keren kalau ada gambarnya.

    BalasHapus
  12. sudah q coba sperti diatas tapi ko tetap gak muncul ya mba gambarnya di widget

    BalasHapus
  13. Nice template kindly share this templates 😍

    BalasHapus
  14. Mbak bikin kan tutorial cara mengatasi document.write() dong. Punya saya bermasalah di sana, ini screenshootnya https://prnt.sc/uy7mwa

    BalasHapus
    Balasan
    1. Memang tidak dianjurkan kalau pakai document.write, lebih baik di ubah ke innerHTML

      Hapus
  15. solusi lain bisa ganti ukuran sedang dg ukuran original. cuman ntar blog akan lebih berat bila ukuran gambar agak besar

    BalasHapus
    Balasan
    1. wah thank you. Ternyata kalau pake ukuran original jadi muncul lagi thumbnailnya :). Untungnya aku pake thumbnail sederhana yang ukuran filenya super kecil jadi nggak bakal terlalu ngaruh (semoga).

      Hapus
  16. update blogspot benar benar bikin repot
    harus ganti s atau w h, pokoknya harus banyak uji coba
    Bikin kepala pening

    BalasHapus
  17. Template igniplex 2.6 infinite scroll-nya kok nggak aktif ya? Padahal udah aku ganti 1 nilainya tapi yang muncul 'load more.'

    Mohon solusinya mbak

    BalasHapus
  18. Sudah dijawab terima kasih

    BalasHapus
  19. Maaf out topik , teh bikinin tutorial bikin grid , list homepage kayak template ignilplex di template textrim dong ?🙏

    BalasHapus
  20. makasih infonya mbk. cek juga www.droidriky.my.id

    BalasHapus
  21. wah alhamdulillah temu, makasih mbak

    BalasHapus
  22. Iya nih, jadi agak merepotkan sekarang. Sebelum posting harus ke mode html dulu untuk mengganti w dengan s di url imagenya. Tapi gak papa juga sih, tampilannya makin bagus dan bisa posting dari HP juga sekarang enak juga.

    Btw sekarang ada bug lagi di komentar. Gambar di komentar gak kebuka. Awalnya kukira cuma template blogku aja tapi setelah menjelajah blog lain ternyata sama. Semoga cepat di perbaiki pihak blogger

    BalasHapus
  23. hehehe... pernah tanya ini di IG a mbak. tapi lebih paham kalau baca tutorialnya langsung.

    Makasih mbak igniel, udah aku benerin blog nya dan berhasil ^^

    BalasHapus
  24. Anda siapa? kelihatannya, framework tema yang anda bagikan sama dengan yang saya buat. Nggak perlu delial, saya tahu pesis tema yang buat

    BalasHapus
    Balasan
    1. Framework apasi mas. Gak pake fremwok fremwokan kalo saya.

      Yang bisa bikin tema cuma anda aja ya emang?

      Hapus
    2. Lucu juga ya mbak dunia Blogger di Indonesia

      Hapus
  25. Mbak, mau tanya dong.
    Cara membuat gambar cover postingan seperti punya mbak ini pake aplikasi apa ya?

    Saya sudah cari tutorial nya, ga dpet. Terima kasih.

    BalasHapus
  26. Mbak gambar di artikel saya semuanya ambil dari situs lain jadi yang dipasang url gambar dari web lain. masalahnya kalo di related post yang pake media$thumbnail ngga muncul gambarnya.
    solusinya gimana mbak?

    BalasHapus
  27. Mantap mba ignil infonya, trimakasih banyak.

    BalasHapus
  28. terimakasih infonya kak

    BalasHapus
  29. Sempat pusing banget, soalnya saya pakai template ini di dua blog, yang log lama related postnya ada gambar sedangkan blog baru tidak ada. Ternyata di sino toh masalhne

    BalasHapus
  30. Kak igniel kenapa punyaku gak muncul artikel terkaitnya.
    https://www.ryanid.my.id/2021/05/astronom-temukan-planet-neraka-suhunya-2700-derajad-celcius.html

    BalasHapus
  31. Mantap nih mbak igniel bikin tutorial

    BalasHapus
  32. Mba tolong buatin tutorial cara memasang efek bergoyang pada gambar diblog...makasi

    BalasHapus
  33. mbak tolong buatin artikel cara bikin grid style yang kayak template igniplex ini dong.ditunggu ya mbak makasih

    BalasHapus
    Balasan
    1. soalnya aku cari sana sini belum ada artikel tutorial yang work

      Hapus
  • Centang kotak Beri tahu saya untuk mendapatkan notifikasi via email jika ada yang membalas komentar.
  • Jika ingin menulis kode maka harus di-parse terlebih dulu (terutama Javascript dan HTML)
  • Gunakan <i> untuk menuliskan kode. Contoh:
    <i>#comments</i>
  • Gunakan <em> untuk menuliskan kode yang lebih panjang atau URL. Contoh:
    <em>#comments {margin:0; padding:10px 15px}</em>
×

Berlangganan

Dapatkan pemberitahuan melalui email setiap ada artikel baru. Gratis!