.png)
Gambar buram / ngeblur (blur) alias tidak jelas menjadi masalah serius bagi sebagian blogger.
Gambar postingan blog jadi tidak enak dipandang karena gambarnya blur di halaman home maupun postingan blog.
Hal ini disebabkan karena Blogger beberapa waktu lalu telah melakukan update User Interface yang memiliki tampilan lebih modern dan menu yang responsive.
Ada banyak hal baik setelah update UI Blogger dari versi klasik ke versi baru, namun ada juga hal yang kurang khususnya pada format URL gambar yang diupload langsung dari postingan berbeda dengan sebelumnya. Dan itu mengakibatkan gambar thumbnail menjadi blur.
Nah, untuk mengatasi gambar thumbnail post blur di Blogger versi terbaru, silahkan simak tutorialnya dibawah.
Biasanya kode JavaScript yang digunakan akan terlihat seperti ini :
<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>Kode JavaScript di atas saya ambil contoh dari tema Lunar versi free buatan IdnTheme, kode akan berbeda jika anda menggunakan tema yang lain. Dan untuk kode pemanggil markup-nya akan terlihat seperti ini :
<script type='text/javascript'>
document.write(lunarSummaryThumb("<data:post.thumbnailUrl/>","<data:post.title/>"));
</script>Nah, kode JavaScript di atas sekarang tidak bekerja dengan baik jika anda menggunakan UI Blogger versi terbaru. Maka dari itu, di sini saya akan memberikan cara untuk mengatasi thumbnail yang blur di post halaman index yang bekerja baik itu di UI Blogger versi klasik ataupun UI Blogger versi terbaru.
Cara Mengatasi Thumbnail Post Blur di Blogger Versi Terbaru
1. Pertama, buka Blogger >> Tema >> Edit HTML.
<script type='text/javascript'>
document.write(lunarSummaryThumb("<data:post.thumbnailUrl/>","<data:post.title/>"));
</script>3. 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, "300:200")' 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/AVvXsEiJodzovQkjkIdSLOCb9gDBLzmB_26zUVkOqHePb_i7bUcyVOTT4nISuDSOR9SW8YhrsRcRJflIMljxNolszBqM6fOKrBBPPAb6bP2lFhm94sROC0DVKnFLbBcVpva5uRYjgu6wqZ1zeCBR/s1600/noimage.png'/></div>
</a>
</b:if>
</b:if>Note: 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. Anda juga 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 anda ingin tetap mempersingkat tulisan, anda 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='"summary" + data:post.id'>
<data:post.body/>
</div>
<script type='text/javascript'>createSnippet("summary<data:post.id/>");</script>
</div>
</b:if>Abaikan jika di tema anda sudah terdapat kode snippet di atas
Setelah diterapkan silakan lihat hasilnya di blog anda.
Demikian tutorial Cara Mengatasi Gambar Thumbnail Post Blur di Blogger Versi Terbaru. Semoga bisa bermanfaat dan Terima kasih sudah berkunjung.