How To Fix Thumbnail Post Blur In The Latest Version Of Blogger

Some time ago Blogger updated the User Interface which has a more modern appearance and responsive menu. There are many positive things after the ...
Overcoming Thumbnail Post Blur in the Latest Version of Blogger

Overcoming Thumbnail Post Blur in the Latest Version of Blogger

Some time ago 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 lacking, 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 some of the themes I have fixed. For Can Design friends who use a free theme from Idntheme or another theme that uses JavaScript to display post thumbnails on the index page, you can follow these tips.

Usually the JavaScript code used will look like this
<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, the code will be different if you use another theme.

And for calling code the markup will look like this

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

Well, the JavaScript code above is now not working properly if you are using the latest version of Blogger UI. An example of a blur image will look like the video below:

Therefore, here I will provide a 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.

Fix Blurry Image in the Latest Version of Blogger

First, open Blogger > Click the Theme Menu > Click Edit HTML > Then look for the calling code like this (Each theme can be different, please adjust it to the theme you are using):

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

After that replace the 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, &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://2.bp.blogspot.com/-SQLF0A_fpEw/XKJ0fE3-weI/AAAAAAAAOhg/6PFcbNMk_csbYQShGq0Bi8pX4cfkYGJMACLcBGAs/s1600/noimage.png'/></div>
</a>
</b:if>
</b:if>

Then replace the marked code and define it as needed.

The number 280 shows the dimensions of the image that will be displayed, 300:200 shows the ratio of the image to landscape format.  Which is 300 for the width and 200 for the 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 image ratios in portrait format, so the image height cannot exceed the image width.


It's a good idea if you want to keep writing short, 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 like this:

<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>

Ignore if in your theme there is already a snippet code above


Once applied, please see the results on your blog.

That's the Way to Overcome Thumbnail Post Blur on the Latest Version of Blogger that Blog Faters can convey on this occasion. Thanks for visiting and hope it helps.

Words can inspire, thoughts can provoke, but only action truly brings you closer to your dreams.

Post a Comment

© Blog Faters. All rights reserved. Developed by Jago Desain