Mengatasi Thumbnail Post Blur di Blogger Versi Terbaru

Beberapa waktu lalu Blogger update User Interface yang memiliki tampilan lebih modern dan menu responsive.

Banyak hal positif setelah update UI Blogger dari versi klasik ke versi baru, namun ada juga hal yang kurang khususnya format URL gambar yang di upload langsung dari postingan berbeda dengan sebelumnya.

Pada artikel kali ini, 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.

Mengatasi Thumbnail Post Blur di Blogger Versi Terbaru

Pertama, buka Blogger > Klik menu Tema > Klik Edit HTML > Kemudian cari kode  pemanggil seperti dibawah 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 diatas 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/AVvXsEhEv99cw5MdPed-IDz5ookoCKQYMUfAtv5-Yi1hfSprJ5n2u5eioOBC4j4iWjPrjS0wTIAmKjx2JWL4tLwZxs0YrFlU2hZMct7OVw2Tw2RXKVMYwKXloihN5ueyP5xbb4IEfSktRTKXTON2/s1600/noimage.png'/></div>
      </a>
   </b:if>
</b:if>

Kemudian ganti kode yang ditandai dan tentukan sesuai kebutuhan.

Keterangan: Angka 280 menunjukan dimensi gambar yang akan tampil, 300:200 menunjukan rasio gambar dengan format landscape. Yang dimana 300 untuk lebar dan 200 untuk tinggi. Anda pun bisa mengubah rasio gambar dengan format lain. Misalnya, 1:1 (lebar dan tinggi sama) atau 4:3 atau 16:9 atau 21:9

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 kode untuk 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 diatas.

Setelah diterapkan silakan lihat hasilnya di blog sobat. Itulah cara mengatasi Thumbnail Post Blur di Blogger versi terbaru pada artikel kali ini. Semoga membantu.

Tweet