Mengatasi Thumbnail Post Blur di Blogger Versi Terbaru, Beberapa waktu lalu Blogger update User Interface yang memiliki tampilan lebih modern dan menu yang responsive.
Banyak hal positif 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.
Untuk tema-tema yang saya bagikan di blog ini sebagian besar sudah saya perbaiki untuk masalah ini namun hanya untuk versi premium saja dan untuk versi free baru beberapa tema yang saya perbaiki.
Bagi sobat kuninggading.com yang menggunakan Themes Free dari Idntheme atau tema lain yang menggunakan JavaScript untuk memunculkan thumbnail post pada halaman index bisa mengikuti Tutorial berikut ini.
Namun sebelumnya Jangan lupa untuk Download Mini Site Responsive Blogger Template Premium jika kamu membutuhkan.
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 dari tema Lunar versi free, kode akan berbeda jika sobat 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 sobat menggunakan UI Blogger versi terbaru. Contoh gambar blur akan terlihat seperti video di bawah ini :
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.
Mengatasi 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("<data:post.thumbnailUrl/>","<data:post.title/>"));
</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="https://www.arlinacode.com/2020/08/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="https://www.arlinacode.com/2020/08/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="https://www.arlinacode.com/2020/08/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://2.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. 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='"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 sobat sudah terdapat kode snippet di atas
Setelah diterapkan silakan lihat hasilnya di blog sobat.
Itulah Cara Mengatasi Thumbnail Post Blur di Blogger Versi Terbaru yang bisa kami sampaikan pada kesempatan kali ini. Terima kasih sudah berkunjung dan semoga membantu.
