Overcoming Blur Homepage Thumbnails on the Latest Version of Blogger

The following article is on How to Overcome Thumbnail / Image Blur on the New Version of Blogger.

Lately, I have received so many emails/messages about thumbnails or images on the homepage becoming blurry when posting using the latest version of Blogger. After observing for a while, it turns out that the URL of the image posted on the latest Blogger dashboard has changed. 

So thus, the use of JavaScript to call thumbnails on the homepage with code like below doesn't work properly:

[<script type='text/javascript'>

//<![CDATA[

function bung_thumbnail(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(bung_thumbnail(&quot;<data:post.thumbnailUrl/>&quot;,&quot;<data:post.title/>&quot;)); </script></a>]

What is the solution? Listen next.

How to Overcome Thumbnail / Image Blur on the New Version of Blogger

1. Please login to Blogger.com
2. Go to the Themes menu > ( ⋮ ) > Edit HTML
3. Change the thumbnail caller HTML code.

You can with code like this:

[<b:if cond='data:post.thumbnailUrl'><img class='post-thumb' 

expr:alt='data:post.title' height=' ' 

expr:src='resizeImage(data:post.firstImageUrl, 300)' 

expr:title='data:post.title' width=' '/></b:if>]

Or like this:

[<b:if cond='data:post.thumbnailUrl'> <a expr:href='data:post.url'><img expr:alt='data:post.title' expr:src='resizeImage(data:post.thumbnailUrl, 450, &quot;300:200&quot;)' expr:title='data:post.title'/></b:if>]

It could also be like this:

[<b:if cond='data:post.thumbnailUrl'> <a expr:href='data:post.url'><img expr:alt='data:post.title' expr:src='resizeImage(data:post.thumbnailUrl, 300, &quot;16:9&quot;)' expr:title='data:post.title'/></b:if>]

If written in full, then an example of the result could be like this:

[<div class='thumbnail-wrapper'>

  <b:if cond='data:post.thumbnailUrl'>

<a expr:href='data:post.url'><img expr:alt='data:post.title' expr:src='resizeImage(data:post.thumbnailUrl, 450, &quot;300:200&quot;)' expr:title='data:post.title'/>

</a> 

  <b:else/>

<b:if cond='data:post.firstImageUrl'>

<a expr:href='data:post.url'><img expr:alt='data:post.title' expr:src='data:post.firstImageUrl' expr:title='data:post.title'/>

</a>

  <b:else/>

<a expr:href='data:post.url'><img expr:alt='data:post.title' expr:title='data:post.title' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEifY0g6Mu78zlAycwkUSm_Dp36cV0yTNOK2yz9RR80br9hBj-z0_M0PdSMpFd-yS_aTejxuyB3n6-XQ-M-tDLI9wM9ma5WheBUkluYrIJVWA43X42_xGjtrI5UNyyG-PSegSz1OswBS-hY/s1600/no-thumbnail_220.png'/>

</a>

  </b:if> 

  </b:if>

</div>]

      4. Save the theme, by clicking the Save button.

This article "Overcoming Blur Homepage Thumbnails on the Latest Version of Blogger" is protected by