Cara mengatasi Thumbnail buram di homepage blog

Gambar buram terjadi karena ukuran thumbnail asli 72 pixel. Jika ukuran tampilan lebih besar, misalnya jadi 100 atau 300 pixel, maka gambar akan blur.
masalah lain gambar thumbnail adalah terpotong (cropped), tidak utuh. Default image thumbnail auto read more 72 pixel di homepage, biasanya gambar jadi buram alias blur blurry image.

Gambar atau postingan blog jadi tidak enak dipandang kerena gambarnya blur di halaman depan ataupun halaman dalam jelas menjadi masalah serius bagi sebagian blogger.

Untuk mengatasi gambar thumbnail buram dan terpotong, maka kita tinggal memasukan kode di bawah ini dalam template.

# Cara pertama

• Masuk ke blogger > Tema > Edit Html.
• Copas kode berikut ini di atas kode </body>

 <script type='text/javascript'>
//<![CDATA[
$(document).ready(function() {$('.post-thumbnails').attr('src', function(i, src)
{return src.replace( 's72-c', 's640' );});});
//]]>
</script> 

• Pastikan ada link ke kode jQuery di template blog Anda, seperti ini :

<script src='https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js' type='text/javascript'/>

• Jika kode jQuery tersebut belum ada, maka tambahkan di atas kode no. 2 atau di atas kode </head>.

• click Save

Dan cek, semoga gambar thumbnail tidak lagi buram dan terpotong, meski ukurannya kecil tidak seperti aslinya atau seperti yang muncul di halaman artikel.

Catatan:
- Kode .post-thumbnails adalah kode image/gambar yang buram di halaman depan. Sesuaikan dengan kode gambar thumbnail halaman depan blog Anda.

- Jika yang buram adalah gambar related post, maka ganti kode tersebut dengan kode gambar related post, misalnya .related-posts 

# Cara kedua

Cara mengatasi gambar blog yang buram lainnya, khususnya di homepage yang menggunakan auto readmore adalah sebagai berikut.

• Masuk ke blogger > Tema > Edit Html.
• Ganti kode :

<img expr:alt='data:post.title' expr:src='data:post.thumbnailUrl'/>

• dengan kode :

<b:with value='data:post.thumbnailUrl ? resizeImage(data:post.thumbnailUrl, 300, &quot;4:3&quot;) : data:post.thumbnail' var='image_bro'>
  <img expr:alt='data:post.title' expr:src='data:image_bro'/>
</b:with>

Dengan menggunakan kode di atas, secara otomatis akan mengubah kode s72-c menjadi w300-h225-p-k-no-nu dan membuat resolusi gambar thumbnail berubah dari 72px × 72px menjadi 300px × 225px.

begitulah cara untuk memperbaiki gambar yang blur atau buram di Blogger. Semoga dapat membantu. Terima kasih.