Ketika aku browsing dan melihat blog lain, ada juga yang mengalami hal yang sama, kemudian setelah diteliti ternyata markup untuk gambar blogger berubah dari s72-c menjadi s72-c-k-no.
Kok bisa gitu bang?
Kalau menurut aku, dikarenakan template yang kita gunakan merupakan template pihak ketiga atau gratis dari searching di google. Jadi, setiap perubahan yang terjadi di tampilan blog sobat, pihak ketigalah yang menentukannya.
Untuk cara memperbaikinya sobat bisa mengikuti panduannya dibawah ini.
1. Cara Mengatasi Gambar Thumbnail Buram / Blur di Blogspot Part 1
#1. Buka Blogger.
#2. Pilih menu tema > pilih edit html.
#3. Cari kode ini :
s72-cs72-c-k-no#6. Selesai.
2. Cara Mengatasi Gambar Thumbnail Buram / Blur di Blogspot Part 2
#1. Masuk ke blogger.
#3. Disini sobat tinggal cari kode dibawah ini (temukan kode serupa jika terjadi pada thumbnail lain).
s72-cSilahkan sobat ganti menjadi :
s72-c-k-no#4. Setelah itu simpan tema dan lihat hasilnya.
3. Cara Mengatasi Gambar Thumbnail Buram / Blur di Blogspot Part 3
#1. Masuk ke blogger.
#3. Copy dan pastekan kode ini tepat DIATAS </head> atau </head><!--<head/>-->
<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>#4. Setelah itu simpan tema dan lihat hasilnya.
4. Cara Mengatasi Gambar Thumbnail Buram / Blur di Blogspot Part 4
#1. Masuk ke blogger.
#3. Cari kode seperti di bawah ini. Letaknya bisa di post var='post' atau mobile-index-post, tergantung versi yang sobat 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, "4:3") : data:post.thumbnail' var='image_bro'>
<img expr:alt='data:post.title' expr:src='data:image_bro'/>
</b:with>#4. Setelah itu Simpan Tema dan lihat hasilnya.
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 sobat 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 sobat.
- Pada kode HTML di atas, aku menggunakan rasio 4:3. Silahkan diubah sesuai kebutuhan sobat.
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…