Mengatasi Gambar [Img / Thumbnail] yang Tidak Muncul di Post dan Widget Blog

Sebagian dari blogger mungkin pernah mengalami masalah Gambar Image Thumbnail yang Tidak Muncul di Blog. Ini sebenarnya merupakan masalah yang membuat kita sedikit pusing. Bagaimana tidak, gambar yang sudah kita edit, dikompres dioptimasi dengan title teks dan alt namun setelah dicheck gambar malah blank.

Hal ini biasanya terjadi ketika ada kode pada gambar tersebut yang error. Namun anehnya, gambar / image yang kita pasang tetap muncul dalam postingan, namun pada widget (recent post, related post, popular post) dan halaman homepage justru tidak tampil dan hanya menampilakan "no image". Jenis gambar thumbnail yang muncul tergantung bawaan dar template blog yang digunakan.

Saya sudah sering membaca artikel tutorial yang dibagikan oleh banyak teman-taman blogger namun tidak pernah saya praktekkan karena memang saya tidak pernah mendapatkan masalah tersebut. Namun kali ini harus berusaha sendiri karena jenis kasusnya berbeda. 

Penyebab thumbnail tidak tampil

Beberapa hari yang lalu saya melakukan pembaharuan terhadap beberapa postingan yang saya anggap harus diupadete, beberapa diantaranya saya pasangkan script lazy load image pada gambar yang saya anggap berat saat diload. Setelah dipost ulang, malah terjadi blank pada homepage dan related post. Selidik punya selidik ternyata penyebabnya adalah error kode image pada bagian src atau data-src. Dan kasus ini baru terjadi setelah menggunakan editor blogger terbaru. Dan ini berlaku untuk gambar pertama dan tampil sebagai thumbnail, baik itu pada post maupun pada widget tertentu. Berikut ini contoh kasusnya.

1. Gambar normal dan muncul di postingan.

Gambar normal dan muncul di postingan

2. Gambar tidak muncul pada recent post

Gambar tidak muncul pada recent post

3. Thumbnail hilang pada Related post

Thumbnail hilang pada Related post

Beberapa thumbnail yang tidak tampil ini awalnya menjadi masalah bagi pengguna Blogger Versi Terbaru. Namun jika Anda masih menggunakan versi "Legacy Blogger", maka hal ini bukanlah menjadi masalah. Karena tampilan thumbnail tidak akan mengalami perubahan kode HTML.

Bagaimana Mengatasi Gambar Image Thumbnail yang Tidak Muncul di Blog?

Berikut ini adalah cara penanganan yang tepat untuk mengatasi img thumbnail yang tidak tampil. Pada tutorial ini, saya akan membahas khsuus untuk masalah thumbnail pada widget saja dan pada postingan.

1. Untuk image yang menggunakan lazy load.

Kasus ini terjadi jika kita sudah memasang lazyload (pada HTML) kemudian kembali kemenu compose maka data-data-src dan data-src gambar akan hilang ketika kembali ke mode HTML. seperti pada contoh dibawah ini.

gambar lazy load tidak tampil

• Silakan masuk ke Blogger 
• Klik Posts
• Pilih file yang thumbnailnya bermasalah
• selanjutnya masuk ke HTML

Untuk penggunaan HTML normal pada image lazy load, penampakannya akan seperti ini :

  <div class="separator" style="clear: both; text-align: center;">
    <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj65DW_DIstR7yyIR2YxOhaveo7oLxxZ2udnWF0_Vw0-raNMR9CvmGZcMZzXX-HQXRFLHM9pO6EK36rAugQxPpg_eCfsQKjko0RRunzWceHYaj0BgrV64WDvWjo5YhDfFlUjO5ojum9K4RO/" style="margin-left: 1em; margin-right: 1em;"><img alt="update windows" class="lazyload blur-up" data-original-height="864" data-original-width="1059" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj65DW_DIstR7yyIR2YxOhaveo7oLxxZ2udnWF0_Vw0-raNMR9CvmGZcMZzXX-HQXRFLHM9pO6EK36rAugQxPpg_eCfsQKjko0RRunzWceHYaj0BgrV64WDvWjo5YhDfFlUjO5ojum9K4RO/" src='data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==' title="Mengatasi program can't start because api-ms-win-crt-runtime-l1-1-0.dll is missing" /></a>
  </div>

Namun jika kita kembali kemenu compose dan kembali lagi ke mode HTML maka dan "data-src" akan hilang, atau seperti ini:

  <div class="separator" style="clear: both; text-align: center;">
    <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj65DW_DIstR7yyIR2YxOhaveo7oLxxZ2udnWF0_Vw0-raNMR9CvmGZcMZzXX-HQXRFLHM9pO6EK36rAugQxPpg_eCfsQKjko0RRunzWceHYaj0BgrV64WDvWjo5YhDfFlUjO5ojum9K4RO/" style="margin-left: 1em; margin-right: 1em;"><img alt="update windows" class="lazyload blur-up" data-original-height="864" data-original-width="1059" src='data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==' title="Mengatasi program can't start because api-ms-win-crt-runtime-l1-1-0.dll is missing" /></a>
  </div>

