Blogger Popular Posts widget with Thumbnail and Auto Numbering

Blogger Popular Posts widget with Thumbnail and Auto Numbering

Blogger Popular Posts widget with Thumbnail and Auto Numbering

Blogger Popular Posts widget with Thumbnail and Auto Numbering - in this tutorial i will share how add a popular posts widget in your blog with Thumbnail and auto numbering. Blogger popular posts widget is a customize able widget with CSS.

Before someday i shared a widget : Popular Posts widget with Auto Numbering that was only title and auto numbering. In this tutorial today i will show you how to add blogger popular posts widget with Thumbnail, snippet and auto numbering. This widget created with CSS element. when visitors mouse hover on this widget's every posts, then snippet will shown. Normally in this widget snippet has hidden.

Blogger popular posts widget is a most important part of blogger. This widget help your visitors to find most viewed or most discussed posts. By using this widget you could grow up your visitors.

Every users of blogspot looking for a great design of their blog. Blogger popular posts widget is widget, that show most viewed post (last 7days, last 30days and all time viewed). Some times you have need more attractive and some unique widget for your blog. Because popular posts widget is a most important in every blog. By using popular posts widget, you could increase your blog traffic. Every users always looking for most interesting posts, that users make helped. Blogger popular posts widget is way to show most interesting and most viewed posts in your blog.

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

Now lets start, at first you have to need configure your popular posts widget. Go to Layout > Add a gadget > Popular posts and configure it with below imge.

Blogger Popular Posts widget with Thumbnail and Auto Numbering

Now go to Template > Edit HTML > and copy past below CSS code before </style>
 /* 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;} 

Now Save Template.

Refresh page and see results. Thanks...

Previous Post
Next Post

post written by:

TemplateMark better known as Template Market provides High quality free and premium Blogger templates. If you running a blog with Blogspot platform, then you can choose more than 20+ free blogger templates for your blog. TemplateMark provides free version of every template. You can highly choice TemplateMark for your digital blog.


  1. Hello Dear,
    Thank You very much for this nice post. This is a great help for me. And it worked well for me.

  2. thanks, you deserve an award brooh! it worked in ma blogged.

  3. Please how do i get to add comment box like this in my blog?

  4. These are great tips to add a popular posts widget. You just need to have the right photos that look nice when they are scaled to a smaller resolution.