Don't Miss

Popular posts is a widget provided by blogger. It displays popular posts/most viewed posts of your blog. By default, the design of blogger default popular posts is ugly and not attention grabbing, that's why we need to customize it. You can try four different combinations for displaying this widget i.e.

1- Only the title of the post
2- Post title with summary
3- Post title with image thumbnail
4- Post title with image thumbnail and summary

Recommended for you:
3 Different Popular Posts Styles for Blogger
Add 2 Stylish Custom Popular Posts Widget to Blogger
Multi-Colored Popular Posts widget for Blogger
How to Customize Popular Posts Widget in Blogger 

Having a popular posts widget has lots of advantages. It encourages your visitors to surf more and check the most viewed articles of your blog. It decreases your bounce rate as people surf and spend more time on your blog. So, if you want to turn your simple popular posts style to a stylish one and you want to attract your visitors. In this article, we'll show you that How to Customize Popular Posts Widget in Blogger.
Customize Popular Posts Widget in Blogger

How to Customize Popular Posts Widget in Blogger

First and foremost, add the default popular posts widget by going to Layout >> Add a Gadget >> Select Popular Posts Gadget from the list and click Save button.

Now, log in to your Blogger Account >> Select a Blog >> Template and click Edit HTML. Click inside the template code area and by using Ctrl+F search for the ]]></b:skin> tag. Now copy the below code and paste it just above/before it (]]></b:skin> Tag)

.popular-posts ul li a {
    background: none repeat scroll 0 0 #4E5563;
    color: #FFFFFF;
    display: block;
    margin: 10px 0;
    padding: 25px 15px 30px;
    position: relative;
    text-decoration: none;
    transition: all 0.3s ease-out 0s;
 width: 87%;
}
.popular-posts ul li a:before {
    background: none repeat scroll 0 0 #373C45;
    color: #FFFFFF;
    font-weight: 700;
    height: 2em;
    line-height: 2em;
    margin-left: 88%;
    padding: 2px;
    position: absolute;
    text-align: center;
    width: 2em;
    border:1px solid white;
    transition: all 0.2s ease-in-out 0s;
   -moz-transition: all 0.3s ease-in-out 0s;
}
.popular-posts ul li a:hover {
    opacity: 0.8;
}
.popular-posts ul li a:hover:before {
    border-left-color: #CCCCCC;
}
.popular-posts ul li:first-child + li + li + li + li + li + li + li + li + li a:before {
    content: "10";
}
.popular-posts ul li:first-child + li + li + li + li + li + li + li + li a:before {
    content: "9";
}
.popular-posts ul li:first-child + li + li + li + li + li + li + li a:before {
    content: "8";
}
.popular-posts ul li:first-child + li + li + li + li + li + li a:before {
    content: "7";
}
.popular-posts ul li:first-child + li + li + li + li + li a:before {
    content: "6";
}
.popular-posts ul li:first-child + li + li + li + li a:before {
    content: "5";
}
.popular-posts ul li:first-child + li + li + li a:before {
    content: "4";
}
.popular-posts ul li:first-child + li + li a:before {
    content: "3";
}
.popular-posts ul li:first-child + li a:before {
    content: "2";
}
.popular-posts ul li:first-child a:before {
    content: "1";
}
.item-snippet {
    display: none;
}
.PopularPosts .item-thumbnail {
    display: none;

Hit the Save Template button and you're done.
Congratulations: You've successfully customized your popular posts widget.

From Editors Desk

We hope this article may have helped you in customizing popular posts widget. Share this article with your friends, don't forget to subscribe us and Join our Bloggers Forum on Facebook @ https://www.facebook.com/groups/730927093629291

12 comments to ''How to Customize Popular Posts Widget in Blogger - Numbered"

ADD COMMENT
  1. Thanks for the how to guide. I usually don't write content for blogs, but instead look for ghost writers or pay someone to write personal statement or a blog post for me. It saves much time. But adding posts is my job. I try to use thumbnails to encourage users to read more.

    ReplyDelete
  2. Business loans are a one of a kind subsidizing technique. It's a buy of future Mastercard deals, not an advance, so we need to utilize particular dialect steady with buy of future Visa deals, similar to payback rate and rebate rate rather than normally utilized financing cost on bank credits.Cash Advance Lemon-Grove

    ReplyDelete
  3. If they were posted while they were still a couple, I would seriously caution saying anything at all unless you want to sound crazy jealous in a budding relationship (except maybe, like Wendy said, pics where they're kissing or something).
    female villains

    ReplyDelete
  4. To persuasive essay writer online for programming topics, this is one of the best and helpful post for the students like me. I am a student of history science and these IT topics and subjects are just to complete my credit hours.

    ReplyDelete
  5. When students request for legitimate custom writing services from us, they are guaranteed of interacting with highly qualified custom assignment writing help writers for their custom term paper writing services needs.

    ReplyDelete
  6. If you have doubts towards writing the write paper for your classes, you simply need academic white paper examples where you will see all hte necessary components and learn how to write a good essay.

    ReplyDelete
  7. that's actually a piece of code. So nicely written. Professionally. Thanks to this e-learning methods I learned something to make my blog with a good content about online education.

    ReplyDelete
  8. Hello! When it comes about writing papers then it's a good idea to use professional help. You can apply t o the essay writing service and find there pre written blog content or other helpful options.

    ReplyDelete
  9. Thank you for sharing this useful material. The information you have mentioned here will be useful. I would like to share with you all one useful source https://order-essays.com/swot-analysis-writing-services/ which might be interesting for you as well.

    ReplyDelete
  10. I never really thought I could possibly get a loan online until my friend got a personal loan from Capital One Finance ltd where i also applied for a loan and was approved with a good credit score and i can as well recommend them for anyone who needs a loan. Email: capitalonefinanceltd2@gmail.com or WhatsApp: +1 (267)404-6479

    ReplyDelete