Memperbaiki Thumbnail Gambar Buram (Blur) di Blogger

Resolusi standar dari Blogger untuk gambar thumbnail hanya sebesar 72pixel, dapat dilihat pada url gambar thumbnail tercantum kode s72-c.

Jika terjadi gambar blur atau buram biasanya terlalu besar atau terlalu kecil ukuran gambar thumbnail-nya, seperti contoh gambar di bawah ini.

Bagi yang ingin memperbaikinya, saya akan berbagi tiga cara memperbaiki atau memperjelas thumbnail gambar buram, blur, brecek, bureng, pecah-pecah di blogger.

Cara Memperbaiki atau Memperjelas Thumbnail Gambar Buram atau Blur di Blogger

Silahkan gunakan satu cara yang menurut sobat bisa atau Work untuk tema sobat, berikut tutorialnya.
Cara Yang Pertama
Cara yang pertama ini cukup mudah. silakan sobat buka menu Tema Klik Edit HTML Di sini Sobat tinggal cari kode dibawah ini (Temukan kode serupa jika terjadi pada thumbnail lain)

s72-c

Silahkan sobat ubah menjadi :

s72-c-k-no

Setelah itu Simpan Tema dan lihat hasilnya, jika tidak berpengaruh lanjut cara berikutnya.
Cara Yang Kedua
Cari kode </head> atau &lt;/head&gt;&lt;!--<head/>--&gt;, Lebih mudanya untuk mencari tekan tombol CTRL + F pada keyboard, lalu cari.
Jika sudah ketemu silahkan letakkan kode dibawah ini sebelum kode yang telah dicari diatas.

<script type='text/javascript'>

function removeHtmlTag(n,e){if(-1!=n.indexOf("<")){for(var t=n.split("<"),i=0;i<t.length;i++)-1!=t[i].indexOf(">")&&(t[i]=t[i].substring(t[i].indexOf(">")+1,t[i].length));n=t.join("")}for(e=e<n.length-1?e:n.length-2;" "!=n.charAt(e-1)&&-1!=n.indexOf(" ",e);)e++;return n=n.substring(0,e-1),n+"..."}function createSnippet(n){var e=document.getElementById(n),t=snippet_count,i='<div class="snippets">'+removeHtmlTag(e.innerHTML,t)+"</div>";e.innerHTML=i}

function bp_thumbnail_resize(e,t){var n=310;var r=310;image_tag='<img width="'+n+'" height="'+r+'" src="'+e.replace("/s72-c/","/w"+n+"-h"+r+"-c/")+'" alt="'+t.replace(/"/g,"")+'" title="'+t.replace(/"/g,"")+'"/>';if(t!="")return image_tag;else return""}

</script>

Setelah itu Simpan Tema dan lihat hasilnya, jika tidak berpengaruh seilahkan gunakan cara berikutnya.
Cara Yang Ketiga
Cari kode seperti di bawah ini. Letaknya bisa di post var='post' atau mobile-index-post, tergantung versi yang Anda gunakan.

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

Hapus kode di atas, kemudian ganti dengan kode di bawah ini.

<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. Dengan demikian gambar thumbnail akan terlihat jelas meskipun ukurannya diperbesar.
Keterangan :

• Silahkan ganti angka 300 sesuai dengan kebutuhan. Jika lebar maksimal untuk gambar thumbnail blog Anda hanya 200px, sebaiknya turunkan angkanya menjadi 200 saja. Karena jika terlalu tinggi angkanya, itu bisa menjadi beban bagi pengguna atau bisa dikatakan terjadi pemborosan data, kasihan pengunjung blog Anda.
• Pada kode HTML di atas, saya menggunakan rasio 4:3. Silahkan diubah sesuai kebutuhan Anda

Setelah itu Simpan Tema dan lihat hasilnya, jika berhasil maka gambar thumbnail terlihat jelas atau tidak blur, pecah-pecah, dan buram. Seperti pada gambar dibawah ini.

Oke mungkin sampai disini dulu tutorial Memperbaiki Thumbnail Gambar Buram (Blur) di Blogger, apabila cara di atas tidak ada yang work sama sekali silahkan tinggalkan komentar dibawah atau cari cara lain. Selaman Mencoba dan Somoga Sukses...

Share this post