Skip to main content

follow us

Popular Posts Widget with Auto Numbering.

One of the reasons why I love Blogger is the ability to play around with the design of your blog and make it suit your own taste. All you just have to do is to add or make a little change to your blogger template and your are good to go,  just too easy only if you do it  in the right way.

What is Popular Post? It is a blogger widget effective enough to increase your pageviews and make readers stay long on your blog by showing them some recent post and trending posts. Today I will be talking about how to change the display of Popular Post widget using CSS 3, to show threading posts with Auto numbering .

Basic Requirements
  • Add popular posts widget on your blogger blog. 
  • Change the style of the Popular Posts widget. 

Add Popular Post Widget.

  1. Login to Blogger dashboard.
  2. Click Layout>>Add a Gadget
  3. Select "Popular Post" from the list of gadgets. If you already have a Popular post widget on your blog, there is no need to add another one( skip step 3 )

  4. Now we will need to make some little changes in its settings, in the most viewed choose anyone, but I will be choosing Last 7days in this tutorial, uncheck "image thumbnail" box and "snippet " as well, and display up to 6 posts to get a perfect result.
  5. Now click save, the gadget will be added. Don't forget to click  Save Arrangement  located at the top of the layout page.
You have successfully added a popular Post widget on your blog. Now it's time time to customize the appearance for it to be more beautiful and attractive.

Change The Style Of Popular Posts Widget. 

  1. Login To Blogger Dashboard. 
  2. Select Template>> Edit Html(beside customize).
  3. Search for </b:skin> , Click the 3dots between <b:skin> and </b:skin> to expand the code.

Now paste the following codes above the </b:skin> tag.

/*--- FMS Popular Posts --- */ 
.popular-posts ul { 
padding-left: 0px; 
counter-reset: popcount; 
.popular-posts ul li:before { 
list-style-type: none; 
margin-right: 15px; 
padding: 0.3em 0.6em; 
counter-increment: popcount; 
content: counter(popcount); 
font-size: 16px; 
background: #292D30; 
color: #ffffff; 
position: relative; 
font-weight: bold; 
font-family: georgia; 
float: left; 
border: 2px solid #dddddd; 
box-shadow: 1px 2px 9px #666666; }
.popular-posts ul li { 
border-bottom: 1px dashed #dddddd; 
.popular-posts ul li:hover { 
border-bottom: 1px dashed #696969; 
.popular-posts ul li a { 
text-decoration:none; color:#5A5F63; 
.popular-posts ul li a:hover { 

 To change the shape from square to circle as seen in our blog's widget add the code below just after "box-shadow: 1px 2px 9px #666666;
 Save it, check your blog to see the wonderful effect. Wow! You have successfully added a Popular Post widget with Auto numbering.

Don't forget to comment if this post was helpful to you. 

You Might Also Like:

Comment Policy: Please write your comments in accordance with the topic of this page post. Comments that contain links will not show up before they are approved
Open Comment