Fixing the Blur Homepage Thumbnail in Blogger New Version (Full Guide) - GistaBlog - Home of Dynamic Blogging Ideas.
Buy Template blogger

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

How To Fix Blur Homepage Thumbnail in Blogger New Version

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='//3.bp.blogspot.com/-ltyYh4ysBHI/U04MKlHc6pI/AAAAAAAADQo/PFxXaGZu9PQ/w420-h280-c/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 article

Leave Comments

Post a comment

Do not spam. This blog is strictly moderated and any link in the comment will be removed by the moderator.

Articles Ads

Articles Ads 1

Articles Ads 2

Advertisement Ads