5 Advance Popular Post Widget for Blogger

Most bloggers wants their blog minimal and clean but still they want to add some of the most important widgets like Popular Post Widget. it is the most essential and important part of any blogger blog. it display's the most viewed or commented posts from a blog. it helps in reducing bounce rate an give your blog a stylish touch. Today in this tutorial we have published 5 different kind of popular post widgets which you can add in your blog. So lets Start.

• You can also check an Advance Related Post Widget For Blogger.

Adding the Popular Posts Widget (Compulsory) 

First go to  Blog Title → Layout → Add Widget → Popular Posts. Add the widget in the desired location and save the template.

Remember to check the Item Snippet and Image Thumbnail option. 

Let's Start Step-1 ( Adding CSS ) 

Before Editing we recommend you to make a backup of your template, so that anything goes wrong you still have your blog design safe.

The First thing you need to do is to login into your Blogger account and go to >> Templates >> Edit HTML and search for the ending ]]></b:skin> tag and just above it paste the following code.

Style-1

.sidebar .PopularPosts ul {
margin: 0;
padding: 0;
}
.sidebar .PopularPosts ul li {
list-style: none !important;
padding: 0 !important;
margin-bottom: 10px;
}
.sidebar .PopularPosts .item-thumbnail {
height: 190px;
margin: 0;
overflow: hidden;
width: 100%;
position: relative;
}
.sidebar .PopularPosts .item-title {
display:block;
clear:both;
}
.sidebar .PopularPosts img {
height: 100%;
width: 100%;
object-fit: cover;
}
.sidebar .PopularPosts .item-title a {
display: block;
margin: 0 auto;
padding: 5px 10px;
font-size:15px;
font-family: 'Playfair Display', serif;
}
.sidebar .PopularPosts .item-snippet {
background: rgba(0, 0, 0, 0.35);
border-top: 6px solid rgba(0, 0, 0, 0.1);
border-bottom: 6px solid rgba(0, 0, 0, 0.1);
color: #FFFFFF;
left: 0px;
right: 0px;
margin: 0px auto;
padding: 65px 10px 10px;
position: absolute;
font: 13px "Times New Roman",Times,FreeSerif,serif;
text-align: center;
top: 35px;
width: 60%;
z-index: 1;
}
.sidebar .PopularPosts .item-content {
position: relative;
}
.img-overlay {
position: absolute;
left: 0;
top: 0;
z-index: 1;
width: 100%;
height: 100%;
background-color: rgba(40,35,40,0.05);
}
.PopularPosts .item-thumbnail:hover a .img-overlay {
background-color:rgba(40,35,40,0.3)
}

Style-2

.sidebar .PopularPosts ul {
margin: 0;
padding: 0;
}
.sidebar .PopularPosts ul li {
list-style: none !important;
padding: 0 !important;
margin-bottom: 10px;
margin-right: 10px;
width: 48.4%;
float: left;
}
.sidebar .PopularPosts ul li.odd {
margin-right: 0;
}
.sidebar .PopularPosts .item-thumbnail {
height: 190px;
margin: 0;
overflow: hidden;
width: 100%;
position: relative;
}
.sidebar .PopularPosts .item-title {
display:block;
clear:both;
}
.sidebar .PopularPosts img {
height: 100%;
width: 100%;
object-fit: cover;
}
.sidebar .PopularPosts .item-thumbnail:before {
content: "\f02d";
font-family: FontAwesome;
line-height: 32px;
width: 32px;
height: 32px;
font-size: 18px;
color: #fff;
text-align: center;
font-weight: 400;
position: absolute;
top: 45%;
left: 40%;
opacity: 1;
padding: 0;
z-index: 2;
border: 2px solid #fff;
border-radius: 50%;
transition: all 0.25s ease-in-out 0s;
}
.sidebar .PopularPosts .item-title a {
display: block;
margin: 0 auto;
padding: 5px 0;
font-size:15px;
line-height: 20px;
width: 100%;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
cursor: pointer;
}
.sidebar .PopularPosts .item-snippet {
color: #333333;
margin: 0px auto;
}
.sidebar .PopularPosts .item-content {
position: relative;
}
.PopularPosts .img-overlay {
position: absolute;
left: 0;
top: 0;
z-index: 1;
width: 100%;
height: 100%;
background-color:#d86843;
opacity:0.5;
}
.PopularPosts .item-thumbnail:hover a .img-overlay {
background-color: rgba(40,35,40,0.3);
opacity:1;
}
.sidebar .PopularPosts .widget-content ul li:first-child,
.sidebar .custom-widget li:first-child {
padding-top: 0;
border-top: 0;
}
.sidebar .PopularPosts .widget-content ul li:last-child,
.sidebar .custom-widget li:last-child {
padding-bottom: 0;
}

Style-3

.PopularPosts .item-thumbnail {
margin: 0 10px 0 0 !important;
width: 80px;
height: 60px;
float: left;
overflow: hidden;
}
.PopularPosts .item-thumbnail a {
position: relative;
display: block;
overflow: hidden;
line-height: 0;
}
.PopularPosts ul li img {
padding: 0;
width: 80px;
height: 60px;
}
.PopularPosts .widget-content ul li {
overflow: hidden;
border-bottom: 1px solid #F5F5F5;
padding: 10px 0;
}
.sidebar .PopularPosts .widget-content ul li:first-child,
.sidebar .custom-widget li:first-child {
padding-top: 0;
border-top: 0;
}
.sidebar .PopularPosts .widget-content ul li:last-child,
.sidebar .custom-widget li:last-child {
padding-bottom: 0;
}
.PopularPosts ul li a {
color: #222222;
font-weight: 400;
font-size: 13px;
line-height: 1.6em;
}
.PopularPosts ul li a:hover {
color: #0277bd;
}
.PopularPosts .item-title {
margin: 0;
padding: 0;
line-height: 0;
}
.item-snippet {
font-size: 12px;
padding-top: 3px;
font-weight: 400;
color: #999;
}

