February 20, 2012

How to Change Thumbnail Size of Popular Posts Widget in Blogger

How do you promote your posts in Blogger? You can easily show related posts underneath each of your individual posts for your readers. Or you can recommend most relevant content on your post pages. Else you can display most shared and recommended content on Facebook by adding Facebook Recommendation Box to your blog. By using these methodologies, absolutely you can grab more attention and increase page views for archived posts. In addition, Blogger let you show off popular posts within specified time range using official Blogger Popular Posts widget. If you already using Popular Posts widget on your blog, sometimes you may concern about its thumbnail size as it takes more space on your blog. Due to this reason, you may disable thumbnails. But rather than disabling it, would you like to change size of thumbnail images shown on Popular Posts widget?

Blogger Popular Posts widget let you show off your most popular content being reading and it will get more attention of your visitors too. So once a visitor landed on your blog, there is a more chance to explore your popular posts. However its thumbnails images are critical as they tend to catch visitor's eyes unless you highlight them for visitors. Else if you show them as just plain links with text, visitors may fail to see them too. However if the reason to disable thumbnails is its size, then you might wanna try this out and set thumbnail image size to a preferable size.


1. Go to Blogger Dashboard.

2. Click on your Blog Title.

3. Navigate to Template tab.

Note: Before editing your template, you may want to save a copy of it. Read How to Back Up Your Template.

4. Click on Customize button.

5. Now you will be directed to Template Designer. Jump to Advanced.

6. On the next pane, click on Add CSS tab.

7. Now add one of following CSS style code snippet in the text area you find on the right pane.

Style 01

.PopularPosts img {
width: [Width of Thumbnail] !important;
height: [Height of Thumbnail] !important;

Style 02

Adding this style will affects on thumbnails in both Popular Posts and Blog List gadgets. If you are not using Blog List gadget, you can use this one without a doubt.

.item-thumbnail img {
width: [Width of Thumbnail] !important;
height: [Height of Thumbnail] !important;

Color Indication Information:

   - Width of Thumbnail

Enter value for width of popular posts thumbnail in pixels.

   - Height of Thumbnail

Enter value for height of popular posts thumbnail in pixels.

8. Click Apply to Blog button to make changes.

Special Mentions:

* Thanks elovelo for adding his suggestion at comment section on improving this tutorial.

Enjoy :-)

Awesome! Thanks for coming by and taking your time to read this post :) I hope you have learnt something today. Now you can share it with your friends and I'd love to hear from you too.

Related Posts and Categories

Category, , , , ,


* If you got any questions not related to this post, please ask it at our Support section.

* Make sure your comment is genuine and comply with our commenting guidelines.

* Review your email and reply notification settings to receive replies via email.

* Experiencing problems when commenting? Please report them at our Support section.

Rebel 2 said...

What if all I want to do is to move the popular post widget to another area in the blog, i.e. inside a post itself, or in a table somewhere else?

Mayura De Silva said...

Popular Posts widget is an individual element and you just able to move it around by moving element on your layout or by editing your template. As I know, it doesn't let you embed or include in a post right away. Eventhough you find and add Popular Posts widget code to your posts, it won't render as it associated with Blogger layout tags. I didn't figure it out yet and if I found a way around, I ll post it here... :)


elovelo said...

Its not so easy. First, doing it this way you change all image size with class .item-thumbnail, blog list posts for exapmle. It is better to use #PopularPosts1.widget img {} It works for specific PopulrPosts ID.
Second, you resize images which are saved in size 60x60px. It looks very ugly making them bigger, The question is how to change prepering thumbnails by blogger in bigger size than 60x60px?

Mayura De Silva said...

Hi Mate,

Yeah, #PopularPosts1 can work out well :) But for some custom templates, they change the ID. Therefore it may not work in that occasions.

Oops... I wasn't aware of Blog List widget now showing thumbnail. Thanks for letting me know mate :) I'll mention it here.

lol :D Well, it's up to you to decide which size is better size for your blog. I know it's kinda resizing as Blogger pull out smaller thumbnail preview by default. As Blogger define layout tags, I have no idea yet how to fetch the bigger thumbnail preview mate.

Thanks for stopping by and for your suggestions :)