Memperbaiki Gambar Thumbnail Yang Buram di Blog

Anda harus mengetahui resolusi standar dari Blogger untuk gambar thumbnail hanya sebesar 72pixel, bisa kita lihat pada url gambar thumbnail tersebut akan tercantum kode s72-c.

Penyebab dari gambar blur atau buram itu karena gambar terlalu besar atau terlalu kecil ukuran thumbnail-nya, kita lihat contoh dibawah ini.

Pastinya Anda ingin sekali memperbaikinya, kalau begitu saya pengalaman cara memperbaiki atau memperjelas thumbnail gambar buram, blur, pecah-pecah khususnya di blogger. Ada tiga cara!

Cara Memperbaiki atau Memperjelas Gambar Thumbnail yang Buram di Blog

Silahkan dicoba satu-satu cara yang bisa atau Work pada tempale yang anda gunakan, berikut tutorialnya.
Cara Yang Pertama
Cara yang pertama ini cukup mudah. Jika menggunakan blogger silakan buka menu Tema Klik Edit HTML Nah di sini tinggal mencari kode (Temukan kode dibawah ini jika)

s72-c

Dan cobalah ganti dengan kode :

s72-c-k-no

Selesai, Simpan Tema dan kunjungi blog yang sudah diedit templatenya tadi, apa sudah berhasih? jika gagal coba cara berikut ini.
Cara Yang Kedua
Cari kode </head> atau &lt;/head&gt;&lt;!--<head/>--&gt;, Susah mencari kode tersebut? gunakan tombol CTRL + F pada keyboard, lalu cari.
Anggap saja kode diatas sudah ketemu. Salin dan tempel kode dibawah ini sebelum tag </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>

Selesai, Simpan Tema dan cek halaman blognya, apakah masih tidak berhasil? tenang masih ada cara selanjutnya.
Cara Yang Ketiga
Cari kode seperti ini gunakan CTRL + F agar lebih mudah. 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, "4:3") : data:post.thumbnail" var="image_bro"> <img expr:alt="data:post.title" expr:src="data:image_bro" /> </b:with>

Dengan begitu, script tersebut secara otomatis mengubah dari kode s72-c akan menjadi w300-h225-p-k-no-nu dan bisa membuat resolusi gambar thumbnail berubah dari 72px × 72px menjadi 300px × 225px. Maka gambar thumbnail akan terlihat jelas meskipun ukurannya diperbesar.
Keterangan :

• Angka 300 bisa diubah disesuaikan dengan template. Jika lebar maksimal untuk gambar thumbnail blog  hanya 200px, lebih baik  ribah angkanya menjadi 200. Lebih baik angkanya jadikan lebih rendah, karena itu bisa meringankan loading suatu halaman, pengunjung akan senang.
• Pada kode HTML di atas, bisa dilihat itu menggunakan rasio 4:3. Silahkan diubah sesuaikan dengan template yang Anda gunakan.

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

Oke mungkin sampai disini dulu tutorial Memperbaiki Gambar Thumbnail Yang Buram di Blog, apabila cara di atas tidak ada yang work sama sekali silahkan tinggalkan komentar dibawah atau cari cara lain. Selaman Mencoba.

• Twitter
• Facebook
• Google
• Tumblr
• Pinterest

Subscribe to receive free email updates: