How To Change Width/Height of Popular Post Thumbnails in Blogger

Few days’ a go a user messaged me on Facebook that, he wants to resize Blogger popular post thumbnails. This is not the first time we have received a request from our reader, so we decided to write a detailed tutorial on it. Firstly, we thought that it is not possible but later while playing with a bit of XML Coding we were able to change the size of Popular post thumbnails. To be honest, we were surprised to see that it was so straightforward to resize Thumbnails. Therefore, today in this tutorial we will be sharing a million dollar technique through which anyone can modify the Widget/height of the popular post thumbnails in blogger.

Why To Increase Width of Popular Post Thumbnails?

As we are well aware of the fact that Blogger is not known for customization, but it has little robust functionality that makes it the 2nd best Blogging Platform. Changing the Width and Height of Popular Post Thumbnail could bring heaps of traffic to your website. For Example, a visitor arrived on your website while navigation through the website he saw LARGE Thumbnails, so he decided to read it too. It not only reduces the bounce rate, but also increases the duration of the visits. 

How To Adjust Width/Height of Popular Post Thumbnails in Blogger?

To be honest, it is one of the simplest techniques, which we have ever seen. All we have to do is to insert the Width or Height in the form of Pixels i.e. Width=”72px”. Before, anyone gets confused let us jump straight on to our tutorial. 
  • Go to >> Template.
  • Then select Edit HTML >> Proceed.
  • Now check (Tick) the box “Expand the Widget”.
  • For Height: Within the template search for height='data:thumbnailSize' and replace  data:thumbnailSize with the height of the thumbnail i.e. 100, 200 and etc. Remember don't add "px" other wise it wouldn't work i.e. 100px, 200px and etc.
  • For Width: In the template again search for width='data:thumbnailSize' and replace data:thumbnailSize with the width of the thumbnail such that, 200, 300 and etc. Remember don't add "px" or it wouldn't work properly such that, 200px, 300px and etc.
All Done: After doing all the changes, go a head and save the template by pressing "Save Template" button. Now check your blog and it would give a picture perfect result.

From the Editor’s Desk: 

We hope this tutorial will help to increase the traffic of your website. We have decided to share this kind of Small tips and tricks so, slowly and steadily you guys could understand the dynamical coding of Blogger template. What are your thoughts? Give suggestions what you want to see next on MBL? Take a lot care till then Peace, Blessings and Happy blogging.

The Editorial Team of MyBloggerLab consists of a group of Professional Blogger geeks Led by Syed Faizan Ali (Founder of MyBloggerLab).

Comment With:
Choose Wisely!


November 21, 2012 at 11:30 AM

very useful. and one question. how to adjust the length of characters in one read more post.

November 21, 2012 at 3:21 PM

Nice sharing bro..did you received my email? Need your help on that too.!

Editorial Team MOD
November 22, 2012 at 12:16 AM

We have Got your Email. Thanks!

November 22, 2012 at 4:28 AM

I have tons of ideas in my mind. Please add me as an author!

July 23, 2013 at 5:05 AM

can you look at my blog - its has distorted the pictures - how can i change that?

Editorial Team MOD
July 24, 2013 at 4:32 PM

What is your blog URL?

October 7, 2013 at 3:30 PM

Excellent! Just what I was looking for, thank you.

November 2, 2013 at 1:07 AM

i did not find your search item( height='data:thumbnailSize' ) plz help me

Editorial Team MOD
November 3, 2013 at 4:06 AM

There must be some problem with you template

February 9, 2014 at 9:00 AM

Its work on my blog but the resolution of the thumbnail is not satisfactory. Is there any way to make the thumbnail clear looking and bigger than default

Editorial Team MOD
February 10, 2014 at 11:12 AM

Stay tuned, we will release a better fix tomorrow.

December 20, 2014 at 6:26 AM

I have the same issue. thumbnails resolution are bad. Do let us know about the fix.

Editorial Team MOD
December 21, 2014 at 2:11 AM

Please follow this tutorial

June 3, 2015 at 7:52 AM

This is not a perfect solution. since the thumbnail image size is 72x72 pixels only, enlarging this image will distort the image. The perfect solution would be changing the image url. Since picasa/ blogger support on the fly image crop if, a simple java script can change to your require resolution. changing the image url is simple, if you se the thumbnail image url you will find a segment like "/s72-c/" you change this to your required resolution. thats it....

Editorial Team MOD
June 3, 2015 at 1:56 PM

Here's a tutorial for that

Post a Comment

We’re eager to see your comment. However, Please Keep in mind that all comments are moderated manually by our human reviewers according to our comment policy, and all the links are nofollow. Using Keywords in the name field area is forbidden. Let’s enjoy a personal and evocative conversation.

Helping You to do Cool Things With Blogger Since 2012™.

© Copyright 2012 - 2018. MBL Networks, All Rights are Strictly Reserved.