Fixing the Blur Homepage Thumbnail in Blogger New Version (Full Guide)

Lately, I have been receiving several email messages from bloggers using the Blogger blogging platform about thumbnails or images on the homepage appearing blurry when posting using the new Blogger version.

After observing for a while, it turns out that the URL of the image posted on the dashboard of the latest Blogger interface has changed.

Thus, the use of JavaScript in calling thumbnails on the homepage with the code below is no longer working properly:

<script type='text/javascript'>
//<![CDATA[
function (e,t){var n=400;var r=280;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>

In HTML, the calling code looks like this:

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

Also Read: How To Fix Blogger/Blogspot Posts Image Thumbnail Not Showing On Whatsapp

How to Fix The Blur Homepage Thumbnail / Image in Blogger Latest Version

1. Login to the Blogger Dashboard

2. Open the Theme menu, right-click Edit HTML

3. Now, Replace the thumbnail caller's HTML code with the code below, you can find it anywhere under the 

<div class='post hentry'>

tag.

<b:includable id='postthumbnail' var='post'>
<div class='img-thumbnail'>
<b:if cond='data:post.firstImageUrl'>
<a expr:href='data:post.url'><img class='lazyload' expr:alt='data:post.title' expr:data-src='resizeImage(data:post.firstImageUrl, 420, &quot;300:200&quot;)' expr:title='data:post.title'/>
</a>
<b:elseif cond='data:post.thumbnailUrl'/>
<a expr:href='data:post.url'><img class='lazyload' expr:alt='data:post.title' expr:data-src='resizeImage(data:post.thumbnailUrl, 420, &quot;300:200&quot;)' expr:title='data:post.title'/>
</a>
<b:else/>
<a expr:href='data:post.url'><img class='lazyload' data-src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjFLysfmgfijIKFA4-heZopxbGoMj1cbgELgbHTcSczkINLiJz1TqvDUsm93YfEqQnX_FaMeW-RnTuTeIZjJxM7RWTFIfG9MzrPqiGrtqFNJ2EmtD6xPjoW2UqCdRPck8x2IjtuUQt2erhg/w420-c-h280/no-image.png' expr:alt='data:post.title' expr:title='data:post.title'/>
</a>
</b:if>
</div>
</b:includable>

Note:  If you can't find the thumbnail caller, paste the code anywhere under the

<div class='post hentry'>

tag.

4. Press Save to save.

Previous article

Next Post

Next article

Previous Post