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://1.bp.blogspot.com/-l9SL8uvfOZ4/XyK8RBOTC6I/AAAAAAAAI0c/n0aRv-GmIGIZowsFKugwSoBj8iku2wRMwCLcBGAsYHQ/sXXXX/gambar.jpg"/>

BARU:

<img src="https://1.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://1.bp.blogspot.com/-l9SL8uvfOZ4/XyK8RBOTC6I/AAAAAAAAI0c/n0aRv-GmIGIZowsFKugwSoBj8iku2wRMwCLcBGAsYHQ/w625-h351/gambar.jpg"/>

Ubah jadi seperti ini:

<img src="https://1.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
Terbaru Lebih lama
Artikel Terkait
16 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
  • 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!