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
This Is The Newest Post
Next article

2 Comments to

  1. This does not work at all.
    After entering this code, No posts are shown in website.

    ReplyDelete
    Replies
    1. Really... Which theme are you using?

      You can contact me via email or whatsapp.

      Delete

Articles Ads

Articles Ads 1

Articles Ads 2

Advertisement Ads