Memperbaiki Thumbnail Gambar Buram (Blur) di Blogger - Deny Listianto

14 Juli 2018

Memperbaiki Thumbnail Gambar Buram (Blur) di Blogger

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.

Memperbaiki Thumbnail Gambar Buram (Blur) di Blogger

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'>
//<![CDATA[
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}
//thumbnail
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.

Memperbaiki Thumbnail Gambar Buram (Blur) di Blogger

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...
Disqus Codes
  • To write a bold letter please use <strong></strong> or <b></b>
  • To write a italic letter please use <em></em> or <i></i>
  • To write a underline letter please use <u></u>
  • To write a strikethrought letter please use <strike></strike>
  • To write HTML code, please use <code></code> or <pre></pre> or <pre><code></code></pre>
    And use parse tool below to easy get the style.
Show Parser Box

strong em u strike
pre code pre code spoiler
embed

Notifications

Disqus Logo