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.

Artikel Terkait

59 komentar

Komentar TIDAK DAPAT DIHAPUS setelah dikirim. Pikirkan sebelum menulis.
  • Menulis kode gunakan <i>kode</i> (kode harus di-parse)
  • Menulis dalam syntax highlighter gunakan <em>kode panjang</em> (kode harus di-parse)
  • Menyisipkan gambar gunakan <strong>URL GAMBAR</strong>
  • Mahesa Putra
    8/1/22
    Profil: https://www.blogger.com/profile/07785739052164434619
    Sekarang juga blogger update lagi masalah gambar, awalnya 1.bp menjadi blogger,googleuser ontent.com. Banyak gambar dengan url tersebut tidak muncul, apakah ada solusi mbak? karna saya ada template yang belum pernah di update (dari pihak pembuat sudah gk pernah mengalami pembaruan)
    • Kiki Holmes
      9/1/22
      Profil: https://www.blogger.com/profile/01910153405428570820
      sama kak igniel. kalo untuk yg blogger.googleusercontent itu gimana solusinya...
  • Marfa Umi
    16/12/21
    Profil: https://www.blogger.com/profile/05885966094455820968
    Hi Kak Rain, I just found out kalau format untuk gambar ini berubah lagi dan jadi tak muncul thumbnailnya. Sebelumnya dari 1bp ke blogger,googleusercontent. Bila berkenan, apakah Kak Rain dapat menuliskan solusinya untuk ini? Thank a lot dan sehat-sehat selalu!
  • Novalir Project
    20/8/21
    Profil: https://www.blogger.com/profile/04225442724675871365
    Sekaran url gambarnya di blogku jadi https://blogger.googleusercontent.com/img/a/xxx. Sudah tidak pake 1.bp.blogspot.xxx. Alhasil related postnya tidak mucul thumb nya. nunggu update solusi dari mba igniel
    • AlbinusTejoS
      2/12/21
      Profil: https://www.blogger.com/profile/14150598596002626212
      Iya... sama...
      Kayaknya diubah lg sm google...

      Masih menunggu update baru dr mbak igniel
  • Chakly Raflesia
    6/8/21
    Profil: https://www.blogger.com/profile/02106258514379347993
    Mbak enak banget template mbak, Meskipun padet tapi kokoh dan lincah. Gimana caranya euy?
  • Abdul Rahim
    10/7/21
    Profil: https://www.blogger.com/profile/18324895804097516935
    klo gk munculnya img nya di halaman label gimn mbak? tp sebagian post ada yg muncul.
  • Bgsaprll
    20/5/21
    Profil: https://www.blogger.com/profile/17528812749393643697
    mbak tolong buatin artikel cara bikin grid style yang kayak template igniplex ini dong.ditunggu ya mbak makasih
    • Bgsaprll
      20/5/21
      Profil: https://www.blogger.com/profile/17528812749393643697
      soalnya aku cari sana sini belum ada artikel tutorial yang work
  • ཞıʄզı ąƖʄı
    15/5/21
    Profil: https://www.blogger.com/profile/10582652113899801611
    Mba tolong buatin tutorial cara memasang efek bergoyang pada gambar diblog...makasi
  • Arief Setiawan
    14/5/21
    Profil: https://www.blogger.com/profile/07320814481780110855
    Mantap nih mbak igniel bikin tutorial
  • Jurnalis
    1/5/21
    Profil: https://www.blogger.com/profile/10668643000251508781
    Kak igniel kenapa punyaku gak muncul artikel terkaitnya.
    https://www.ryanid.my.id/2021/05/astronom-temukan-planet-neraka-suhunya-2700-derajad-celcius.html
  • Odi
    19/3/21
    Profil: https://www.blogger.com/profile/16580767343066238147
    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
  • Galeh | <a href="https://www.jagoanredesign.eu.org" title="Jagoan Redesign" rel="nofollow">Jagoan Redesign</a>
    13/3/21
    Profil: https://www.blogger.com/profile/02681139099613685938
    Mantapni artikelnya
  • Kophi Ocha
    4/3/21
    Profil: https://www.blogger.com/profile/05672835712320990638
    terimakasih infonya kak
  • Rafiqi, S.Kom.
    14/1/21
    Profil: https://www.blogger.com/profile/04859597823618848770
    Mantap mba ignil infonya, trimakasih banyak.
  • Admin
    15/12/20
    Profil: https://www.blogger.com/profile/14240392561009953000
    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?
  • Unknown
    12/12/20
    Profil: https://www.blogger.com/profile/04101375763781307492
    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.

    • Igniel
      24/7/21
      Profil: https://www.blogger.com/profile/09199170379661896200
      Yang gratis dan mudah bisa pake Canva mas.
  • Sterno Pena
    12/12/20
    Profil: https://www.blogger.com/profile/14419423950637212304
    Good job
  • Arlina
    28/11/20
    Profil: https://www.blogger.com/profile/07405635929635938311
    Anda siapa? kelihatannya, framework tema yang anda bagikan sama dengan yang saya buat. Nggak perlu delial, saya tahu pesis tema yang buat
    • Igniel
      28/11/20
      Profil: https://www.blogger.com/profile/09199170379661896200
      Framework apasi mas. Gak pake fremwok fremwokan kalo saya.

      Yang bisa bikin tema cuma anda aja ya emang?
    • Mas Dar
      28/11/20
      Profil: https://www.blogger.com/profile/03825156171958239756
      Lucu juga ya mbak dunia Blogger di Indonesia
    • IbnustaSpace
      28/11/20
      Profil: https://www.blogger.com/profile/09510427778716253518
      ngakkaakkkk
    • Ikhsan Coegraphy
      28/11/20
      Profil: https://www.blogger.com/profile/15905808504862936689
      Nyimak heheheh
  • AY Poduction
    25/11/20
    Profil: https://www.blogger.com/profile/18320323531126054955
    makasih infonya
  • AY Poduction
    25/11/20
    Profil: https://www.blogger.com/profile/18320323531126054955
    makaaih infonya
  • Make money quick
    23/11/20
    Profil: https://www.blogger.com/profile/15549938947916904952
    cool
  • Narasi Nia
    21/11/20
    Profil: https://www.blogger.com/profile/14971582159258141090
    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 ^^
  • Riizhu
    18/11/20
    Profil: https://www.blogger.com/profile/03756997753867283305
    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
  • PayuBaco
    10/11/20
    Profil: https://www.blogger.com/profile/02293372772988889351
    wah alhamdulillah temu, makasih mbak
  • riky setiomulyo
    4/11/20
    Profil: https://www.blogger.com/profile/07652010182986100016
    makasih infonya mbk. cek juga www.droidriky.my.id
  • Sasya Nova
    2/11/20
    Profil: https://www.blogger.com/profile/02726782493218030966
    Maaf out topik , teh bikinin tutorial bikin grid , list homepage kayak template ignilplex di template textrim dong ?🙏
  • Arjuno
    31/10/20
    Profil: https://www.blogger.com/profile/06741705137550228025
    Sudah dijawab terima kasih
  • Arjuno
    28/10/20
    Profil: https://www.blogger.com/profile/06741705137550228025
    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
  • Djangkaru Bumi
    27/10/20
    Profil: https://www.blogger.com/profile/00526825525563935443
    update blogspot benar benar bikin repot
    harus ganti s atau w h, pokoknya harus banyak uji coba
    Bikin kepala pening
  • azid zainuri
    23/10/20
    Profil: https://www.blogger.com/profile/02060927327463751203
    solusi lain bisa ganti ukuran sedang dg ukuran original. cuman ntar blog akan lebih berat bila ukuran gambar agak besar
    • La Sidin
      23/1/21
      Profil: https://www.blogger.com/profile/13465444834119799778
      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).
  • Saifullah.id
    13/10/20
    Profil: https://www.blogger.com/profile/01297676871626205778
    Mbak bikin kan tutorial cara mengatasi document.write() dong. Punya saya bermasalah di sana, ini screenshootnya https://prnt.sc/uy7mwa
    • Malestea
      10/4/21
      Profil: https://www.blogger.com/profile/01230509647052706348
      Memang tidak dianjurkan kalau pakai document.write, lebih baik di ubah ke innerHTML
  • RN
    8/10/20
    Profil: https://www.blogger.com/profile/05943938075464558081
    Nice template kindly share this templates 😍
  • Sang Prabu
    27/9/20
    Profil: https://www.blogger.com/profile/04443004242282164886
    sudah q coba sperti diatas tapi ko tetap gak muncul ya mba gambarnya di widget
  • Agung Pushandaka
    27/9/20
    Profil: https://www.blogger.com/profile/03858182728022647549
    Iya ya, lebih keren kalau ada gambarnya.
  • Admin Website
    24/9/20
    Profil: https://www.blogger.com/profile/17139739548205527884
    Hallo Mbak Igniel, mintol tutorial bikin slider mirip ignielplex.

    Sepertinya keren.
    Terima kasih...
  • A. Samuel
    15/9/20
    Profil: https://www.blogger.com/profile/06638924077246276298
    So great
  • Sultan Bisnis Online
    31/8/20
    Profil: https://www.blogger.com/profile/03857057477811086661
    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.
  • R Ayi Hendrawan S
    29/8/20
    Profil: https://www.blogger.com/profile/01866158356207006252
    Kemarin saya ngalami yang begitu kak, akhirnya saya nyerah karena gk nemu jawaban soalnya keyword yang saya cari kurang tepat
  • bisotisme.com
    29/8/20
    Profil: https://www.blogger.com/profile/05755123601965075548
    done dan berhasil, makasih tipsnya teh
  • Tidak Suka Dibohongi
    25/8/20
    Profil: https://www.blogger.com/profile/03720204268579546961
    Teh request artikel dong, tentang widget top komentar disqus di blog. Sebelumnya makasih teh, soalnya saya cari di google masih belum ada
    • Tidak Suka Dibohongi
      25/8/20
      Profil: https://www.blogger.com/profile/03720204268579546961
      Ini maksudnya jumlah komentar terbanyak teh
    • Tidak Suka Dibohongi
      25/8/20
      Profil: https://www.blogger.com/profile/03720204268579546961
      Dalam artian orang yg paling banyak memberi komentar teh 🙏
  • Unknown
    12/8/20
    Profil: https://www.blogger.com/profile/09983698423207763527
    mantap
  • Arkadiusz Narowski
    12/8/20
    Profil: https://www.blogger.com/profile/02294557651805612092
    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 ;-)
  • Saifullah.id
    10/8/20
    Profil: https://www.blogger.com/profile/01297676871626205778
    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
    • Igniel
      10/8/20
      Profil: https://www.blogger.com/profile/09199170379661896200
      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
    • Saifullah.id
      11/8/20
      Profil: https://www.blogger.com/profile/01297676871626205778
      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
  • Nafrizal Pratama
    10/8/20
    Profil: https://www.blogger.com/profile/09526819180069577684
    Terima kasih infonya, sangat terbantu.
  • Riedayme
    7/8/20
    Profil: https://www.blogger.com/profile/06842964811765796933
    mantap dah lama ga ngeblog hihihi
  • Rico
    4/8/20
    Profil: https://www.blogger.com/profile/17977275288660279677
    Pantesan...makasi bang infonya..