Home Blogging Tips & Tweaks Cool Numbered Popular Posts Widget for Blogger

Cool Numbered Popular Posts Widget for Blogger

One of the things I love about Blogger is its flexibility. Unlike other blogging platforms, Blogger makes it very easy for its users to tweak their blog page anyhow they so desire at no cost at all. I have written several tutorials on how to customize a Blogger blog page to make it look very professional and hope they have been useful.

In today’s tutorial, we shall be looking at how to add a numbered popular post widget to a Blogger blog page. If you have noticed, Blogger lists posts that are visited the most in your blog in a decreasing other. This means that the first post title that appears at the top more closer to the popular posts heading is the most viewed among the posts you have written and published. One thing you need to know is that not every one understands that which is why it is very advisable you change it to a numbered one that informs users/visitors that a specific post is the number 1, 2, 3, 4…. most visited post in your blog.

I have not really done much tutorials on popular posts widget for Blogger but i believe the few i have written about are awesomely too good to be ignored. A list of all the tutorials i have written pertaining to how to create, customize and add a popular posts widget to a Blogger blog page is listed below. You can check each one out by clicking on them to know which will be good for your Blogger blog page.

Related Posts:

Now back to the main topic today, which is on how to add a cool numbered popular posts widget to a Blogger blog page. The guide is very simply to follow and i don’t expect any of you guys to find it difficult. But in case you get stuck, you know what to do. Just shoot me the question using the comment box below this post.

To replace a popular posts widget if you already have one in your blog with the numbered popular posts widget, simply follow the instructions below

  • Login to your Blogger Dashboard.
  • Navigate to Template >>> Edit HTML.
  • Using Ctrl + F, search for ]]></b:skin>
  • Copy the below CSS code and paste just above/before the ]]></b:skin>.
.popular-posts ul li a {

    background: none repeat scroll 0 0 #222222;

    color: #FFFFFF;

    display: block;

    margin: 10px 0;

    padding: 25px 15px 30px;

    position: relative;

    text-decoration: none;

    transition: all 0.3s ease-out 0s;

 width: 85%;

}

.popular-posts ul li a:before {

    background: none repeat scroll 0 0 #2DB3E9;

    color: #FFFFFF;

    font-weight: 700;

    height: 2em;

    line-height: 2em;

    margin-left: 88%;

    padding: 4px;

    position: absolute;

    text-align: center;

    width: 2em;

    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;

    left: -1px;

     -webkit-transition: all 0.2s ease-out;

    -moz-transition: all 0.2s ease-out;

    -ms-transition: all 0.2s ease-out;

    -o-transition: all 0.2s ease-out;

}

.popular-posts ul li:first-child + li + li + li + li + li + li + li + li + li a:before {

    content: "10th";

}

.popular-posts ul li:first-child + li + li + li + li + li + li + li + li a:before {

    content: "9th";

}

.popular-posts ul li:first-child + li + li + li + li + li + li + li a:before {

    content: "8th";

}

.popular-posts ul li:first-child + li + li + li + li + li + li a:before {

    content: "7th";

}

.popular-posts ul li:first-child + li + li + li + li + li a:before {

    content: "6th";

}

.popular-posts ul li:first-child + li + li + li + li a:before {

    content: "5th";

}

.popular-posts ul li:first-child + li + li + li a:before {

    content: "4th";

}

.popular-posts ul li:first-child + li + li a:before {

    content: "3rd";

}

.popular-posts ul li:first-child + li a:before {

    content: "2nd";

}

.popular-posts ul li:first-child a:before {

    content: "1st";

}

.item-snippet {

    display: none;

}

.PopularPosts .item-thumbnail {

    display: none;

}
  • Finally click on Save Template and you are done.

For those of you who have not already added a popular post widget to your blog and wish to make use of the numbered post widget, follow the below instructions;

  • Login to your Blogger Dashboard.
  • Go to Layout >>> Add a Gadget.
  • Scroll down the pop-up page, locate and select Popular Post from the list.
  • Customize as you want and then click on Save.
  • Drag the Popular Post gadget you just added to where you want it to be appearing in your Blogger blog page.
  • Now click on Save Arrangement to apply the change.
  • Next navigate to Template >>> Edit HTML.
  • Using Ctrl + F, search for ]]></b:skin>.
  • Copy the CSS codes below and paste just above/before the ]]></b:skin>
.popular-posts ul li a {

    background: none repeat scroll 0 0 #222222;

    color: #FFFFFF;

    display: block;

    margin: 10px 0;

    padding: 25px 15px 30px;

    position: relative;

    text-decoration: none;

    transition: all 0.3s ease-out 0s;

 width: 85%;

}

.popular-posts ul li a:before {

    background: none repeat scroll 0 0 #2DB3E9;

    color: #FFFFFF;

    font-weight: 700;

    height: 2em;

    line-height: 2em;

    margin-left: 88%;

    padding: 4px;

    position: absolute;

    text-align: center;

    width: 2em;

    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;

    left: -1px;

     -webkit-transition: all 0.2s ease-out;

    -moz-transition: all 0.2s ease-out;

    -ms-transition: all 0.2s ease-out;

    -o-transition: all 0.2s ease-out;

}

.popular-posts ul li:first-child + li + li + li + li + li + li + li + li + li a:before {

    content: "10th";

}

.popular-posts ul li:first-child + li + li + li + li + li + li + li + li a:before {

    content: "9th";

}

.popular-posts ul li:first-child + li + li + li + li + li + li + li a:before {

    content: "8th";

}

.popular-posts ul li:first-child + li + li + li + li + li + li a:before {

    content: "7th";

}

.popular-posts ul li:first-child + li + li + li + li + li a:before {

    content: "6th";

}

.popular-posts ul li:first-child + li + li + li + li a:before {

    content: "5th";

}

.popular-posts ul li:first-child + li + li + li a:before {

    content: "4th";

}

.popular-posts ul li:first-child + li + li a:before {

    content: "3rd";

}

.popular-posts ul li:first-child + li a:before {

    content: "2nd";

}

.popular-posts ul li:first-child a:before {

    content: "1st";

}

.item-snippet {

    display: none;

}

.PopularPosts .item-thumbnail {

    display: none;

}


  • Finally click on Save Template and you are done.

For questions, use the comment box below. Any un-related comment will not be published in the comment section and so should please be directed to me using the Contact Us page.

LEAVE A REPLY

Please enter your comment!
Please enter your name here

Most Popular

List of All JavaScript Arithmetic Operators With Examples

JavaScript offers several operators to help us work with numbers. All these operators are binary operators, which means they operate on two operands. The operands...

How to Find a Website’s RSS Feed’s URL

Having access to the RSS feed of a website gives you the opportunity to stay up-to-date on everything that website publishes. Whether that’s a...

Laravel: String data, right truncated: 1406 Data too long for column (SOLVED)

I was working on a project today when i ran into the error message "String data, right truncated: 1406 Data too long for column...

How to Enable or Disable Chrome’s Autofill on Android Devices

Storing your login details and other information in Chrome and/or your Google Account isn’t as secure as using an encrypted password manager, but it’s...

Recent Comments