Customize Popular Posts With Auto Numbering In Blogger

Popular Posts is one of the most important and useful tool which helps the visitors know about your most prevalent posts which is mostly read and viewed at your blog. It grades the most viewed posts according to Google Analytics Data. It also helps you to keep engaged your visitors and readers at our blog by driving huge amount of traffic and also increase the page views of your blog. Blogger provides the facility to their users to install the POPULAR POSTS widget by adding it from the Gadgets list. But the default Popular Posts widget has very limited options from the customization point of view and looks very simple. To make the Popular Posts widget looks more attractive and beautiful, you can customize it your own way. We are here with this tutorial to show you how easily you can customize and add some attractive Auto Numbering to your Popular Posts.

DEMO

• Also Read This: Enable Auto Numbering With Threaded Comments In Blogger

So let’s start the tutorial:

Add Popular Posts Widget In Blogger: 

First you have to add the default built-in “POPULAR POSTS” widget in Blogger with some settings.

1. Log-in to your Blogger Dashboard.

2. Go to LAYOUT > ADD A GADGET.

3. From “ADD A GADGET” list, select “POPULAR POSTS”.

4. Configure the POPULAR POSTS widget, follow the Settings below:

• Select “DISPLAY UPTO 7 OR 9 POSTS”.
• Uncheck the “IMAGE THUMBNAIL” and “SNIPPET”.

Check the screenshot below:

5. Click “SAVE”.

Customize Popular Posts With Auto Numbering In Blogger:

As you have added the “Popular Posts” widget, now it’s time to customize it.

1. Log-in to your Blogger Dashboard.

2. Go to Template > Backup. (Click Here To See, How?)

3. Now click “Edit HTML.”

4. Inside the “HTML EDITOR”, Press CTRL+F and search for </b:skin> tag. Click ► to expand the code.

5. Now copy & paste the following code, just above the </b:skin> tag.

.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;
}

6. Click “SAVE TEMPLATE”.

You are all done. Refresh your blog to see the “Popular Posts” widget with colorful Auto Numbers.

Customization:

1. By default the shape of the AUTO NUMBER BUBBLE is SQUARE. To change it to CIRCLE, add the following line of code:

border-radius:15px; Just after: box-shadow: 1px 2px 9px #666666;

2. To change the background color of the AUTO NUMBER BUBBLE, change #292D30 to your own hexadecimal color.

3. To change the text color of the AUTO NUMBER BUBBLE, change #ffffff to your own hexadecimal color.

That’s All.

Happy Blogging.

Got Questions?

Don’t forget to spread this knowledge with your friends and subscribe at our blog for more updates. If you need any questions, please feel free to ask by leaving your comments below and we will try our best to answer and will be great honor for us. Peace, blessings & cheers.! :)