Dan hal inilah yang menyebabkan masalah gambar error pada postingan. Untuk mengatasi hal ini. usahakan setelah melakukan proses edit pada menu HTML, tidak usah kembali ke menu compose. Sebaiknya langsung update postingan di menu HTML karena jika tidak maka gambar akan kembali blank.

2. Untuk thumbnail pada widget (popular post, recent post, related post)

Perhatikan kode HTML gambar berikut ini:

<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhnnjqWq4UiSx0AOXvEkNsAl5foVDpvuRKjZkuKOq6UEJDgvo7coQ0Wb31TUpNOk0jSkjdYW-jkbk4bgtLZ9j6wSgyBtNsFil8Pmgd9lny5PG5u6W-RqUqvxsJtFBOQdftIj8FN6Fi7jlA/" style="margin-left: 1em; margin-right: 1em;"><img alt="program can't start because api-ms-win-crt-runtime-l1-1-0.dll is missing" data-original-height="405" data-original-width="675" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhnnjqWq4UiSx0AOXvEkNsAl5foVDpvuRKjZkuKOq6UEJDgvo7coQ0Wb31TUpNOk0jSkjdYW-jkbk4bgtLZ9j6wSgyBtNsFil8Pmgd9lny5PG5u6W-RqUqvxsJtFBOQdftIj8FN6Fi7jlA/d/program-cant-start-api-ms-win-crt-runtime-missing.png" title="Mengatasi program can't start because api-ms-win-crt-runtime-l1-1-0.dll is missing" /></a></div>

Sekilas, kode ini terlihat normal. Tapi coba perhatikan ketika saya mark sesuatu yang ganjil pada bagian src

<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhnnjqWq4UiSx0AOXvEkNsAl5foVDpvuRKjZkuKOq6UEJDgvo7coQ0Wb31TUpNOk0jSkjdYW-jkbk4bgtLZ9j6wSgyBtNsFil8Pmgd9lny5PG5u6W-RqUqvxsJtFBOQdftIj8FN6Fi7jlA/" style="margin-left: 1em; margin-right: 1em;"><img alt="program can't start because api-ms-win-crt-runtime-l1-1-0.dll is missing" data-original-height="405" data-original-width="675" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhnnjqWq4UiSx0AOXvEkNsAl5foVDpvuRKjZkuKOq6UEJDgvo7coQ0Wb31TUpNOk0jSkjdYW-jkbk4bgtLZ9j6wSgyBtNsFil8Pmgd9lny5PG5u6W-RqUqvxsJtFBOQdftIj8FN6Fi7jlA/d/program-cant-start-api-ms-win-crt-runtime-missing.png" title="Mengatasi program can't start because api-ms-win-crt-runtime-l1-1-0.dll is missing" /></a></div>

Kode tersebut akan selalu muncul setiap merubah gambar menjadi "original size" atau "ukuran asli". Untuk mengatasi masalah ini, silakan ubah /d/ menjadi /s1600/. Jika sudah, coba posting ulang Artikel Anda dan check setiap widget yang menggunakan thumbnail. Apakah sudah muncul? atau belum?. "Owh, ternyata cuma seperti itu". saya yakin ada diantara pembaca disini yang sudah mempraktekkannya dan berhasil mengucapkan kata tersebut atau miriplah...^_^

Mengatasi Image thumbnail tidak Tampil (Khusus Widget Featured Post)

Pada permasalahan berikutnya tentang gambar tidak muncul adalah pada pengaturan rss feed blog.

Pengaturan feed berlaku bagi beberapa template yang menggunakan widget featured post. Widget ini hanya akan berfungsi dan memunculkan gambar jika rss feed diset dalam mode full. Dan banyak template yang menggunakan widget ini. Untuk cara merubah feed menjadi full adalah:

• Masuk ke blogger
• Pilih Setting
• Klik Other
• Pada bagian Site Feed, ubah Allow blog feed menjadi Full.

Sekedar Info, bahwa beberapa perubahan baru yang terdapat pada Blogger Update memang masih banyak mengalami masalah "bug". Namun kita berharap bahwa masalah ini bisa segera diatasi oleh pihak blogger.

Demikian tutorial tentang Mengatasi Gambar Post dan Widget yang Tidak Muncul di Blog. Semoga bermanfaat. Jika ada yang kurang jelas, silakan dilanjutkan pada kolom komentar dibawah.

Share