Auto Numbering Plus Thumbnail Popular Posts Widget for Blogger

Thumbnail and Auto Numbering Popular Posts widget for Blogger
In this tutorial i will share how add a popular posts widget in your blog with Thumbnail and auto numbering. Blogger popular posts widget shows the most clicked and most visited posts in your blogger. This widget has been implemented with CSS elements.
This widget is easy customize-able. You implement it with you code snippets that suits to your blogger template. Blogger popular posts widget is a most important part of blogger. This widget help your visitors to find most viewed or most discussed posts.

Today i am sharing a popular posts widget for blogger that show popular posts of your blog thumbnail with auto numbering. Using this custom popular posts widget, you can make your popular posts widget more unique that is important in your blog.

Adding Popular Posts widget in Blogger

1. G to your blogger Dashboard > Template >Edit HTML > and copy below CSS code and paste it just above the </style> or ]]></b:skin>.

/* CSS Popular Post */ .PopularPosts ul,.PopularPosts li,.PopularPosts li img,.PopularPosts li a,.PopularPosts li a img{list-style:none;border:none;background:none;outline:none;margin:0;padding:0} .PopularPosts ul{list-style:none;font-family:&#39;Oswald&#39;,Sans-Serif;font-size:13px;color:#919392;margin:.5em 0} .PopularPosts ul li img{display:block;width:70px;height:70px;float:left;margin:0 15px 0 0; border: 1px solid silver;padding: 2px;} .PopularPosts ul li{background-color:#eee;counter-increment:num;position:relative;margin:0 10% 0 0;padding:10px} .PopularPosts ul li:before,.PopularPosts ul li .item-title a{font-weight:700;font-size:13px;color:#919392;text-decoration:none;transition:.5s linear; font-family: Open Sans;} .PopularPosts ul li:before{content:counter(num);display:block;position:absolute;background-color:rgb(247, 73, 73);color:#fff;width:30px;height:28px;line-height:25px;text-align:center;bottom:0;right:0;margin-top:15px;transition:.5s linear; border-radius: 10%;font-size: 18px; padding: 5px;} .PopularPosts ul li:nth-child(1),.PopularPosts ul li:nth-child(2),.PopularPosts ul li:nth-child(3),.PopularPosts ul li:nth-child(4),.PopularPosts ul li:nth-child(5),.PopularPosts ul li:nth-child(6),.PopularPosts ul li:nth-child(7),.PopularPosts ul li:nth-child(8),.PopularPosts ul li:nth-child(9),.PopularPosts ul li:nth-child(10){background:#fff;color:#aaacab; border-bottom:1px solid #EFEFEF;transition:all .5s linear;} PopularPosts ul li:last-child{border-bottom:none;} .PopularPosts ul li:hover:nth-child(1),.PopularPosts ul li:hover:nth-child(2),.PopularPosts ul li:hover:nth-child(3),.PopularPosts ul li:hover:nth-child(4),.PopularPosts ul li:hover:nth-child(5),.PopularPosts ul li:hover:nth-child(6),.PopularPosts ul li:hover:nth-child(7),.PopularPosts ul li:hover:nth-child(8),.PopularPosts ul li:hover:nth-child(9),.PopularPosts ul li:hover:nth-child(10){background-color:#fafafa;transition:all .5s linear;} .PopularPosts ul li:hover .item-title a{color:#37B576;transition:all .5s linear;} .PopularPosts ul li:hover:before{background-color:#37B576;color:#fff;transition:all .5s linear;} .PopularPosts .item-thumbnail{float:left;margin:0 0 0 10px;} .PopularPosts ul li .item-snippet {display:none;visibility:hidden;opacity:0;font-size:11px;color:#383838;transition:all .5s linear; font-family: Open Sans;} .PopularPosts ul li:hover .item-snippet {display:block;visibility:visible;opacity:1;transition:all .5s linear;}
And save your template.

2. No go to >Layout >Add a gadget >Popular Posts and configure it as shown in this screenshot.

popular post widget configuration
Subcribe to Our Newsletter For Free

Subscribe Now

Recommended For You


  1. I used this in my blog. I want to increase width of the thumbnail but when I increase, image is streching. How can I correct it?

    1. Hello Ramachandra! Could you please give me your blog URL?

    2. You must increase the both width and height as well and keep the dimensions same. example: width:80px;height:80px

  2. Ok. Thank you for your quick response. But I have used landscape like images which is not square. It will be cropped!!! So any other way? By blog is

    1. Thanks for your good compliment! Then you should keep the height greater than width.
      Example: width:70px;height:75px
      Additionally, you can make your thumbnails rounded by making a little change in css. Find the following code undefinedit can be located in the first line) .PopularPosts li a img{list-style:none;border:none;background:none;outline:none;margin:0;padding:0; . Replace the above mention code by the given snippets. .PopularPosts li a img{list-style:none;border:none;background:none;outline:none;margin:0;padding:0;border-radius:50%;}

    2. Failed to display full image so,I used border-radius:50%. Looks better. Thanks you.

    3. You're most welcome! Glad to know that it worked for you. Keep visiting. Thank you