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.

Post last updated:

11 responses to “Resize Bloggers popular post images to fit the width of your sidebar without being blurry”

  1. 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.

    1. Hello! Huge apologies, there was a slight error in the code, I’ve fixed it now so should work. Thank you for letting me know.

  2. Thank you so much for this! Just what I needed for my blog. It worked like a charm. xx

  3. 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!

    1. Hello Kristy, apply the coding in this tutorial to whatever part of the popular post widget you want transparent. For example for the image you would use .item-thumbnail:hover. Hope that helps!

  4. Is there any way to delete titles of popular posts? Tnq <3

    1. Add .PopularPosts .item-title {display:none;} to your CSS.

      1. Oh, thank you, I have been looking for this answer for ever. And one more thing-is there any way to put popular posts images in the center of sidebar?

        1. Of course – use .PopularPosts .item-thumbnail {float: none; display: block; text-align: center;}

  5. bahadır

    this code solved my job. thank you

  6. You share nice tutorial related blog, which give me some good ideas in creating my own blog.

Join over 1,000 creators and small biz owners and be part of The Roundup

Ready to build your website, grow your audience and monetise your platforms? Receive the latest WordPress news, social media updates, SEO tips and industry insights straight to your inbox.

By signing up you’ll receive our fortnightly newsletter and free resources. No spam or unnecessary emails. You can unsubscribe at any time.