Mengatasi Gambar Thumbnail Post Blur di Blogger Versi Terbaru

Pada waktu lalu Blogger sudah update tampilan UI terbarunya yang sekarang menjadi enak dipandang mata dan tentu resposive pada perangkat mobile. Tentu dengan tampilan baru Blogger yang sekarang banyak keunggulan dan fitur yang ditambahkan akan tetapi ini berpengaruh pada gambar pada yang menjadi blur.

<script type='text/javascript'>
snippet_count = 0;
//<![CDATA[
var mql = window.matchMedia('screen and (min-width: 40em)');if (mql.matches){
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 lunarSummaryThumb(e,t){var n=320;var r=200;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""}}
var mql = window.matchMedia('screen and (max-width: 40em)');if (mql.matches){
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 lunarSummaryThumb(e,t){var n=728;var r=480;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>

<script type='text/javascript'>
   document.write(lunarSummaryThumb(&quot;<data:post.thumbnailUrl/>&quot;,&quot;<data:post.title/>&quot;));
</script>

Mengatasi Gambar Thumbnail Post Blur di Blogger Versi Terbaru

Pertama, buka Blogger > Klik menu Tema > Klik Edit HTML > Kemudian cari kode pemanggil seperti ini (Tiap tema bisa berbeda, silakan sesuaikan dengan tema yang sobat gunakan) :

<script type='text/javascript'>
   document.write(lunarSummaryThumb(&quot;<data:post.thumbnailUrl/>&quot;,&quot;<data:post.title/>&quot;));
</script>

Setelah itu ganti kode pemanggil dan JavaScript seperti kode di atas dengan kode ini

<b:if cond='data:post.thumbnailUrl'>
   <a class='thumb' expr:href='data:post.url'>
   <img class='lazy' expr:alt='data:post.title' expr:src='resizeImage(data:post.firstImageUrl, 280, &quot;300:200&quot;)' height='186' width='280'/>
   </a>
   <b:else/>
   <b:if cond='data:post.firstImageUrl'>
      <a expr:href='data:post.url' expr:title='data:post.title'><img class='lazy' expr:alt='data:post.title' expr:src='data:post.firstImageUrl' expr:title='data:post.title' itemprop='image'/></a>
      <b:else/>
      <a expr:href='data:post.url' expr:title='data:post.title'>
         <div class='postthumb'><img class='lazy' expr:alt='data:post.title' expr:title='data:post.title' itemprop='image' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh_p6xUv7m1919hvTTkgzZdrSrEXt62aYuwLUTERI-l09XR-XNuS6N2qxgfl-M-AyCuP28HfTnppjueoVPdSJZQ9rXBeomRMEqxeOf0ehS2LU9sL1LI5xGxoaVGiwNM6IIju8f09xaZmeKu/s1600/noimage.png'/></div>
      </a>
   </b:if>
</b:if>

Kemudian ganti kode yang ditandai dan tentukan sesuai kebutuhan.

Angka 280 menunjukkan dimensi gambar yang akan tampil, 300:200 menunjukkan rasio gambar dengan format landscape. Yang dimana 300 untuk lebar dan 200 untuk tinggi. Sobat pun bisa mengganti rasio gambar dengan format lain. Misalnya : 1:1 (lebar dan tinggi sama) atau 4:3 atau 16:9 atau 21:9 Namun sayang sekali Blogger belum mendukung untuk rasio gambar dengan format portrait, sehingga ukuran tinggi gambar tidak akan bisa melebihi lebar gambar.

Ada baiknya jika sobat ingin tetap mempersingkat tulisan, sobat masih tetap menyimpan kode snippet seperti ini :

<script>
snippet_count = 120;
//<![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}
//]]>
</script>

Dan untuk kode pemanggilnya seperti ini :

<b:if cond='data:view.isMultipleItems'>
   <div itemprop='description articleBody'>
      <div expr:id='&quot;summary&quot; + data:post.id'>
         <data:post.body/>
      </div>
      <script type='text/javascript'>createSnippet(&quot;summary<data:post.id/>&quot;);</script>
   </div>
</b:if>

Abaikan jika di tema sobat sudah terdapat kode snippet di atas

Setelah diterapkan silakan lihat hasilnya di blog sobat.