Blogger, by default assigns a 72 x 72 pixel size for all Recent post thumbnails / popular post thumbnails or the label post thumbnails which automatically generated from the 1st image of that particular post.
2. Now find the code given below in your template, this is the responsible tag , than actully pick up the first image from a post and generate its thumbnail in 72 dpi resolution.
Replace the above code by the code given below . this code assigning a class/id to this tag and using a simple jquery code that define a custom thumbnail size for it.
http://helparchive.blogspot.com/2014/12/change-thumbnail-size-for-blogger.html
However if we desire to change the size of the image of these thumbnails , we may do easily by using css , but using css is not a good idea , as the default dpi of the thumbnail is set 72 dpi default from bloggers, so if we do it by using css , the css code stretch the 72 dpi image to the desire big size , resulting we lost the image quality that actually make the image blurry.
So to do it in right way , we need to change the default set value of thumbnail image by using simple jquery . Just follow the steps given below....
1. At first , 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>
2. Now find the code given below in your template, this is the responsible tag , than actully pick up the first image from a post and generate its thumbnail in 72 dpi resolution.
<img expr:src='data:post.thumbnailUrl'/>
Replace the above code by the code given below . this code assigning a class/id to this tag and using a simple jquery code that define a custom thumbnail size for it.
<img class="post-thumb" expr:src='data:post.thumbnailUrl'/>
Changing thumbnail Size In Recent post and label post
Now copy and paste the code given below just above the closing head tag </head>
<script type="text/javascript">
$(document).ready(function() {$('.post-thumb').attr('src', function(i, src) {return src.replace( 's72-c', 's120-c' );});});
</script>
$(document).ready(function() {$('.post-thumb').attr('src', function(i, src) {return src.replace( 's72-c', 's120-c' );});});
</script>
Changing thumbnail Size In Popular Posts Widget
Now copy and paste the code given below just above the closing head tag </head>
<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', 's300-c' );});});
</script>
$(document).ready(function() {$('.PopularPosts img').attr('width', '100%').attr('height', 'auto').attr('src', function(i, src) {return src.replace( 's72-c', 's300-c' );});});
</script>
The work is done save the template..
source :http://helparchive.blogspot.com/2014/12/change-thumbnail-size-for-blogger.html
