How To Fix The Image Resolution Issue of Popular Post Widget In Blogger

Today We will learn How To Fix The Image Resolution Issue of Popular Post Widget In Blogger, Popular Post widget is one of the most common and most used widget in blogger the widget it self looks clean and elegant but there is a huge problem in it to reduce the image file size blogger automatically crop the image size to 72x72 which also make its quality bad and we can't increase the height or width of the image, But with simple tweak we will increase the resolution of that default image to maximum size for better quality and clear visibility.
Lets move further and see How to Fix The Image Resolution Issue of Popular Post Widget In Blogger. You can check a live preview of that working script by clicking the button below.

See DemoLive Preview

Adding the script

Now this is the extra part for this widget basically blogger generates 72px width images which is not suitable in some cases, so we will change it with original size of the image for better quality. In the template, search for the </body> tag  and just above it paste the following HTML Coding.

<script type='text/javascript'>
//<![CDATA[ 
$(document).ready(function() {    
    $('.PopularPosts ul li img').attr('src', function(i, src) {
        return src.replace('/default.jpg', '/mqdefault.jpg');
    });
    $('.PopularPosts ul li img').attr('src', function(i, src) {
        return src.replace('s72-c', 'w770-h505');
    });
    $('.PopularPosts ul li img').attr('src', function(i, src) {
        return src.replace('w72-h72-p-nu', 'w770-h505');
    });
 });
//]]>
</script>

Conclusion

Congrats !! You have made it. now you have learned that How To Fix The Image Resolution Issue of Popular Post Widget In Blogger. Visit your blog and check the script live in action, hope you liked this tutorial, if you enjoyed then please share it with your friends, we are working hard to develop more such awesome widgets please stay tuned with Us. अलविदा !! (Goodbye in Hindi).