Premium Looking Popular Posts Widget For Blogger

The Popular Posts Widget is one of the most useful widgets that Google Blogger provides. It contains the list of the most viewed posts on our blog within a specific time range. So Popular Posts Widget is suitable in providing our visitors the list of all posts that are exceptional in getting page views this week, months or in all time history. It is something like we are feeding our visitors (especially new visitors) the nutritious contents that our blog had.

The most important reason why we should put this Popular Posts Widget is to minimize the bounce rate of our blog. Visitors might leave our blog when they are already got the information they need. So by providing this kind of widget we are offering more articles that are useful to them and through that visitors will stay longer on our blog.

Here is a simple tutorial for creating a premium looking Popular Posts Widgets for your Blog. Adding the Popular Posts Widget to Blogger Blog.

Adding the Popular Posts Widget for Blogger: Just click on your blog title, access the Layout menu, click "Add Widget" and choose "Popular Posts". A window will appear asking you to configure the widget by choosing which posts you'll feature. You'll also be asked to choose how many posts you'll feature in your Popular Posts section and select if you'll show the post title only or along with the image thumbnail and/or the snippet.

Once you've followed these instructions, Go to your Blogger dashboard >> Template >> Edit HTML:

Press CTRL + F and find this code:

</head>

Just above the </head> tag, Copy and Paste the CSS code described below:

<style type='text/css'>
.sidebar .PopularPosts ul {
margin: 0;
padding: 0;
}
.sidebar .PopularPosts ul li {
float: left;
max-height: 130px;
min-width: 250px;
position: relative;
}
.sidebar .PopularPosts .item-thumbnail::after {
color: rgba(255,255,255, 0.63);
list-style-type: none;
position: absolute;
left: 5px;
top: -5px;
z-index: 4;
}
.sidebar .PopularPosts .item-thumbnail::before {
background: rgba(0, 0, 0, 0.3);
bottom: 0px;
content: &quot;&quot;;
height: 100px;
width: 100px;
left: 0px;
right: 0px;
margin: 0px auto;
position: absolute;
z-index: 3;
}
.sidebar .PopularPosts .item-thumbnail a {
clip: auto;
display: block;
height: auto;
overflow: hidden;
}
.sidebar .PopularPosts .item-thumbnail {
width: 100px;
height: 100px;
margin: 0px 10px 0px 0px !important;
position: relative;
}
.sidebar .PopularPosts .item-thumbnail:hover:before {
display: none;
}
.sidebar .PopularPosts .item-thumbnail img {
position: relative;
padding-right: 0px !important;
height: 100%;
width: 100%;
object-fit: cover;
}
.sidebar .PopularPosts .item-title {
font: 11px &#39;Oswald&#39;, sans-serif;
text-transform: uppercase;
padding: 0px 5px 10px;
}
.sidebar .PopularPosts .item-title a {
color: #000;
text-decoration: none;
}
.sidebar .PopularPosts .item-snippet {
font: 13px &quot;Times New Roman&quot;,Times,FreeSerif,serif;
}
.sidebar .PopularPosts .widget-content ul li {
padding: 0px 5px 0px 0px !important;
}
.sidebar .PopularPosts .item-content {
padding: 5px 0px;
border-bottom: 1px dotted #dedede;
overflow: hidden;
height: 100px;
position: relative;
}
</style>

These style also require JavaScript codes in order to resize the popular posts image / thumbnail and trim the post snippet and title. To add the JavaScript, search the </body> tag and paste the following script just above it:

<script src='//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js'/>
<script type='text/javascript'>$(&#39;.popular-posts img&#39;).attr(&#39;src&#39;, function(e, t) {return t.replace(&#39;/s72-c/&#39;, &#39;/s350-c/&#39;)});$(&#39;.popular-posts ul li .item-snippet&#39;).each(function(){var txt=$(this).text().substr(0,60);var j=txt.lastIndexOf(&#39; &#39;);if(j&gt;10)$(this).text(txt.substr(0,j).replace(/[?,!\.-:;]*$/,&#39;...&#39;));});$(&#39;.popular-posts ul li .item-content a&#39;).each(function(){var txt=$(this).text().substr(0,60);var j=txt.lastIndexOf(&#39; &#39;);if(j&gt;=6)$(this).text(txt.substr(0,j).replace(/[?,!\.-:;]*$/,&#39;...&#39;));});</script>

If you have already the jQuery library in your template, remove the line in blue.

Once you have added all the codes in the right place, press the "Save template" button to save the changes. So that's it for today, hope you find this Popular posts widget helpful. Thank You!