Cara mengatasi Gambar (thumbnail) Beranda Blog yang Blur Agar Jelas Kembali

Santos el Salam

16 Agustus 2020

Seperti halnya yang pernah saya singgung pada artikel tutorial sebelumnya, pembaruan blogger memang cukup memudahkan bagi seorang penulis blog yang disibukkan dalam membuat konten di blognya. Namun bagi beberapa pengguna template tertentu, adanya pembaruan ini ternyata juga berpengaruh pada sebagian tampilan blog yang menjadi sedikit bermasalah.

Pada artikel sebelumnya, kita telah belajar tentang cara mengatasi munculnya tanda seperti panah di pojok atas header blog. Nah, pada artikel kali ini, kita akan kembali belajar mengatasi masalah lainnya yang timbul akibat dari pembaruan blogger, yakni gambar thumbnail beranda yang tiba-tiba menjadi blur baik pada tampilan web maupun mobile saat membuat postingan baru.

Sebetulnya permasalahan ini sudah beberapa bulan yang lalu saya alami, namun baru pada kesempatan kali ini saya ingin menuliskannya. Sebelumnya saya menggunakan cara manual untuk mengatasi masalah ini, yakni mengedit kembali postingan pada mode html dengan cara mengubah penulisan ukuran gambar menjadi sama dengan format penulisan ukuran gambar pada postingan sebelum terjadi pembaruan. Cara ini cukup ampuh untuk mengatasi gambar yang blur agar jelas kembali. Bahkan juga bisa untuk mengatasi widget custom yang tiba-tiba gambar hilang akibat adanya pembaruan dari blogger. 

Namun baru-baru ini saya menemukan cara lainnya yang lebih mudah, praktis, dan otomatis. Cara ini kebetulan saya dapatkan saat berkunjung ke blog Bungfrangki.com terkait masalah serupa. 

Perlu diketahui bahwa masing-masing template tentu memiliki kode berbeda sehingga bisa jadi caranya juga berbeda untuk mengatasi masalah seperti ini. Namun tidak ada salahnya jika anda ingin mencoba cara ini mungkin saja juga berhasil untuk mengatasi gambar thumbnail beranda blog anda yang menjadi blur. Bagaimana caranya?, simak langkah-langkah di bawah ini:

1. Buka akun blogger anda.

2. Pilih menu thema dan backup template lebih dulu untuk antisipasi.

3. Selanjutnya klik edit html untuk mengedit template. 

4. Cari kode berikut ini di dalam template anda. 

<a expr:href='data:post.url'><script type='text/javascript'> document.write(bp_thumbnail_resize(&quot;<data:post.thumbnailUrl/>&quot;,&quot;<data:post.title/>&quot;)); </script></a>

Mungkin ada dua kode seperti di atas dalam template anda, silahkan ganti keduanya dengan kode di bawah ini:

<b:if cond='data:post.thumbnailUrl'> <a expr:href='data:post.url'><img expr:alt='data:post.title' expr:src='resizeImage(data:post.thumbnailUrl, 450, "300:200")' expr:title='data:post.title'/></a>

Setelahnya gulir ke bawahnya lagi dan letakkan kode penutup </b:if> di atas (sebelum) kode </div> untuk element tersebut. Contoh hasil akhirnya menjadi seperti berikut ini:

<div class='post-thumbnail'> <b:if cond='data:post.thumbnailUrl'> <a expr:href='data:post.url'><img expr:alt='data:post.title' expr:src='resizeImage(data:post.thumbnailUrl, 450, "300:200")' expr:title='data:post.title'/></a> <b:else/>  <b:if cond='data:post.firstImageUrl'><a expr:href='data:post.url'><img expr:alt='data:post.title' expr:src='data:post.firstImageUrl' expr:title='data:post.title' itemprop='image'/></a><b:else/> <a expr:href='data:post.url'><div class='postthumb'><img expr:alt='data:post.title' expr:title='data:post.title' itemprop='image' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgfM2qM5g67L1DCim38xSPXSeJkiNOlGSKocyIrH-rld6eIcHCR_splBccyW0uU3DIzHAnMm3_BN5CYiVauqra1PNRD6s84xGVSzfR1va-VM45LmrZs_Jt5lwCDpflkMc7Dq6sPycSyh8M/s1600/picture_not_available.png'/></div></a>  </b:if> </b:if> </div>

5. Silahkan simpan kembali template anda dan lihat hasilnya.

Demikianlah informasi tentang Cara mengatasi gambar (thumbnail) beranda Blog yang menjadi blur agar menjadi jelas kembali. Semoga bermanfaat. 

Labels: Blogging

Thanks for reading Cara mengatasi Gambar (thumbnail) Beranda Blog yang Blur Agar Jelas Kembali. Please share...!

Facebook

Twitter