How to Increase Thumbnail Resolution on Blogger

When we add a widget on Blogger, the thumbnails will keep a default size of 72 x 72px which might not look good if we try to make them bigger using only CSS. However, with a bit of JavaScript we'll be able to replace the thumbnail with the same image of higher resolution and this way, larger images will no longer appear blurry.

In this tutorial we will see how we can replace the default thumbnail size of the popular posts widget even though we can apply this trick on any of the blog widgets.

Changing the Thumbnail Size for the Popular Posts Widget

Step 1. First, let's add the Popular posts gadget by going to Layout > click on the Add a gadget link and select Popular Posts from the popup window.

adding popular posts gadget

Step 2. Next, go to Template > click on the Edit HTML button > click anywhere inside the code area and press CTRL + F keys to open the Blogger search box.

edit blogger template html

Step 3. Type or paste the following tag inside the search box then hit Enter to find it:
After you found the </head> tag, add this CSS above it:
<style type='text/css'>
.PopularPosts .item-thumbnail a {
clip: auto;
display: block;
height: 130px;
margin: 0 0px 5px;
overflow: hidden;
width: 210px;
border: 2px solid #EEEEEE;
border-radius: 20px;
.PopularPosts .item-thumbnail img {
position: relative;
top: -30px;
transition:all .2s linear;
 -o-transition:all .5s linear;
-moz-transition:all .2s linear;
-webkit-transition:all .2s linear;
.PopularPosts .item-thumbnail img:hover{
.PopularPosts .widget-content ul li {
background: #F9F9F9;
border: 2px solid #EEEEEE;
border-radius: 10px;
box-shadow: 0 4px 10px #EEEEEE;
color: #555555;
padding: 10px;
margin-bottom: 5px;
.PopularPosts .item-title {
clear: both
font: 14px Cambria,Georgia, sans-serif;
color: #2288BB;
font-weight: bold;
text-transform: uppercase;
text-align: center;
.PopularPosts .item-snippet {
display: none;
.widget .widget-item-control a img {
height: 18px;
width: 18px;
Step 4. Now search for this tag:
... and just above it, add this script:
<script type='text/javascript'>                  
function changeThumbSize(id,size){
var blogGadget = document.getElementById(id);
var replacement = blogGadget.innerHTML;
blogGadget.innerHTML = replacement.replace(/w72-h72-p-nu/g,"s"+size+"-c");
var thumbnails = blogGadget.getElementsByTagName("img");
for(var i=0;i&lt;thumbnails.length;i++){
thumbnails[i].width = size;
thumbnails[i].height = size;
What I highlighted in red is the widget ID for the Popular Posts gadget. To change the thumbnail size for any of your blog widgets, first you need to find the gadget/widget ID and then add a line below this part:
 ... and replace widget-ID-HERE text with the ID of that widget/gadget.

Note: you won't see the changes if the widget has a class selector - for this you may need to change class with id and replace the dot "." symbol with "#" within the CSS...

If you don't know how to find the id of a particular widget, please check out this tutorial on How to Use Firebug to Design a Blogger blog.

Step 5. Finally, press the Save Template to save the changes. And that's it!


  1. Do you a code for it to work with og:image. Any idea on how to convert it from s72-c to s200-c ?

  2. where can i founf my widget id?

  3. Hi,
    How can I make the thumbnail rectangle? I keep getting a square shape every time I try to re-ajust the width/height.

  4. is it possible to make this horizontal and remove the post title?

  5. Is it possible to put the post title underneath the thumbnail?

  6. This looks great, thanks so much! I was wondering whether it is possible to make my post titles appear underneath the thumbnail? As right now its awkwardly right next to it... Thanks!

  7. Great hack.
    Although my image appears as cropped and centered. any way to correct this?

  8. the text is beside the thumbnail, how do i get it underneath?

    1. Hi Camilla,

      Look for this line in step 3:
      .PopularPosts .item-title {

      and add this just below it:
      clear: both;

      Please note that I already added it... the sidebar was a little bit too narrow in my demo and I forgot to declare this css property. Hope it works now. Thanks for visiting!

  9. Thank you. How to crop the image?


Although every comment is appreciated, due to an overwhelming amount of questions, I can no longer provide personalized help. Keep in mind that comments are moderated and may take some time to appear. All spam comments will be deleted. Thanks for understanding!