How to Increase Thumbnail Resolution on Blogger

When you add a widget to Blogger, the thumbnails are kept at a default size of 72 x 72 pixels, but if we try to make them bigger with CSS, they might look bad. However, with a little JavaScript, we can replace the thumbnail with the same image at a higher resolution, so that the large images no longer look blurry.

So this tutorial will show you how to increase the thumbnail size of the popular Blogger widget for posts, although we can apply this trick to any blog widget.

Demonstration blog .

Changed the thumbnail size for the popular posts widget

Step 1. First, let's add the Trending Articles widget by going to Layout > clicking on the Add Gadget link and selecting Trending Articles in the pop-up window.

Step 2: Then go to Template > click Edit HTML > click anywhere in the code box to open the Blogger search box using CTRL + F keys.

Step 3: Type or paste the following tag into the search box, then press Enter to find it:

found him add this CSS to the top:

Step 4. Now look for this tag:

And add this script above:

Highlighted in red is the widget ID for the Popular Posts widget. To change the thumbnail size of one of your blog widgets, find the device/widget ID and then add the line below:

changeThumbSize(" PopularPosts1 ",210);
changeThumbSize(" ID-widget-HERE ",210);

Then replace the text widget-ID-HERE with the ID of this widget/gadget.

Note: If the widget has a class selector , you won't see the change - you may need to change from class to id and replace the dot symbol " .> " with " # " in your CSS code.

If you don't know how to find the ID of a specific widget, check out this guide on how to use Firebug to create a Blogger blog .

Step 5: Finally click on the Save Template button to save your changes and you can also increase the thumbnail size in Blogger. Have fun!