Featured Post

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.

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

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.

Mungkin Kamu Juga Suka...

Comments

  1. Yes! Udah aku coba tutorial ini, dan hasilnya bener-bener work! Ada dua kode yang aku ganti, sesuai tutorial ini, dan bagian featur post serta you might also like sekarang udah beres. Gambar-gambarnya udah jernih seperti semula. Cuma yang kode ketiga gak aku temukan di template.

    Thank you, John!

    ReplyDelete
    Replies
    1. Iya, kode yang ketiga memang tidak semua ada, tergantung fitur yang dipakai

      Sama2 Hoeda

      Delete
  2. Di blog aku gambarnya masih biasa saja sih tidak blur, semoga saja seterusnya begitu, soalnya pusing kalo masalah template.

    ReplyDelete
    Replies
    1. harusnya sih aman, kan mas Agus pakai template LinkMagz
      seandainya ada apa2, masih ada supportnya tuh dari Mas Sugeng

      Delete
  3. Iyaya kenapa pada ngeblur terus kalau nemu template, terutama untuk bagian related postnya. Makanya sekarang dibikin teks aja lah.. Hadeh, untung ada cara ngatasinya gini.. Aaaa coba tau dari dulu, baru dateng lagi. Tapi btw seperti ganti template baru nih yaa..

    ReplyDelete
  4. ternyata aku baru sadar jika related post di bawah posting juga ngeblur , langsung aq coba ah

    ReplyDelete
    Replies
    1. barusan aku cek bundakita mas, ternyata iya ngeblur
      emang belum ada update template LinkMagz dari Mas Sugeng buat kasus ini?

      Delete
  5. Baru nyadar template yg aku pake juga ternyata ngeblur wakakak fiksioner

    ReplyDelete
    Replies
    1. nah, tinggal nunggu update dari pembuat template nya mas

      Delete
  6. Btw, template blog ini keren. simple, boleh tau beli dmna? atau develop sendiri? hehe

    ReplyDelete
    Replies
    1. template blog ini bikin sendiri mas :)
      nanti ga tahu bakal aku jual atau bagikan secara gratis, kalo sudah jadi beneran
      ini masih ada beberapa bagian yang perlu dibenahi dulu

      Delete
  7. ini baru saya cek di blog saya juga aman,
    template gratisan padahal

    ReplyDelete
    Replies
    1. tergantung template nya mas
      kalo ga ada related post yang pake image, ga masalah :)

      Delete
  8. untuk template sevida2.5 gimana?

    ReplyDelete
    Replies
    1. untuk sevida 2.5 belum nyobain karena emang ga ada source code nya

      Delete
  9. Untuk template dari Sora Template gak ada ya?

    ReplyDelete
    Replies
    1. silakan sebutkan namanya atau url template nya mas
      nanti saya cobain di blog dummie dan temukan solusinya

      Delete
    2. https://animo-soratemplates.blogspot.com/

      Itu gan

      Delete
  10. gan, gimana sih cara masukin gambar dari blogger post ke template. sekarang khan alamat source image berubah ke https://blogger.googleusercontent.com ya jadi ga bisa dimasukan ke EDIT HTML nya blogger. gimana ya cara masukan gambar ke template?

    ReplyDelete
    Replies
    1. bukannya sama saja yah caranya dengan URL sebelumnya?

      kalo tidak bisa, ada notif error apa?

      Delete

Post a Comment