All the Bloggers are allowed to add “Popular Posts” widget easily by adding the gadget from Layout section of your blog. It is also very easy to customize for start bloggers.

By the name itself this gadget implies and shows the most important as well as most visited posts of your blog. With this widget you can customize in four possible combinations 
  1. Only the Title of the Post
  2. A thumbnail of the image and the post title
  3. Post title with a summary, and
  4. Post title with a thumbnail and a snippet.
This widget plays a vital role for the readers because it encourage’s visitors to drive into other posts which result in high page views and if you are monetized with any ads you will be paid in high amount. It can also attract other visitors to subscribe to your blog and to read the valuable content from your blog.

Preliminary Steps: Add the gadget if, haven’t done it yet

1. Select the “Layout” tab and add the “Popular Posts” gadget in that part of your blog you want to appear, such as in your sidebar, by clicking on “Add a Gadget“. 

2.Configure the widget to show only the post titles. You can do this by clicking on the “image thumbnail” and “snippet” checkboxes, as shown in the following image.
Configure Blogger Popular Posts 3065394
3. After configuring the widget, save the changes by clicking on Save, and then Save arrangement

How to add the CSS to create the style of the Popular Posts widget

1. Choose a style, then copy the CSS that appears below the image that shows the style.

2. Select the “Template” tab, then click on Customize > Advanced Add CSS and then paste the CSS style that you like the most.

Adding Css In Blogger Template Designer 7680000

3. Once you add the CSS, Save changes by clicking on the “Apply to Blog” button.

Note: Some Blogger templates might not allow adding CSS in that location. In that case, for adding the CSS style you need to access the Template’s HTML – from your Blogger Dashboard, go to Template > Edit HTML and paste the code just above the ]]> tag (press the CTRL + F keys to find it – you might need to click on the arrow to expand the code and after that search it again)

And that’s it! You’ve already customized the popular posts widget when it shows only post titles.

Blogger Popular Posts Gadget Style 1209321

#PopularPosts1 h2{
padding:7px 0 3px 0;
color: #757575; /* Color of the widget’s title */
#PopularPosts1 ul{
padding:8px 0px 1px;
#PopularPosts1 li{
margin:0 0 10px 0;
padding: 3px 2px 0 17px;
#PopularPosts1 ul li{
background: #eee;
position: relative;
display: block;
padding: .4em .2em .4em 2em;
*padding: .2em;
margin: .5em 0;
background: #ddd;
text-decoration: none;
border-radius: .3em;
transition: all .3s ease-out;   
#PopularPosts1 ul li:before{
content: counter(li);
counter-increment: li;
position: absolute; 
top: 50%;
margin: -1.3em;
height: 2em;
width: 2em;
line-height: 2em;
font-size: 15px;
color: #fff; /* text color of numbers */
background: #FB8835; /* background color of numbers */
border: .2em solid #fff; /* border color */
-webkit-box-shadow: 0 8px 5px -7px #888;
-moz-box-shadow: 0 8px 5px -7px #888;
box-shadow: 0 8px 5px -7px #888;
text-align: center;
font-weight: bold;
border-radius: 2em;
position: absolute;   
left: 0;
transition: all .3s ease-out;
#PopularPosts1 ul li:hover{
background: #eee;
#PopularPosts1 ul li:hover:before{
transform: rotate(360deg);   
#PopularPosts1 ul li a{
font: 14px Georgia, serif; /* font size of post titles */
text-shadow: 0 -1px 2px #fff;
color: #444;
text-transform: uppercase;
#PopularPosts1 ul li a:hover{
color: #444;

Final Notes:

All the CSS is valid. I just have to mention that the numbering is not visible in Internet Explorer 7, since that version of the browser does not support properties that make the numbers appear. For example in the 4th style, the circles look squared in IE8 and earlier versions since, these versions do not support a property that makes them look as circles.

Click Here for 
Popular Posts Widget 2, Popular Posts Widget 3, Popular Posts Widget 4