Solve Blurry images on Blogger Homepage/Popular Post/Featured Images/Gallery Thumbnails - cairodock

 This is one of the most frustrating experiences of using a default blogger template. It might be a blogger itself who are improving their systems. This may most likely make you feel the same too. Also, the question always stuck in my head like why my site is now showing blurry images on landing the main page even though I did upload good quality images before? So I dig into the HTML body of blogger templates, and guess what? There are so simple but yet working fixes to solve this image blur issue. I've gathered the most probable working solutions for you to solve this issue in one go. 

 

[Fixed] Blurry images on Blogger Homepage/Popular Post/Featured Images/Gallery Thumbnails

Just follow below steps to solve this image blur problem from your blogger template:

1. Replacing "s72-c" code with "s72-c-k-no" code.

1. Go to Blogger.
2. Navigate to Edit HTML.
3. Click anywhere in HTML code area.
4. Press Ctrl+F from keyboard.
5. Search this code: s72-c.
6. Replace it by this code: s72-c-k-no.
7. That's all, check if this will solve your problem.

2. Adding "jquery.min.js" or "jquery.js" in HTML Template.

1. Go to Blogger.
2. Navigate to Edit HTML.
3. Click anywhere in HTML code area.
4. Press Ctrl+F from keyboard.
5. Search for jquery.min.js or jquery.js code.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js" />
Note:
If you already have this in your template then skip this step.
And if NOT, then please proceed further.


6. Now, find </head>.
7. Paste below code underneath it:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js" />



8. Now, you have to add JavaScript for any gadget e.g. Popular Posts.
9. Underneath </head> paste the following code and save your HTML template.
<script type='text/javascript'>//<![CDATA[
/**
Coded by Cairo-Dock Kindly do not remove credit.
**/
$(document).ready(function() {
var dimension = 1600;
$('PopularPosts').find('img').each(function(n, image){
var image = $(image);
image.attr({src : image.attr('src').replace(/w\B\d{2,4}/,'w' + dimension)});
image.attr({src : image.attr('src').replace(/h\B\d{2,4}/,'h' + dimension)});
image.attr('width', "100%");
image.attr('height', "auto");
});
});
//]]>
</script>
What it does? It will find the image within the DIV that has the id = PopularPosts and changes the quality from old to the full quality i.e. 1600.


10. Save template, that's all.

3. Updating Image Quality from "72" to "1600" in HTML Template.

1. Go to Blogger.
2. Navigate to Edit HTML.
3. Click anywhere in HTML code area.
4. Press Ctrl+F from keyboard.
5. Search below code:
<img alt='' border='0' expr:src='resizeImage(data:post.thumbnail, 72, &quot;1:1&quot;)'/>
6. Replace it with below:
<img alt='' border='0' expr:src='resizeImage(data:post.thumbnail, 1600, &quot;1:1&quot;)'/>
7. That's all, check if this will solve your problem.

Bottom Line

I'm sure by following any one of the methods from listed ones will help you resolve the error.

If you are facing this error or something you want to suggest apart from the above points, feel free to use below comment section to get in touch with me anytime. Happy to hear from you and to implement the suggestions for helping others.