Change Thumbnail Size for Blogger Images, 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 thumbnails displayed on 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 begening, a 72 x 72 pixel size thumbnail from 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 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 posts thumbnail images.

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

15 comments :

Reader's Comments

  1. Replies
    1. Hi, It work's just fine. Just make sure you apply the right class/id and have the jquery code in your template.

      Delete
  2. Thumbnail Size In Popular Posts Widget not working..

    ReplyDelete
    Replies
    1. Can you share the blog address where you are trying to implement this? You don't have a popular posts widget on your 'techh2' blog.

      Delete
  3. works for me. How to change the height though?

    ReplyDelete
    Replies
    1. Height and Width remain the same. However you can change the height using the right css selector:
      .post-thumb { height: 100px }

      Delete
  4. oh thank you so much :) i wasted days searching for a way to do that , thank you so much , if this one didn't worked for you you have to know that the key is the class name

    ReplyDelete
  5. Dear, How to remove three dots (...) at the end of post thumbnail (See image, using Below URL) on blogger. Please help me. Thanks.
    https://drive.google.com/file/d/0ByuGuHHrxa5GZXFjZEZieXBSV28/view?usp=sharing

    ReplyDelete
  6. Even for me its not working, Please suggest me what i have to do, I followed all the things you told above.
    My url where i am facing the problem www.saudi-expatriates.com

    ReplyDelete
    Replies
    1. I've checked your site. What are the thumbnails for which you want the dimensions changed?

      Delete
  7. Unfortunately, it's not working for me either- can I contact you somewhere?

    ReplyDelete
    Replies
    1. Sure! Please use the contact page (link is just below the header).

      Delete
  8. It's working very well. Thanks 🏅

    ReplyDelete