Cara Mengatasi Thumbnail Post Blur di Blogger

Setelah Blogger mengupdate sistem User Interface (UI) yang dia miliki beberapa saat lalu tampilan menjadi lebih responsive dan terlihat sangat modern. Sebenarnya banyak hal hal yang semakin bagus setelah Blogger mengupdate UI nya dari dulu yang klasik menjadi yang sekarang dengan versi baru yang lebih bagus, akan tetapi... iya sih tampilan lebih bagus dan ada banyak peningkatan tetapi ada juga permasalahan baru yang muncul. Apabila kalian mengunggah foto maka format foto di blogger versi baru ini berbeda dengan blogger versi klasik.


Bagi kalian yang menggunakan template mendapat masalah seperti ini tidak usah khawatir, di sini aku akan membagikan tutorial tentang Cara Mengatasi Thumbnail Post Blur di Blogger. Bagaimana caranya untuk mengatasinya langsung saja kalian baca tutorial di bawah ini:

Mengatasi Thumbnail Post Blur di Blogger Versi Terbaru

Buka Blogger > Klik menu Tema > Klik Edit HTML > Kemudian kalian cari code pemanggilnya seperti ini contohnya (Ingat setiap tema menggunakan code yang berbeda beda, di sini aku hanya menggunakan contoh ini dan mungkin di templat blog kalian bisa berbeda) :

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

Setelah itu kalian ganti code pemanggil dan JavaScript seperti code di atas dengan code di bawah 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/AVvXsEgf81GMZk2CbaEbs8CBRR4nVcRux1wh67845jK0lAppnbBuMIwd31OgJ1Yg_hd52nmhqqWb7yRjRVTAN2UIkhXMkKfihf-DJBF1t1QflOtX-46KZDjMQ9DjnHnidI8Sx0VSr-HN7xx9ZEZP/s1600/noimage.png'/></div>
      </a>
   </b:if>
</b:if>

Kalian bisa mengganti kode yang aku tandai pada code di atas sesuai kemauan kalian.

Angka 280 menunjukkan dimensi gambar, 300:200 menunjukkan rasio gambar. Yang lebih rincinya begini 300 itu untuk lebar gambarnya dan 200 untuk tinggi gambarnya. Kalian juga bisa mengganti rasio gambarnya jika kalian mau. contohnya : 1:1 atau 4:3 atau 16:9 atau 21:9 ( untuk blog ini aku menggunakan 3:2 atau 300:200 ) Akan tetapi untuk format portrait kelihatannya blogger masih belum support, sehingga tinggi gambar tidak boleh sampai melebihi lebar gambar.

Jika di template blog yang kalian gunakan terdapat code di bawah 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 code 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>

Sebaiknya jangan kalian hapus dan apabila di template blog kalian tidak ada kalian bisa menambahkannya.

Selesai dah.

Begituah Cara Mengatasi Thumbnail Post Blur di Blogger Versi Terbaru yang bisa aku bagikan dan semoga bisa membantu kalian.