Cara Mengatasi Gambar Thumbnail Buram / Blur di Blogspot

Cara Mengatasi Gambar Thumbnail Buram / Blur di Blogspot - Sobat pasti pernah mengalami gambar postingan tiba-tiba kabur maupun blur di blog. Padahal kita tidak menambahkan kode-kode html kedalamnya. Jika iyah,  maka permasalahan itu terjadi dari tampilan blog atau template sobat. Nah, bagi sobat yang belum ngerti gambar blur itu apa, sobat bisa lihat contoh gambar dibawah ini.

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.

Terus cara memperbaiki gambarya gimana bang?

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-c

#4. Ganti menjadi :

s72-c-k-no

#5. Setelah itu simpan template. 

#6. Selesai.

2. Cara Mengatasi Gambar Thumbnail Buram / Blur di Blogspot Part 2

#1. Masuk ke blogger.

#2. Pilih tema > pilih edit html. 

#3. Disini sobat tinggal cari kode dibawah ini (temukan kode serupa jika terjadi pada thumbnail lain).

s72-c

Silahkan sobat ganti menjadi :

s72-c-k-no

#4. Setelah itu simpan tema dan lihat hasilnya.

#5. Selesai.

 

3. Cara Mengatasi Gambar Thumbnail Buram / Blur di Blogspot Part 3

#1. Masuk ke blogger.

#2. Pilih tema > pilih edit html. 

#3. Copy dan pastekan kode ini tepat DIATAS </head> atau &lt;/head&gt;&lt;!--<head/>--&gt;

<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.

#5. Selesai.

 

4. Cara Mengatasi Gambar Thumbnail Buram / Blur di Blogspot Part 4

#1. Masuk ke blogger.

#2. Pilih tema > pilih edit html. 

#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, &quot;4:3&quot;) : 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.

#5. Selesai.

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...

Tarra gambar blog sobat sudah kembali seperti normal lagi. Nah, begitulah cara untuk memperbaiki gambar yang blur atau buram di Blogger. Semoga dapat membantu. Terima kasih.

Share this post