Popular Posts With Automatic Numbering - Bubbles!

When blogger released Popular Posts widget back in 2011, we leaked out its stylesheet so that you can customize it to blend it perfectly to your BlogSpot templates. Today we will learn how to display the list of popular posts using CSS3 auto increment property. You can style the numbers in variety of shapes, we styled them in square/rectangular and circular shape. you guys were the first to displaythttp://bestblogspotwidgets.blogspot.in/and today you will again learn something more interesting. You can see a practical demo of this implementation on our sidebar. Lets add this effect to blogger in fairly easy steps using pure styles with no use of JavaScript.

Popular posts widget is an effective tool to increase your blog pageviews and engage readers more on your blog. It fetches and ranks posts based on most visited pages using your Google analytics data.

Customize Popular Posts Plugin

Now you need to change the default styles and change its look to our desired design using Custom styles.

1. Go To Blogger > Template
2. Backup your Template
3. Click Edit HTML
4. Search for </b:skin>.  Click the black arrow to expand the code.

   5.  Paste the following Styles just above </b:skin>

/*--- MBT Popular Posts --- */
.popular-posts ul {
padding-left: 0px;
counter-reset: popcount;
}

.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: 16px;
background: #292D30;
color: #ffffff;
position: relative;
font-weight: bold;
font-family: georgia;
float: left;
border: 2px solid #dddddd;
box-shadow: 1px 2px 9px #666666; }

.popular-posts ul li {
border-bottom: 1px dashed #dddddd;
}

.popular-posts ul li:hover {
border-bottom: 1px dashed #696969;
}

.popular-posts ul li a {
text-decoration:none; color:#5A5F63;
}

.popular-posts ul li a:hover {
text-decoration:none;
}

Customization:

• To change the background color of the Square bubble edit #292D30
• To change the text color of the bubble edit #ffffff
• By default the shape of the bubble is Square. To change it to Circle simply add the following code just after box-shadow: 1px 2px 9px #666666;