Cara Mengatasi Gambar Thumbnail Post Blur (Buram) di Blogger Versi Terbaru


Cara Mengatasi Gambar Thumbnail Post Blur di Blogger Versi Terbaru
AdityaTekno.comCara Mengatasi Gambar Thumbnail Post Blur / Buram di Blogger Versi Terbaru. Gambar buram (blur) alias tidak jelas menjadi masalah serius bagi sebagian blogger. Gambar atau postingan blog jadi tidak enak dipandang karena gambarnya blur di halaman / 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.

Baca Juga : Cara Menambahkan Image Lightbox dengan Fancy Box di Blogger

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(&quot;<data:post.thumbnailUrl/>&quot;,&quot;<data:post.title/>&quot;));
</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

Pertama, buka Blogger >> Tema >> Edit HTML >> Kemudian cari kode pemanggil seperti ini (tiap tema bisa berbeda, silakan sesuaikan dengan tema yang anda 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://1.bp.blogspot.com/-SQLF0A_fpEw/XKJ0fE3-weI/AAAAAAAAOhg/6PFcbNMk_csbYQShGq0Bi8pX4cfkYGJMACLcBGAs/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. 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='&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 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. Salam AdityaTekno.com