Birthday

July 14, 2012 is TipRicks's Birthday, Please Prepare and Send Good Wishes to its team!

UnderStood
TipRicks is under maintenance! If you found any error please let us know. Contact Us ×

Hello!

Click one of our representatives below to chat on WhatsApp

Support Customer Service Center
+923084774257
You can also send us an email to support@tipricks.com
Hello! What can I do for you?
×
How can I help you?

Overcoming Blur Homepage Thumbnails on the Latest Version of Blogger

SHARE:

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




Was this article helpful?

Thanks! Your feedback will help us to improve our Services.

COMMENTS

BLOGGER
Need help? Contact to our support center at +92 308 477 4257
Name

Agriculture PPT Templates,2,AI Tools,1,Amazon,1,AskTipRicks,9,Blogger,48,Blogger-SEO,6,Blogger-Templates,1,Blogger-Tutorials,32,Blogger-Widgets,11,Blogging-Tips,7,Books,1,Business,1,Computer PPT Templates,1,Computer-Tutorials,1,Creative-PowerPoint-Templates,2,Digital Marketing,1,Domain,1,Ecommerce,1,Facebook,4,Free-Mobile-Data,1,Freenom,1,General,7,Google-Adsense,4,Google-Analytics,2,Google-Classroom,3,Instagram,2,Internet,1,Interviews,1,Islamic PPT Templates,1,jQuery,1,Marketing,1,Medical PPT Templates,1,Microsoft-Word,3,Mobile-Marketing,1,Motivation,1,MS Word,1,News,25,News-Updates,26,Oppo-Mobile-Features,1,PDF,1,PowerPoint-Templates,7,Resume-Templates,2,Reviews,3,SEO,8,Social-Media,6,Tech-News,15,TrueCaller,1,Twitter,1,Videos,24,Vlogging,1,Web-Hosting,1,Whatsapp,3,WordPress,8,WordPress-SEO,1,WordPress-Themes,1,WordPress-Tutorials,4,Youtube,5,
ltr
item
TipRicks Blog: Overcoming Blur Homepage Thumbnails on the Latest Version of Blogger
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.
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh7GJcP1K40yc1yNu3ZKzT_Ky8IKvDHJ-EejwxYHzgIgZq5Zn8Jcowm_LtmAKgd5Yfl9TJErSYO_6m9JbpPLPU7KOAxGGJlWffHo8zcjRb10jdwBIsH1yBPSGEPaJfm-cMkgTmFAXFCEgM4/w320-h180/overcoming-blur-homepage-thumbnails-on-the-latest-version-of-blogger.jpg
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh7GJcP1K40yc1yNu3ZKzT_Ky8IKvDHJ-EejwxYHzgIgZq5Zn8Jcowm_LtmAKgd5Yfl9TJErSYO_6m9JbpPLPU7KOAxGGJlWffHo8zcjRb10jdwBIsH1yBPSGEPaJfm-cMkgTmFAXFCEgM4/s72-w320-c-h180/overcoming-blur-homepage-thumbnails-on-the-latest-version-of-blogger.jpg
TipRicks Blog
https://blog.tipricks.com/2021/02/overcoming-blur-homepage-thumbnails-on-the-latest-version-of-blogger.html
https://blog.tipricks.com/
https://blog.tipricks.com/
https://blog.tipricks.com/2021/02/overcoming-blur-homepage-thumbnails-on-the-latest-version-of-blogger.html
true
7070217950916442682
UTF-8
Loaded All Posts Not found any posts VIEW ALL Readmore Reply Cancel reply Delete By Home PAGES POSTS View All RECOMMENDED FOR YOU LABEL ARCHIVE SEARCH ALL POSTS Not found any post match with your request Back Home Sunday Monday Tuesday Wednesday Thursday Friday Saturday Sun Mon Tue Wed Thu Fri Sat January February March April May June July August September October November December Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec just now 1 minute ago $$1$$ minutes ago 1 hour ago $$1$$ hours ago Yesterday $$1$$ days ago $$1$$ weeks ago more than 5 weeks ago Followers Follow THIS PREMIUM CONTENT IS LOCKED STEP 1: Share to a social network STEP 2: Click the link on your social network Copy All Code Select All Code All codes were copied to your clipboard Can not copy the codes / texts, please press [CTRL]+[C] (or CMD+C with Mac) to copy