New Plugin Popular Posts with Auto Numbering Section

Popular post showing yours best post in the blog, its means you are going so fast and everyone want to show your best and best post. You can easily customize your popular post with new automatic numbering bubbles, now lets forwared to the post.

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

Add Popular Posts Widget :

1. Go to the Blogger > Layout
2. Click "Add a Gadget"
3. Choose "Popular Posts"  from the list
4. You will need to configure its settings as shown in the image below: uncheck "image thumbnail" and also "snippet"   Its better that you display at most 7-9 posts. Less is good & clean.

       5.  Save it

Customize Popular Post Plugin

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

1. Go To the 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 the </b:skin>

/*--- Fostips.blogspot.com 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 background color  easily 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;

border-radius:15px;

    6. Save your template and thats it you dont!

Share your's view on the comment box.