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.

• View Results

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.

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:'Oswald',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...

Tags

CSS Tips and Tricks tutorial Widget

Zorex Zira

I'm A Web Designer And Developer, Stay Connect with us. facebook twitter instagram youtube external-link

Related Posts