Custom Style Popular Posts Widget For Blogger

If you are an avid reader of sourcecrab.com, then surely you might have explored one of our article on customizing threaded comments of blogger using counter-increment property. In that article I have briefly explained, that how can you use counter-reset and counter-incrementproperty to number the threaded comments in blogger. Here in this article I am just extending the application of counter-increment property in old looking bloggers popular posts widget.
So let's dive into it. This tutorial will be dealing with all simple terms so that you can understand it very easily.

Step#1

• Prior to customization, install popular post plugin in your blogger site.
• Check out the boxes of display snippet and display thumbnail. (No Snippet and Thumbnail should be displayed)
• Now comes the part of Css customizations.

Show Me the Code

Before viewing the code, learn something about some basic things of the codes.

• nth-child property has been used to achieve different colors.
• css selector :before has been used to achieve counters

Css

.PopularPosts h2{
padding-right:.4em;
padding-left:1em
} 
.popular-posts ul {  padding-left: 0; 
  counter-reset: trackit;/*setting counter-reset*/
 }
.popular-posts ul li {  
border-bottom: 1px solid #f0f0f0;  
list-style: none outside none !important;  
margin-left: 0 !important;  
overflow: hidden;  
padding: 10px 0 !important;  
transition: all 0.25s linear 0s;
counter-increment: trackit;/*setting counter-increment*/
  }
.PopularPosts ul li:before{
content: counters(trackit, ".");
padding: 0 .1em 0 0;
font-size: 20px;
font-weight: bold;
color: #C4C4C4;
float:left;
margin-right:10px;
} /* creates counter before lists */

.PopularPosts li:first-child{
border-top:1px solid #f0f0f0
} /* define background for even number lists */

.PopularPosts li:nth-child(odd)
{background:#f5f5f5
}/* define background for odd number lists */

.PopularPosts .item-thumbnail, .PopularPosts .item-snippet {  
display: none!important}/* Hides Thumbnail and Snippet */

.PopularPosts a, .PopularPosts a:hover{
color:#959595;
font-size:.9rem
}
#PopularPosts1 li{
padding-right: 1em !important;
padding-left: 1em !important;
}
.widget.PopularPosts{padding:1.2em 0em !important}

If you carefully go though the code you will not need to get any further guidelines. Therefore all you need to do is simply copy-paste this code in your blog's template editor before ]]></b:skin> and then save the template.

So you liked this?

You liked this simple minimal style right? Oh! Surely you might have been fascinated by this awesome but very simple widget. And there's a great saying that love and knowledge increases on sharing it, so do share your love with us by sharing our contents in social share media. And leave your comments so that I may know how much my work satisfies you.