How to Change Thumbnail Size for Blogger Images in Popular Posts Widget

Blogger, by default, assigns a 72 x 72-pixel size for thumbnails generated from your post images. You may desire to change the image thumbnail size on the Popular posts widget or even the thumbnails displayed on the homepage, generated from blog posts.

In your template, you’ll find a couple of instances of the
“<img expr:src='data:post.thumbnailUrl'/>” tag. Using this tag, you can pick up the first image from a post and generate its thumbnail. By assigning a class/id to this tag and using a simple jquery code, we can define a custom thumbnail size for it.

Before you begin, make sure you have jquery installed in your template. If not, copy the latest version from below and paste it above the closing head tag </head>.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

Custom thumbnail Size for Post Images

As mentioned in the beginning, a 72 x 72-pixel size thumbnail from the post image can be created using the tag:
<img expr:src='data:post.thumbnailUrl'/>

1. To the relevant image tag, simply add a class or id to the tag like this:
<img class="post-thumb" expr:src='data:post.thumbnailUrl'/>

2. Just above the closing head tag </head> in your template, paste the code below.

<script type="text/javascript">
 $(document).ready(function() {$('.post-thumb').attr('src', function(i, src) {return src.replace( 's72-c', 's120-c' );});});
<!-- helparchive.blogspot.com -->
</script>

3. The “120” is your new thumbnail size. You can increase or decrease the thumbnail width by changing the “120” to any other number. Lastly, “.post-thumb” is the class you have assigned to your images.

Changing thumbnail Size In Popular Posts Widget

Changing the thumbnail size for Popular Post images is simple. Just paste the code below just above the closing head tag </head> in your template.

<script type="text/javascript">
 $(document).ready(function() {$('.PopularPosts img').attr('width', '100%').attr('height', 'auto').attr('src', function(i, src) {return src.replace( 's72-c', 's120-c' );});});
<!-- helparchive.blogspot.com -->
</script>

Change “120” to any other number to set the desired size for popular post’s thumbnail images.

Please give proper credit if you wish to cover this post on your blog.