How to increase and decrease Blogger Popular post Image?

How to increase and decrease Blogger Popular post Image by CSS

popular posts

Popular post widget is blogger default widget any blogger account holder can add this widget by clicking on Add a Gadget option. This widget display up to 10 posts from a blog which is mostly visited by viewers. Default popular post widget is good but the image is not in good shape. Suppose you are using a template with large image but your popular post image is smaller size then it won't be match with your template. On contrary, If you are using landscape image on your blog but your popular post will be in square size so this will look odd.

original size

However don't worry, we can easily tweak the popular post widget by using a small piece of CSS code.  The following tutorial might be helpful to increase your popular post's widget images.

First you have to add Popular post widget and after that we will add CSS code by following below steps-

Step 1 Log in to your Blogger account and Go to your Blogger Dashboard

Step 2 Go to your Layout tab.

Step 3 Click on "Add a Gadget" then select "Popular Posts" Widget.

configure post

Step 4 Now Save the  "Popular Posts" Gadget.
Step 5 Now click on Edit HTML and Find]]></b:skin> by pressing Ctrl+F

Step 6
 Now Paste the below code  Before/above ]]></b:skin> 

.PopularPosts ul li img {display:block;margin:0 .5em 0 0;width:100px;height:100px;float:left;padding: 2px;}


  • Change width:100px; for increasing or decreasing image width
  • Change height:100px; for increasing or decreasing image height

large size

After adding this code the popular post widget will be (100px X 100px) square size. But if you want o make the image landscape simply increase the image widget like width:120px; and height:90px;.


Similarly if you want to decrease the image size then you can set (70px X 70px). So this is so simple now. And you can easily change the image resolution according to your desire. 
How to increase and decrease Blogger Popular post Image?
4 Stars stars - "How to increase and decrease Blogger Popular post Image?" Popular post widget is blogger default widget any blogger account holder can add this widget b...

Post a Comment

Assalam-o-Alikum bro very nice helpfull website bro worldpress site main header main ads ko kasa dispaly kra saktay hain

Walaikumus Salam. You can add manual add banner by following below WordPress tutorial link

Alternative way add below code on header.php child file---In blogger comment section acurate code is not allowed so i have use space and line break so after copy remove the space first and line break

< div class="header-ads">
< a href ="Ad URL" title="Ad Title"
target="_blank"> < img src="Ad Image" width="628" height="90" border="0" alt="Alt Text">

After that add below code on CSS child sheet-----

.header-ads {
position: relative;
top: 40px;
float: right;

This code can display your manual ads.

Facebook Group Community Disqus Channel Code ConverterHide Code Converter Show EmoticonHide Emoticon

Got questions? Ask ’em below! While we’re here, you might like to give any feedback about this Post, Your comment inspire us to continuous Improvement of This Blog and Contents. Your words are your own, so be nice and helpful if you can. Please, only use your REAL NAME, not your business name or keywords. Using business name or keywords instead of your real name will lead to the comment being deleted. Anonymous commenting is not allowed either. Limit the amount of links submitted in your comment. We accept clean XHTML in comments, but don't overdo it please.

Make sure you tick the Notify Me box below the comment form to be notified of follow up comments and replies. Thank you for commenting

Contact Form


Email *

Message *