Home
Blogger

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;}

Customization

  • 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;.

landscape

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. 

2 comments

  1. 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

      http://www.bloggerspice.com/2014/03/adding-image-in-WordPress-text-widget.html

      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.
Go Up