Now Blogger updated the User Interface which has a more modern appearance and responsive menu. There are many positive things after the Blogger UI update from the classic version to the new version.
but there are also things that are missing, especially the URL format of the image uploaded directly from the post, which is different from before.
Most of the themes that I share on the Idntheme blog have been fixed for this problem but only for the premium version and for the new free version of some of the themes we have fixed.
For all of our visitors who use free themes from Idntheme or other themes that use JavaScript to bring up post thumbnails on the index page, you can easily follow these tips.
Usually, the JavaScript code used will look like this Most of the themes
<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>I took the JavaScript code above from the free version of the Lunar theme, maybe, the code will be different if you use another theme.
And for calling code the markup maybe look like this
<script type='text/javascript'>
document.write(lunarSummaryThumb("<data:post.thumbnailUrl/>","<data:post.title/>"));
</script>Well, the JavaScript code above is now not working properly if you are using the latest version of Blogger UI.
Therefore, here I will provide the best way to overcome blurry thumbnails in index page posts that work both on the classic version of the Blogger UI or the latest version of the Blogger UI as well.
Let's begin:
To Overcoming Thumbnail Post Blur in the Latest Version of Blogger
For that First, open Blogger Dashboard> then Click the Theme menu > Click Edit HTML next to Customize> Then look for the calling code like this (Each theme can be different, please adjust it to the theme that you are using):
<script type='text/javascript'>
document.write(lunarSummaryThumb("<data:post.thumbnailUrl/>","<data:post.title/>"));
</script>After that replace the old calling code and JavaScript like the code above with this code
<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, "300:200")' 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/AVvXsEjx5gEaQ0xWsPzlfGiM4bOssDHUYH9vTuyhj39ApDsYDOlXkAiHce5fSFcBTpM3Z4g73cZFzCBBhVEy1nIQub8EjIsjCqZSyo7LITd3Pjy4kxXfKldZNA0-_h3aYzTvkeh_K5Z5bo4Yr9Ag/s1600/noimage.png'/></div>
</a>
</b:if>
</b:if>Then replace the marked code and define it as you you needed.
Numbers 280 indicate the dimensions of the image to be displayed, 300:200 indicate the ratio of the image to landscape format. Which are 300 for width and 200 for height. You can also change the image ratio with another format. For example 1:1(same width and height) or 4:3 or 16:9 or 21:9 But unfortunately Blogger does not support the image ratio with portrait format, so the image height cannot exceed the image width.
It's a good idea if you want to keep your writing short as well, you still keep the snippet code like this:
<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>And for the calling code the code will be like this:
<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>Ignore it, if in your theme there is already a snippet code above
That's it How to Overcome Thumbnail Post Blur on the Latest Version of Blogger that Droidnur123 can pass on this occasion. Thanks for visiting and reading this article hope it helps your blogging.