Numbered Popular Post Widget For Blogger

Here's a numbered popular post widget for Blogger that you can also try out on your blog.  

A popular post widget on your blog helps in displaying the posts that are currently trending either for that day, week or month on your blog.

While this helps in getting more clicks on the said post, the number of clicks can also be determined on the look of the widget on your blog.

If you are using the default blogger popular post widget that is just plain looking with no customizations with CSS and Javascript, then you may have to change it.

Why is that?

This is because we need a widget that can easily draw the attention of users when they visit your blog.

Keep in mind that every visit counts, hence you have to make the most of it.

Look at this way:

If more users of visiting your site's landing page also click on more pages on your blog from this popular post widget, you can reduce your site's bounce rate, increase its page views and generally, get an increment in income.

An increase in traffic will improve your Alexa rank, and a decrease in bounce rate will improve your site's rank in search engine results pages.

So you see,

One way or the other, this widget can be very helpful.

Most blogs you visit have at least one Popular Post widget at the sidebar or footer region of their blog because it is one of the best and necessary blogger widgets any blog should have. 

How does the Numbered Popular Post Widget For Blogger Work?


By default, blogger's popular post widget appears in a decreasing order with the most read post at the top followed by the next most read post, with the post with the least page views at the bottom. 

Also, there is no CSS color added to this widget to step up its look, hence if you're all in to have a blog with an impressive design, you might want to consider this widget.

On the other hand, this Numbered Popular Post Widget For Blogger displays all the popular post in a numerical format.

As seen in the image below, the first post gets a numerical numbering of 1, the next 2 and so on. 

As already stated,

This blogger widget helps in decreasing the bounce rate of your blog and at the same time increase your page views.


                

Also Read: Square Popular Posts Blogger Widget With Rotating Effect
                   Sliding Recent Posts Gadget Blogger 
                   Social Media Follow Buttons Widget For Blogger
                  Email Subscription Widget For Blogger
                  

How To Add Numbered Popular Post Widget On Blogger


To add a Numbered Popular Post Widget For Blogger on your blog, follow the steps given below:

  • From your Blogger dashboard, go to 'Layout'.
  • Depending on where you want the popular post gadget to appear, click on 'Add a gadget'.
  • From the popup options, select 'Popular Post'. Save the gadget.
  • Next, Goto your Blogger Template 
  • Click on 'Edit HTML'
  • Using Ctrl + F keys search for ]]></b:skin>
  • Copy the CSS code below and paste just 'above' ]]></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: "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;
} 

  • Save your template, and finally view your blog to see the Numbered Popular Post blogger Widget.   
If you have followed the steps as stated above, you should be able to add this Numbered Popular Post Widget For Blogger on your blog.

You can change the default blue and black color of the widget to match the color of your blog so that there will be uniformity,

This can be done by modifying the CSS color codes in the widget give above.

Conclusion:


Widgets like this are necessary on your blog for interlinking of blog post for on Page SEO and reducing your blog's bounce rate.

People are always curious as to why a thing is, hence you can take advantage of this by making the best of this widget of your blog to display only the most trending post.

Also Read:




Do you like this post? Please link back to this article by copying one of the codes below.

URL Of Post:


HTML Link Code:

BB (forum) link code:

Comments