How to Customize Popular Posts Widget in Blogger

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.

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

Tags:

Blog Design Widgets

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

Unknown18 June 2018 at 02:23
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.
Alan19 February 2019 at 05:43
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
Mick Vetori22 May 2019 at 00:26
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.
Freya Collins17 December 2019 at 04:38
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.
Harry K Williams27 April 2020 at 00:49
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.
Ciana Langham24 July 2020 at 07:53
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.
Alex Zhen22 September 2020 at 20:12
mapquest driving directions new road way
Unknown27 January 2021 at 10:36
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
Unknown25 June 2021 at 03:32
Thank you for this post. I'm a student and study information technology at the University. Your article really helped me to write problem cause solution speeches .
A&Z Bridal and Prom27 March 2022 at 10:36
For over 44 years AZ bridals has been helping women stand out in our signature ensembles. One stop shop to all your dress problems, from wedding dress to evening wear, prom to homecoming dresses, we have designs suitable for every formal event. Our aim is to provide expert tailoring and beautiful designs within affordable prices. Using inspiration from the brides as well as the latest dresses, we create a dress that is equally modern, classic and elegant. What makes us stand out? We are one of the few tailoring shops offering bespoke tailoring in all of London. Our skilled tailors ensure that the dresses made fit perfectly and are sewed according to the measurements that you have given. Find out more about us on our main website.
AZ Bridal and prom dress has been empowering women for over 44 years with the help of our designers and tailors. From teens to aged women, we have been dressing them for different events ranging from prom dresses, bridesmaid dresses, mother of the bride dresses, evening dresses etc. We have silhouettes for different aged women or the styles they desire can be selected finally for the dress. Let all eyes be on you in AZ ensembles.
Anonymous19 November 2022 at 02:55
More importantly, my checking account would also be somewhat emptier because of it. As the Hollywood soccer staff celebrated the start of what would become a championship journey, I felt like the largest loser on the planet. Dejected and demoralized, I realized I had added an pointless layer of anxiety onto something that should've been a casually gratifying time. The 토토사이트 European Commission has raised the threat level for money laundering in on-line playing to its highest possible ranking, and known as for lower thresholds for due diligence checks to prevent criminal activity. Logos of betting corporations and the percentages on sporting outcomes at the moment are|are actually} impossible to avoid, on the ground or on TV.