Resize Bloggers popular post images to fit the width of your sidebar without being blurry

Todays post is going to show you how to change the size of the images used in Bloggers popular post gadget so that they are bigger and clearer. This has been highly requested recently as a lot of people are adding this gadget to their sidebar and above / below blog posts to help promote their posts but want the images to stand out more. If you have in the past tried to resize them using only CSS you will have noticed that the quality of the images is really poor. The reason for that is explained here in a previous tutorial about improving the upload quality of your post images.

Update! I’ve published a couple of alternative methods to fixing blurry popular post images here.

How to resize the images in Bloggers popular post gadget

1. Firstly you need to check if you are already calling a hosted jquery library. To do this go to Template > Edit HTML and search for jquery.min.js or jquery.js. It will look something like

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js" />

although the version number may be different. Having multiple jquery libraries in your template may cause issues and slow down your blogs loading time. If you do have this in your template already then skip to step 2.

If the jquery library is not in your template then you’ll need to install it first. Go to Template > Edit HTML and find </head>. Underneath it paste the following and save.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js" />

2. Now we’re going to add some Javascript to change the size of the image used in the Popular Post gadget. Again go to Template > Edit HTML and find </head>. Underneath it paste the following and save.

<script type='text/javascript'>//<![CDATA[
/**
Written by XOMISSE. Do NOT remove credit!
**/
$(document).ready(function() {
  var dimension = 1600;
  $('#PopularPosts1').find('img').each(function(n, image){
    var image = $(image);
    image.attr({src : image.attr('src').replace(/s\B\d{2,4}/,'s' + dimension)});
    image.attr('width', "100%");
    image.attr('height', "auto");
  });
});
//]]>
</script>

This script first sets a size of 1600 which is a high quality image, then we are telling it to find the image within the DIV that has the PopularPosts1 ID. Once it finds that, we tell it to change the quality from what it is to the full 1600 quality. This is similar to what we did manually in this tutorial to fix blurry images on Blogger. Finally we set the width to 100% and height to auto so the images span the width of our sidebar and height adjusts to that proportionately.

NOTE The /s\B\d{2,4}/ means a string that starts with / followed by s, then a 2 or 4 digit value and finally another /. If your images have a different quality or are from an external image hosting site then you may need to change /s\B\d{3,4}/ to suit. See this tutorial to find out what quality your images are at and then make the changes based on that.

3. You can now use CSS to change the style of the Popular Post gadget so that it suits your overall design. If you go to Template > Edit HTML > Jump to widget > PopularPosts1 and expand the code you’ll see the classes that you can use

how to resize popular post images on Blogger

how to resize bloggers popular post images

For most templates they are the following

#PopularPost1 { /* FOR ENTIRE GADGET */ }
.item-title { /* FOR POST TITLE */ }
.item-snippet { /* FOR POST SUMMARY */ } 
.item-thumbnail { /* FOR POST IMG */ }

Now you’ll have nice big images in great quality to help reduce your bounce rate, keep people on your blog and help readers find content.

Leave a Reply

Thank you so much for taking the time to comment! Your email will not be published or shared but you will recieve an email if your comment has a reply. Need help with a tutorial? Check out our Coding + Consultation service for one-on-one assistance.

9 comments

  1. Migle on

    Hey!
    I’ve tried couple of times adding this to my blog, but sadly nothing worked. I did everything as you’ve explained but there are no visible results and I just don’t understand what I’m doing wrong here.

    Reply
  2. Kristy on

    This was extremely helpful. Wondering if you could share how to add an opacity hover / background color to the popular post widget? Thanks so much!

    Reply