How to Change Thumbnail Size for the Popular Posts Widget without JavaScript

When you add a popular post widget in your Blogger blog, the thumbnail size is limited to a default value of 72×72px. This size might appear very small in your blog and may not look good in your Blogger template, even after applying the CSS. There are ways to change that thumbnail size using JavaScript, but JS solutions will create additional requests to load images.

So in this tutorial we will see how can we change the size of thumbnail image in the popular post widget, without using JavaScript.

We assume that you've added a popular post widget with having thumbnails enabled and you're logged in to your Blogger account.

How to Resize Blogger Popular Posts Thumbnail Image

1. Go the Template > Edit HTML, click anywhere inside the code area and press Ctrl + F to open the Blogger Search Box.

2. Type PopularPosts and press enter. Look for following part in code:

   <b:widget id='PopularPosts1' locked='false' title='Popular Posts' type='PopularPosts' visible='true'>
       <b:includable id='main'>
       ...
       <b:with value='data:post.featuredImage.isResizable ? resizeImage(data:post.featuredImage, 72, "1:1") : data:post.thumbnail' var='image'>
           <img alt='' border='0' expr:src='data:image'/>
       </b:with>
       ...
       </b:includable>
   </b:widget>
   

3. Now use the Editor below to get your code with custom image size.
4. Copy the code after clicking "Generate Code" button and replace the whole code of PopularPosts widget with code the code you generated.
5. Save template and reload your blog.

Generate code for your popular posts widget

Enter width of image in px

Enter height of image in px
Set height = 0 to set height automatic, according to image width

<b:widget id='PopularPosts1' locked='false' title='Popular Posts' type='PopularPosts' visible='true'> <b:includable id='main'> <b:if cond='data:title != ""'><h2><data:title/></h2></b:if> <div class='widget-content popular-posts'> <ul> <b:loop values='data:posts' var='post'> <li> <b:if cond='!data:showThumbnails'> <b:if cond='!data:showSnippets'> <!-- (1) No snippet/thumbnail --> <a expr:href='data:post.href'><data:post.title/></a> <b:else/> <!-- (2) Show only snippets --> <div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div> <div class='item-snippet'><data:post.snippet/></div> </b:if> <b:else/> <!-- (3) Show only thumbnails or (4) Snippets and thumbnails. --> <div expr:class='data:showSnippets ? "item-content" : "item-thumbnail-only"'> <b:if cond='data:post.featuredImage.isResizable or data:post.thumbnail'> <div class='item-thumbnail'> <a expr:href='data:post.href' target='_blank'> <b:with value='data:post.featuredImage.isResizable ? resizeImage(data:post.featuredImage, {{width}}{{ratio}}) : data:post.thumbnail' var='image'> <img alt='' border='0' expr:src='data:image'/> </b:with> </a> </div> </b:if> <div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div> <b:if cond='data:showSnippets'> <div class='item-snippet'><data:post.snippet/></div> </b:if> </div> <div style='clear: both;'/> </b:if> </li> </b:loop> </ul> <b:include name='quickedit'/> </div> </b:includable> </b:widget>

Replace the PopularPosts widget code in your template with the following code:

Copy to Clipboard

Why not use JavaScript

When you resize the image using JavaScript, the N default thumbnail images are still loaded. The JS solution loads additional N images which are resized, causing twice the number of http requests which makes your blog slower.
It also causes a repaint as DOM is manipulated due to JS (if you don't understand this statement, its no problem)

In this solution, only the resized images are loaded. So it has better performance.

If you like this article or have any queries, let me know in comments section below.