Style-4

.PopularPosts .item-thumbnail{margin:0 15px 0 0 !important;width:90px;height:65px;float:left;overflow:hidden;    position: relative}
.PopularPosts .item-thumbnail a{position:relative;display:block;overflow:hidden;line-height:0}
.PopularPosts ul li img{width:90px;height:65px;object-fit:cover;padding:0;transition:all .3s ease}
.PopularPosts .widget-content ul li{overflow:hidden;padding:10px 0;border-top:1px solid #f2f2f2}
.sidebar .PopularPosts .widget-content ul li:first-child,.sidebar .custom-widget li:first-child,.tab-widget .PopularPosts .widget-content ul li:first-child,.tab-widget .custom-widget li:first-child{padding-top:0;border-top:0}
.sidebar .PopularPosts .widget-content ul li:last-child,.sidebar .custom-widget li:last-child,.tab-widget .PopularPosts .widget-content ul li:last-child,.tab-widget .custom-widget li:last-child{padding-bottom:0}
.PopularPosts ul li a{color:#333333;font-weight:400;font-size:14px;line-height:1.4em;transition:color .3s}
.PopularPosts ul li a:hover{color:#FF4400}
.PopularPosts .item-title{margin:0 0 4px;padding:0;line-height:0}
.item-snippet{display:none;font-size:0;padding-top:0}
.PopularPosts ul {
counter-reset: popularcount;
margin: 0;
padding: 0;
}
.PopularPosts .item-thumbnail::before {
background: rgba(0, 0, 0, 0.3);
bottom: 0px;
content: "";
height: 100px;
width: 100px;
left: 0px;
right: 0px;
margin: 0px auto;
position: absolute;
z-index: 3;
}
.PopularPosts .item-thumbnail::after {
color: rgba(255,255,255, 0.63);
content: counter(popularcount, decimal);
counter-increment: popularcount;
font-size: 70px;
list-style-type: none;
position: absolute;
left: 5px;
top: -5px;
z-index: 4;
}

Style-5

.sidebar .PopularPosts ul {
counter-reset: popularcount;
margin: 0;
padding: 0;
}
.sidebar .PopularPosts ul li {
width: 100%;
list-style: none !important;
padding: 0 !important;
margin-bottom: 20px;
position: relative;
border: 0;
}
.sidebar .PopularPosts .item-thumbnail a {
clip: auto;
display: block;
height: auto;
max-height: 180px;
}
.sidebar .PopularPosts .item-thumbnail {
width: 100%;
height: 100%;
max-height: 190px;
overflow: hidden;
margin-bottom: 10px;
}
.sidebar .PopularPosts .item-thumbnail:after {
content: counter(popularcount, decimal);
counter-increment: popularcount;
float: left;
font-size: 14px;
list-style-type: none;
padding:10px;
position: absolute;
top: 0;
z-index: 4;
background: #e84c4c;
color: #fff;
}
.sidebar .PopularPosts .item-thumbnail img {
width: 100%;
height: 100%;
object-fit: cover;
}
.sidebar .PopularPosts .item-title {
position: relative;
}
.sidebar .PopularPosts .item-title a {
color: #FFFFFF;
font: 15px 'Playfair Display', serif;
text-transform: uppercase;
font-size: 20px;
padding: 10px;
position: absolute;
right: 0;
left: 0px;
margin: 0px auto;
text-align: center;
text-decoration: none;
top: 80px;
width: 80%;
background-color: rgba(0,0,0,0.5);
overflow: hidden;
z-index: 2;
}
.sidebar .PopularPosts .item-snippet {
padding: 10px 15px;
font-size: 13px;
text-align: center;
background: #e84c4c;
color:#fff;
}

Step-2 ( Adding SCRIPT ) - Resizing Thumbnail !!

Now this is the extra part for this widget basically blogger generates 72px width images which is not suitable in some cases, so we will change it with original size of the image for better quality. In the template, search for the </body> tag  and just above it paste the following HTML Coding.

<script type='text/javascript'>
//<![CDATA[ 
function resizeThumbarlina(e,t){for(var s=document.getElementById(e),r=s.getElementsByTagName("img"),c=0;c<r.length;c++)r[c].src=r[c].src.replace(/\/s72\-c/,"/s"+t),r[c].width=t,r[c].height=t}resizeThumbarlina("PopularPosts1",400);
$(document).ready(function(){
 $('.PopularPosts img').each(function(){
  var srcUrl = $(this).attr('src');
  $(this).attr('src', srcUrl.replace('default', 'maxresdefault'));
 });

});
//]]>
</script>

Conclusion

Congrats !! You have made it. now you have learned that How to add popular post widget in blogger blog. Visit your blog and check the awesome widget live in action, hope you liked this tutorial, if you enjoyed then please share it with your friends, we are working hard to develop more such awesome widgets please stay tuned with Us. Au Revoir !! (Goodbye in French).