Nice Popular Posts widget with Auto Numbering

Popular Posts widget with Auto Numbering - in this post i am share how to make your popular posts widget with auto numbering. Blogger popular posts widget is a customizeable widget in CSS. Today we will learn how make blogger popular posts widget in automatic numbering mode.

In this widget you couldn't use post thumbnails and post snippet. Just use post title with auto numbering. I think this widget will be most effective widget for your more pageviews. Popular post widget help engage visitors more on your blog.

 

Now lets start. at first you have to need adding popular post widget.

1. Go to Blogger Dashboard > Layout > Add a gadget > Popular posts
2. Now you have to need configure this widget. Below i share a screenshot. After configure Save it.

Now you have to need customize this widget with CSS. 

1. Go to Blogger Dashboard > Template > Edit HTML and find </style> tag.
2. Copy and past below CSS Code before </style> tag and Save Template.

.popular-posts ul { padding-left: 0px; counter-reset: popcount;margin:0; }
.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: 18px; background: #f35d5c; color: #ffffff; position: relative; float: left;  }
.popular-posts ul li {padding: 10px;border: 1px solid rgb(231, 231, 231); display: block;}
.popular-posts ul li:hover { border: 1px solid rgb(174, 174, 174);border-radius: 3px;}
.popular-posts ul li a {text-decoration:none; color:#5A5F63; }
.popular-posts ul li a:hover { text-decoration:none; }