Stylish Professional Looking Popular Post Widget

We can do a tons of customization to our blogger widget. And here’s a away to add a  stylish and highly professional look to your popular post widget in blogger.


This customization is inspired from popular blog Hongkiat.com.

SEE A LIVE DEMO OF THE WIDGET

HOW TO CUSTOMIZE YOUR POPULAR POSTS WIDGET

The first step is add a popular post widget in your blog. If you have already added please skip these steps. For adding a poplar post widget,

✔ Navigate to Blogger > Dashboard  > Layout  > Add a gadget  and choose Popular Post Widget from the list.

Now to do customizations,

✔ Go to Blogger > Dashboard  >  Template > Edit HTML
✔ Now search for  ]]></b:skin> and add the below code just above it.

.PopularPosts {
width:100%;
margin: 0 auto;
padding: 0!important;
border-radius: 2%;
-moz-border-radius: 2%;
-webkit-border-radius: 2%;
counter-reset: trackit;
box-shadow: 0px 4px 0px -2px rgba(0, 0, 0, 0.1),0px 3px 0px 0px rgba(0, 0, 0, 0.07), 0px 2px 0px 0px rgba(0, 0, 0, 0.03);
-moz-box-shadow: 0px 4px 0px -2px rgba(0, 0, 0, 0.1),0px 3px 0px 0px rgba(0, 0, 0, 0.07), 0px 2px 0px 0px rgba(0, 0, 0, 0.03);
-webki-box-shadow: 0px 4px 0px -2px rgba(0, 0, 0, 0.1),0px 3px 0px 0px rgba(0, 0, 0, 0.07), 0px 2px 0px 0px rgba(0, 0, 0, 0.03);
border: 1px solid #EEE;
}
.PopularPosts h2 {line-height:1.5em!important;display: block!important;font-family: "Calibri","Droid Sans",Tahoma,Geneva,sans-serif;font-weight: 500!important;
text-transform: uppercase!important;padding: 5px 10px!important;margin: 0!important;color: #D1D9E5;background-color: #5A77A0!important;text-shadow: 1px 1px #486286;border-bottom: 1px solid #4D678C;
box-shadow: 0 5px 12px -7px rgba(0, 0, 0, 0.5);
-moz-box-shadow: 0 5px 12px -7px rgba(0,0,0,0.5);
-webkit-box-shadow: 0 5px 12px -7px rgba(0, 0, 0, 0.5);
font-size: 16px!important;
border-top-right-radius: 3px;
border-bottom-right-radius: 0;
border-bottom-left-radius: 0;
border-top-left-radius: 3px;
-moz-border-radius-topright: 3px;
-moz-border-radius-bottomright: 0;
-moz-border-radius-bottomleft: 0;
-moz-border-radius-topleft: 3px;
-webkit-border-top-right-radius: 3px!important;
-webkit-border-bottom-right-radius: 0;
-webkit-border-bottom-left-radius: 0;
-webkit-border-top-left-radius: 3px;
bottom:0;
top:0;
}
.widget-content.popular-posts {border-top: 1px solid #CCC;padding: 0em;margin: 0 0 0;
}
.popular-posts ul{padding:0!important;margin:0!important;}
.popular-posts ul li {
border-bottom: 1px solid #f1f1f1;
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;}
#PopularPosts1 li:nth-child(odd) {background: #F9F9F9;}
#PopularPosts1 li:nth-child(even) {background: #FFF;}
#PopularPosts1 li:first-child {border-top: 1px solid #f1f1f1;}
#PopularPosts1 li {padding-right: 1em !important;padding-left: 1em !important;}
#PopularPosts1 ul li:before {content: counters(trackit,".");padding: 0 .1em 0 0;font-size: 20px;font-weight: bold;color: #D8D8D8;float: left;}
.PopularPosts .item-thumbnail,.PopularPosts .item-snippet {display: none;}
#PopularPosts1 a:hover {text-decoration: underline;}
#PopularPosts1 a {color: #3F3F3F;font-size: .9rem;}
.PopularPosts .item-title {padding: 0 0 .2em 1.5em;}

✔ Now save changes made to to template and you’re done. Peace!