How to style Popular Posts Widget #1

DEMO

How to do this tutorial

Before you do this tutorial, I recommend you to back up your Blogger template, you can see How to back up and restore blogger template

Step 1

Log in to Blogger.com

Step 2

After log in, select Template > Edit HTML

Step 3

Then search code </head>, and paste following CSS right above that code:

<style type='text/css'>
/*Custom Popular Post*/
.PopularPosts ul,.PopularPosts li,.PopularPosts li a{margin:0;padding:0;list-style:none;border:none;background:none;outline:none;}
.PopularPosts ul {margin:0;list-style:none;color:black;counter-reset:num;}
.PopularPosts ul li .item-thumbnail {display:block;margin:0;margin-right:10px;width:60px;height:60px;float:left;}
.PopularPosts ul li img {display:block;width:auto;height:100%;border-radius:2px}
.PopularPosts ul li {background-color:#eee;margin:0 !important;padding:10px 30px 10px 10px !important;counter-increment:num;position:relative;}
.PopularPosts ul li:before,.PopularPosts ul li .item-title a, .PopularPosts ul li a {color:#000;transition:all .3s;}
.PopularPosts .item-title{font-weight:bold;text-decoration:none;font-size:15px;line-height:1.3em;display:block}
.PopularPosts ul li .item-title a:hover{color:#fff}
.PopularPosts ul li:before,#recent-posts ul li:before {content:counter(num) !important;font-size:12px;font-weight:bold !important;display:block;position:absolute;bottom:7px;right:7px;background:#fff !important;color:#555 !important;white-space:nowrap;padding:0 !important;width:27px;height:27px;line-height:27px !important;text-align:center;z-index:1;transition:all .3s;border-radius:99em}
#recent-posts ul li:nth-child(1),.PopularPosts ul li:nth-child(1) {background-color:#1BBFBF;}
#recent-posts ul li:nth-child(2),.PopularPosts ul li:nth-child(2) {background-color:#ff6e6e;}
#recent-posts ul li:nth-child(3),.PopularPosts ul li:nth-child(3) {background-color:#89D465;}
#recent-posts ul li:nth-child(4),.PopularPosts ul li:nth-child(4) {background-color:#FF9201;}
#recent-posts ul li:nth-child(5),.PopularPosts ul li:nth-child(5) {background-color:#FDCB01;}
#recent-posts ul li:nth-child(6),.PopularPosts ul li:nth-child(6) {background-color:#DEDB00;}
#recent-posts ul li:nth-child(7),.PopularPosts ul li:nth-child(7) {background-color:#89C237;}
#recent-posts ul li:nth-child(8),.PopularPosts ul li:nth-child(8) {background-color:#44CCF2;}
#recent-posts ul li:nth-child(9),.PopularPosts ul li:nth-child(9) {background-color:#FF7F50;}
#recent-posts ul li:nth-child(10),.PopularPosts ul li:nth-child(10) {background-color:#FD7FAA;}
.PopularPosts .item-snippet {margin:5px 0 0;font-size:11px;line-height:1.6em !important}
</style>

Note: You have to delete all existing CSS of Popular Post Widget if using above CSS

Save your Template

Step 4

Back to your Blog Dashboard, then add Widget Popular Posts, see How to Add Gadgets - Widgets to Blogger

Now going to your Blog and see Result