Solusi Masalah Image Blogger yang Blur (Kasus Terbaru Desember 2021)

Blogger tiap tahun selalu update hal baru. Itu artinya selalu akan ada masalah baru pada template Blogger. Sebagai orang yang paham koding, saya sih tidak masalah selama update tersebut masih bisa dijangkau dengan perbaikan kodenya. Yang susah kalau tidak bisa dijangkau alias hanya Google yang punya akses ke sana.

Sebenarnya masalah ini muncul sekitar 14 Desember 2021 lalu. Saya sendiri mendapati tampilan salah satu blog saya juga berantakan. Namun, masalah ini hanya muncul pada gambar yang di-upload di postingan yang baru saja. Yang lama, aman.

Di atas, adalah salah satu blog saya yang kena dampak update Blogger tahun ini dan belum saya perbaiki. Ada satu gambar nyempil kecil, sedangkan gambar yang lainnya aman.

Beberapa hari yang lalu pun, salah satu teman Blogger, Hoeda Manis juga mengalami masalah ini. Gambar di salah satu blognya mendadak blur untuk postingan terbarunya. Gambaran blur-nya seperti ini.

Blur di bagian Featured Post

Blur di bagian You Might Also Like

Apakah kamu mengalami hal yang sama? Panik ga, panik ga? Ya, pasti panik lah. Blur seperti itu memang tidak masalah sih, tapi 'kan tidak enak dipandang saja. Ada yang kurang dan mengganggu saja di otak.

Bahkan temanku, Hoeda Manis, sampai beli template blogger Sparks ke pembuatnya, siapa tahu sudah diperbaiki oleh pembuatnya. Karena Sparks ini template blogger tersedia free dan berbayar. Untuk yang free, kodenya dienkripsi. Yang berbayar tidak dienkripsi.

Namun, setelah beli yang berbayar dan dipasang di blognya, sama saja ternyata. Sama-sama blur-nya. Kemudian, temanku ini mencari beberapa tutorial di Google terkait masalah image Blogger yang blur. Sayangnya tidak membuahkan hasil yang memuaskan.

Karena hal inilah, saya pun tergerak untuk mengoprek dan mencari solusi masalah image Blogger yang blur ini. Hampir semua template Blogger yang menggunakan manipulasi JavaScript, akan mengalami masalah blur ini.

Bahkan di blog Iskael ini juga sama, hanya saja sudah saya perbaiki di tampilan terbaru Iskael kali ini.

Diagnosis: Mengapa Image Blogger Terbaru Bisa Blur?

Alasan mengapa image Blogger jadi blur karena ada format URL terbaru dari Google untuk image yang di-upload di Blogger. Tidak percaya? Coba bandingkan URL image yang baru dan yang lama.

Format image Blogger lama

https://1.bp.blogspot.com/-FNv7OkoH918/YaW9vFf7ZvI/AAAAAAAAQWU/yNKQEUZ7cLcpqxAj12euIxYbYfgnDJpVgCLcBGAsYHQ/w300-h180-p-k-no-nu/console-box-avanza.jpeg

Format image Blogger baru

https://blogger.googleusercontent.com/img/a/AVvXsEi9q5CUUxV6DlEPDpIxXEhnAYu2pOqRGJZA5DnGFv3xnVYG-auKYF2ZwcyNxGteX-W67NwURhnBIqIN7c9UbZJ1K-Yf7o9ft7_NWne9UFGTbP-C-CZEkujqh4RgV3DsfLI1mLdWJwYEWCFf1-A8POzk6G-Yuhv91CzO8eAPb_Ur10yLpeokl8jh8y75=w300-h180-p-k-no-nu

Kamu tahu letak bedanya di mana? Sudah saya tandai dengan warna merah dan biru. Yang jadi masalah adalah posisi yang saya tandai biru tersebut. Yang awalnya ada di tengah, kemudian ganti di belakang. Hal seperti akan membuat JavaScript yang sebelumnya dipasang di template tidak akan mengenali format image Blogger yang baru.

Solusi Agar Image Baru di Blogger Tidak Blur Lagi

Untuk kasus template Sparks ini, saya sudah menemukan solusinya. Ada 3 tempat yang harus diubah. Bagaimana dengan template yang lainnya? Saya rasa, mirip-mirip lah kodenya. Saya menemukan kode JavaScript tersebut banyak di template Blogger yang saya temui, entah itu yang gratis maupun berbayar. Ya, mungkin memang sudah jadi kode sejuta umat yah. Jadi sekalinya ada update, yang pakai kode JS tersebut error semua.

Peringatan penting: Backup template Blogger-mu terlebih dulu sebelum melakukan perubahan.

Kode 1

Temukan kode di bawah ini di template Blogger-mu.

See the Pen Kode 1 Lama by Iskandar Dzulkarnain (@iskael) on CodePen.

Lalu ganti dengan kode yang baru ini.

See the Pen Kode 1 Baru by Iskandar Dzulkarnain (@iskael) on CodePen.

Lalu klik "Simpan". Lihat apakah ada perubahan di tampilan blogmu?

Kode 2

Temukan kode di bawah ini di template Blogger-mu.

See the Pen Kode 2 Lama by Iskandar Dzulkarnain (@iskael) on CodePen.

Lalu ganti dengan kode yang baru ini.

See the Pen Kode 2 Baru by Iskandar Dzulkarnain (@iskael) on CodePen.

Lalu klik "Simpan". Lihat apakah ada perubahan di tampilan blogmu?

Kode 3

Temukan kode di bawah ini di template Blogger-mu.

See the Pen Kode 3 Lama by Iskandar Dzulkarnain (@iskael) on CodePen.

Lalu ganti dengan kode yang baru ini.

See the Pen Kode 3 Baru by Iskandar Dzulkarnain (@iskael) on CodePen.

Lalu klik "Simpan". Lihat apakah ada perubahan di tampilan blogmu?

Bagaimana? Apakah berjalan dengan mulus? Semoga saja begitu yah.

Harusnya jika berhasil, gambar di blogmu akan tajam kembali. Berikut ini adalah salah satu hasilnya yang saya terapkan di blog dummie saya.

Gambar di Featured Posts

Gambar di You Might Also Like

Jika ternyata template-mu tidak kompatibel dengan tutorial ini, harap hubungi pembuat template yang kamu pakai agar dia melakukan update terhadap template tersebut.

Update 30 Maret 2022 - Terjadi Perubahan Lagi

Ternyata pada akhir Maret 2022, terjadi lagi perubahan format URL image di Blogger. Hal ini terlihat setelah saya mendapatkan laporan dari teman saya. Akhirnya saya tes kembali membuat posting di blog dummie saya.

Blur pada Featured Post lagi

Blur pada You Might Also Like lagi

Setelah saya inspeksi, saya menemukan perubahan URL image lagi dari URL pertama blogger.googleusercontent.com/img/a menjadi blogger.googleusercontent.com/img/b. Tak hanya URL-nya, tapi letak parameter ukuran (seperti s72-c) juga berubah.

Solusi Update URL Image Blogger /img/b

Untuk mengatasi ini, saya sudah punya solusinya. Jika kamu sudah menerapkan "Kode 1" dan "Kode 2", perlu diganti beberapa hal saja. Cari kata blogger.googleusercontent.com di tema Blogger kamu, lalu ganti dengan blogger.googleusercontent.com/img/a.

Apakah cukup dengan mengganti itu saja? Ya, cukup dengan itu saja. Berikut ini hasilnya.

Bagaimana? Apakah kamu berhasil dengan solusi yang saya berikan? Semoga saja berhasil juga yah.