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.

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

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.