How to Overcome Blurred Blog Thumbnails

Thumbnails that look blurry in your blog posts can be caused by several factors. It could be because the size of the image you uploaded is small or below the standard thumbnail size for blogs.

However, the problem of blog thumbnails that look blurry can also be caused by the template that you are currently using. There are some errors in the html / css code contained in your template. Are you using the free version of the blog template? because most free version templates have not so good html/css code. Yes the name is also free, so don't expect too much.

But do all free templates have a lot of css wrong? I don't think so. There are many free templates out there where the css / html code in the theme is neatly organized. So I suggest for you, use the template with the new version, don't use the old version.

If we talk about templates, don't paid templates make post thumbnails not blurry? it all depends on the image & appropriate css code. Especially now, blogger has been updated to a new version, so many changes have occurred. So that there are some mismatches in the code contained in your template. Therefore, I will give tips on how to deal with thumbnails that look blurry on your blogspot.

How to Overcome Blurred Blogspot Thumbnails

1. Use Images With PNG Format

One of the causes of blurry blog thumbnails is the format of the photos you upload in your posts. You need to know, uploading images on blogspot will be better if the image is in PNG format. The png format will look original when you put it in your post or to be used as a post Thumbnail.

If you have an image in jpg/jpeg format, it would be better if you convert it into png format first. It can be through image editing software or you can change it directly through the name when changing the image name.

2. Set Post Image Original Size

Using this method is one of the most powerful ways to solve the problem of blurry thumbnails on blogs. Not only fixing the homepage thumbnail problem, the popular upload section or the sidebar posting section that shows thumbnail images can also be done using this method. How to resize the original image in the post is very easy, first of all you select the image you want to make a thumbnail and make sure the position of the image is located at the top of your article. If you have entered an image, click on the image, then select the size icon to change the size.

Then resize the image to the original as you can see in the image below.

3. Add Thumbnail CSS Code

If you have done the two methods above and have not produced maximum results, then the next step you have to do is change the thumbnail css code in your theme / template. First, go to the blogspot dashboard. Then select the theme & select edit HTML.

To Change Using the CSS Code below, make sure your template has the jQuery code as below.

 <script src='https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js' type='text/javascript'/> 

If there is no jQuery code as above, you can directly copy the code above and paste it right above the code </head>.

If you have saved the jQuery code in your template, then copy the CSS code below and save it just above </body>.

 <script type='text/javascript'>
//<![CDATA[
$(document).ready(function() {$('.post-thumbnails').attr('src', function(i, src)
{return src.replace( 's72-c', 's640' );});});
//]]>
</script>

Note: If the blurry thing is the thumbnail of the Related Post section, you can change the text from .post-thumbnails to .related-post. But if it's blurry on the homepage, just use the .post-thumbnails code.

4. Replacing old thumbnail CSS

As I said in the point above, maybe you are using the free version of the template. Most likely the thumbnail css code contained in your template no longer works in the new version of blogspot view. Therefore, you can replace it with the latest version of the css thumbnail code below.

Look for a code like the one below at your place. The possibilities in each template are different, but you can adjust it.

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

Slowly search for the code above in your template. If you have found it, replace all the above code using the css code below.

 <b:if cond='data:post.thumbnailUrl'>
   <a class='thumb' expr:href='data:post.url'>
   <img class='lazy' expr:alt='data:post.title' expr:src='resizeImage(data:post.firstImageUrl, 280, &quot;300:200&quot;)' height='186' width='280'/>
   </a>
   <b:else/>
   <b:if cond='data:post.firstImageUrl'>
      <a expr:href='data:post.url' expr:title='data:post.title'><img class='lazy' expr:alt='data:post.title' expr:src='data:post.firstImageUrl' expr:title='data:post.title' itemprop='image'/></a>
      <b:else/>
      <a expr:href='data:post.url' expr:title='data:post.title'>
         <div class='postthumb'><img class='lazy' expr:alt='data:post.title' expr:title='data:post.title' itemprop='image' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhwhboVbn3Wry00keTztWfAty2wJj3T4ETTnIMj4Tsj0BTBCBp5WOZMWP_wFqHEbo3ULwkxxfeLmRgaJOHcTUhXV5c_Tcmr24qh7akzRFuT0WsyL8b9imzjLwEcBxcSC6F11yi4C5ujIXPB/s1600/noimage.png'/></div>
      </a>
   </b:if>
</b:if> 

More or less like that for some ways to deal with blurry blogspot thumbnails. Actually there is still a lot of css that you can use, but I want to know first if all the code above works in the template you are using? if you can't comment below so I can provide a new css code.

Location: 5717 Northwest Pkwy, San Antonio, TX 78249, Amerika Serikat

Share :