
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:

Versi barunya menjadi begini:

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.
- Edit postingan yang gambarnya tidak muncul pada widget kustom.
- Pindah pada mode HTML (bukan Compose).
- Lihat kode gambar dan perhatikan nilai
src
. Jika memiliki format wXXX-hXXX, maka tinggal ganti menjadi sXXXX. - 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"/>
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.

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.
Pantesan...makasi bang infonya..
BalasHapusmantap dah lama ga ngeblog hihihi
BalasHapusTerima kasih infonya, sangat terbantu.
BalasHapusAda bug baru mbak, coba lihat paling atas blog, ada kode -->
BalasHapusKalau di blog saya berada di tengah atas, kalau di blog mbak igniel ada di kiri atas
Ini blogger ada update lagi mas. Cek postingan fanspage igniel.com untuk melihat solusinya.
Hapushttps://m.facebook.com/story.php?story_fbid=3463811533657705&id=106660612706164
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
HapusI 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 ;-)
BalasHapusmantap
BalasHapusTeh request artikel dong, tentang widget top komentar disqus di blog. Sebelumnya makasih teh, soalnya saya cari di google masih belum ada
BalasHapusIni maksudnya jumlah komentar terbanyak teh
HapusDalam artian orang yg paling banyak memberi komentar teh 🙏
Hapusdone dan berhasil, makasih tipsnya teh
BalasHapusKemarin saya ngalami yang begitu kak, akhirnya saya nyerah karena gk nemu jawaban soalnya keyword yang saya cari kurang tepat
BalasHapusEditor baru blogger sudah mulai diterapkan blum ya?
BalasHapusKira-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.
So great
BalasHapusHallo Mbak Igniel, mintol tutorial bikin slider mirip ignielplex.
BalasHapusSepertinya keren.
Terima kasih...
Iya ya, lebih keren kalau ada gambarnya.
BalasHapussudah q coba sperti diatas tapi ko tetap gak muncul ya mba gambarnya di widget
BalasHapusNice template kindly share this templates 😍
BalasHapusMbak bikin kan tutorial cara mengatasi document.write() dong. Punya saya bermasalah di sana, ini screenshootnya https://prnt.sc/uy7mwa
BalasHapussolusi lain bisa ganti ukuran sedang dg ukuran original. cuman ntar blog akan lebih berat bila ukuran gambar agak besar
BalasHapusupdate blogspot benar benar bikin repot
BalasHapusharus ganti s atau w h, pokoknya harus banyak uji coba
Bikin kepala pening
Template igniplex 2.6 infinite scroll-nya kok nggak aktif ya? Padahal udah aku ganti 1 nilainya tapi yang muncul 'load more.'
BalasHapusMohon solusinya mbak
Sudah dijawab terima kasih
BalasHapusMaaf out topik , teh bikinin tutorial bikin grid , list homepage kayak template ignilplex di template textrim dong ?🙏
BalasHapusmakasih infonya mbk. cek juga www.droidriky.my.id
BalasHapuswah alhamdulillah temu, makasih mbak
BalasHapusIya 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.
BalasHapusBtw 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
hehehe... pernah tanya ini di IG a mbak. tapi lebih paham kalau baca tutorialnya langsung.
BalasHapusMakasih mbak igniel, udah aku benerin blog nya dan berhasil ^^
cool
BalasHapusmakaaih infonya
BalasHapusmakasih infonya
BalasHapusAnda siapa? kelihatannya, framework tema yang anda bagikan sama dengan yang saya buat. Nggak perlu delial, saya tahu pesis tema yang buat
BalasHapusFramework apasi mas. Gak pake fremwok fremwokan kalo saya.
HapusYang bisa bikin tema cuma anda aja ya emang?
Lucu juga ya mbak dunia Blogger di Indonesia
Hapusngakkaakkkk
HapusNyimak heheheh
HapusGood job
BalasHapusMbak, mau tanya dong.
BalasHapusCara membuat gambar cover postingan seperti punya mbak ini pake aplikasi apa ya?
Saya sudah cari tutorial nya, ga dpet. Terima kasih.
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.
BalasHapussolusinya gimana mbak?
Mantap mba ignil infonya, trimakasih banyak.
BalasHapus