Blogger Ever

How to re-size popular post image with good quality using Jquery in Blogger?

How to re-size popular post image with good quality using Jquery in Blogger?

The popular post widget have a option to add thumbnail with their post.This widget only shows those images that are saved or uploaded on Blogger,but not to those that are given through 3rd party URL.

Hence those images that are visible have love image size so that they can load as fast as possible and in a sense it is good but what if I want to make the size of image bigger.Its simple have a look.
These images have size of 72px if you will use CSS to make it larger the pixels will expand and cause the blurriness in picture.For that you must have Jquery in your template.To make it we will use the follow code.
Add this code just before </head>

<script type='text/javascript'>
 $(document).ready(function () {
     $('.PopularPosts img').each(function () {
         $(this).attr('src', function (i, src) {
             return src.replace('s72-c', 's150-c');
         });
     });
 });
</script>
Replace 150 with your desire amount of px of image you wan to return
Blogger

2013-2016 Copyright Blogger E\ver . Coded, managed and founded by Mohammad Hamza (@hamzadhamiya) . Hosted on Blogger and fonts used are Raleway and Open Sans.