Mengatasi Gambar Thumbnail Post Blur di Blogger Versi Terbaru - Hallo sahabat Jendral Kancil, Pada Artikel yang anda baca kali ini dengan judul Mengatasi Gambar Thumbnail Post Blur di Blogger Versi Terbaru, kami telah mempersiapkan artikel ini dengan baik untuk anda baca dan ambil informasi didalamnya. mudah-mudahan isi postingan Artikel Adsense, Artikel CSS, Artikel HTML, Artikel Internet, Artikel Javascript, Artikel JQuary, Artikel Media Sosial, Artikel Review, Artikel Template, Artikel Tutorial Blog, yang kami tulis ini dapat anda pahami. baiklah, selamat membaca.

Judul : Mengatasi Gambar Thumbnail Post Blur di Blogger Versi Terbaru
link : Mengatasi Gambar Thumbnail Post Blur di Blogger Versi Terbaru

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.

Blogger juga mengubah kode Javascript meraka yang versi lama menjadi versi terbaru yaitu menjadi 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>

Untuk kode Javascript pemanggilnya versi terbaru maka akan seperti ini

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

Nah pada kesempatan kali ini saya akan kasih tau Cara Mengatasi Gambar Thumbnail Post Blur di Blogger Versi Terbaru. Bagaimana caranya berikut ini adalah tutorial nya simak aja langkah berikut ini :

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/AVvXsEh5bO0AjKA8o9-ZF0F9lpHmjn9bLzIyHf5aMZ02IOjNx1oeDiGxZiLCyUH2s19cuZx9P2VJH556GgZmPFOPuVj0PWyYkXtBX6F7xl8IGRH8gTLaCPLDYq-QZMVEn0qOTU-rAPaqwEfSuRR5/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.

Nah itulah tutorial Mengatasi Gambar Thumnail Blur di Blogger Versi Terbaru, selamat mencoba. 

Demikianlah Artikel Mengatasi Gambar Thumbnail Post Blur di Blogger Versi Terbaru

Sekianlah artikel Mengatasi Gambar Thumbnail Post Blur di Blogger Versi Terbaru kali ini, mudah-mudahan bisa memberi manfaat untuk anda semua. baiklah, sampai jumpa di postingan artikel lainnya.

Anda sekarang membaca artikel Mengatasi Gambar Thumbnail Post Blur di Blogger Versi Terbaru dengan alamat link https://jekancil.blogspot.com/2020/09/mengatasi-gambar-thumbnail-post-blur-di.html