cara mengatasi gambar thumbnail blogger tidak muncul

Halo semuanya!
Di artikel kali ini, saya akan membagikan solusi efektif untuk mengatasi gambar thumbnail Blogger yang tidak muncul. Masalah ini biasanya terjadi karena pemblokiran URL gambar oleh provider tertentu, seperti yang pernah saya alami sendiri saat menggunakan provider Three (3).

Penyebab Gambar Thumbnail Blogger Tidak Muncul

Sumber gambar di Blogger lama biasanya menggunakan domain 1.bp.blogspot.com. Namun, beberapa provider internet memblokir akses ke domain ini, sehingga gambar di blog Anda tampil blank atau bahkan tidak muncul sama sekali.

Sebaliknya, blog-blog baru yang menggunakan hosting gambar terbaru seperti blogger.googleusercontent.com tidak akan terdampak masalah ini. Jadi, hanya blog lama yang masih memakai 1.bp.blogspot.com yang perlu diperbaiki.

Karena blog saya dibuat sejak tahun 2020, sebagian gambar di dalamnya masih menggunakan sumber lama tersebut. Jika postingan Anda sedikit, Anda bisa mengganti URL gambar satu per satu secara manual. Tapi, jika jumlah postingan Anda banyak, ada solusi otomatis yang jauh lebih cepat!

---

Solusi Otomatis: Mengganti URL Gambar Secara Cepat dengan JavaScript

Ikuti langkah berikut untuk memperbaiki semua gambar sekaligus:

1. Salin dan Tempelkan Script Berikut

Letakkan kode ini di atas tag </body> atau <!--</body>--> pada template Anda, lalu klik Simpan:

<script>
/*<![CDATA[*/
setInterval(function() {
    var imgBp = document.getElementsByTagName('img');
    for (var i = 0; i < imgBp.length; i++) {
        imgBp[i].src = imgBp[i].src.replace('1.bp.blogspot.com', '2.bp.blogspot.com');
    }
}, 1000);
/*]]>*/
</script>

2. Penjelasan Script

·         setInterval: Menjalankan perintah setiap 1 detik agar tetap efektif, bahkan saat blog Anda menggunakan lazyload.

·         getElementsByTagName('img'): Mengambil semua elemen gambar.

·         replace: Mengganti domain 1.bp.blogspot.com menjadi 2.bp.blogspot.com secara otomatis.

Tips: Jangan hapus setInterval agar tetap kompatibel dengan semua metode loading gambar!

---

Cara Mengatasi Thumbnail Related Post Tidak Muncul (Template Jagodesain)

Jika Anda menggunakan template dari Jagodesain, ada langkah tambahan agar thumbnail di widget "Related Posts" juga tampil normal.

1. Cari kode seperti ini:

r=("media$thumbnail" in x[q] && d.thumbnailSize!==false)?x[q].media$thumbnail.url.replace(...):d.noImage;

2. Modifikasi menjadi seperti ini:

r=("media$thumbnail" in x[q] && d.thumbnailSize!==false)?x[q].media$thumbnail.url.replace(...).replace('1.bp.blogspot.com', '2.bp.blogspot.com'):d.noImage;

Dengan perubahan ini, URL thumbnail yang lama otomatis diperbaiki.

---

Kesimpulan

Itulah solusi untuk mengatasi gambar thumbnail Blogger yang tidak muncul.
Dengan script sederhana ini, Anda tidak perlu repot mengganti URL satu per satu. Selain itu, untuk pengguna template tertentu seperti Jagodesain, sedikit modifikasi script akan membuat related posts tampil sempurna.

Semoga panduan ini membantu mengoptimalkan tampilan blog Anda!
Terima kasih sudah berkunjung. Sampai jumpa di artikel berikutnya!

---

FAQ (Pertanyaan yang Sering Diajukan)

Q: Apakah script ini memperlambat loading blog?
A: Tidak, script ini sangat ringan dan hanya memproses gambar yang sudah ada di halaman.

Q: Apakah solusi ini permanen?
A: Ini adalah solusi otomatis saat halaman dimuat. Untuk solusi permanen, Anda tetap perlu mengganti sumber gambar di setiap postingan jika memungkinkan.

Q: Apakah aman digunakan untuk semua template?
A: Ya, script ini aman digunakan di hampir semua template Blogger modern, terutama yang menggunakan lazyload.

 

By : Isbat Usman