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

Socialize It →

Tweet

14

Advertisements

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.

• How To Customize Popular Post Widget 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 Blogger.com >> 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.

Advertisements

About the Editorial Team

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