5 Best Popular Posts Widgets for Blogger

If you're using Blogger as the platform for your personal or business blog, you're probably looking for ways to customize it and make it your own. This way, you'll make your webpages unique and eye-catching and ensure they'll stand out from the many other pages on the internet. You'll also grab the attention of your target market, encourage them to browse through your blog and become your loyal readers and followers.

Fortunately, there are lots of ways to personalize your Blogger blog, and one of these is to customize your Popular Posts widget. Haven't installed this yet? Don't worry since putting it in your blog easy.
popular posts widget for blogger

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 (e.g. those that were most viewed in the past 7 days or 30 days or from the beginning of your blog). 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. (Remember that each widget style has different requirements, so follow the instructions carefully to know if you'll need the snippet and image thumbnail or not).

Configuring Popular Posts Widget for Blogger

Once you've followed these instructions, you'll get to see the basic version of the Popular Posts Widget for Blogger in your blog. You can stick with this if it matches your blog design but, if it sticks out like a sore thumb or doesn't suit your taste, there's no need to fret since you can personalize it. You can choose from the following styles - see the demo blog:

Popular Posts Style 1 - Box within a box

This is an interesting widget style since it uses your snippet and image thumbnail in a unique way. Your snippet is written in opaque text and placed in a small transparent box. This, in turn, is placed in a bigger rectangular box, wherein your image thumbnail is used as a background. Choosing this Popular Posts Widget for Blogger can be a great option if you want to brighten up your blog and grab the attention of readers with your colorful photos.

popular posts widget for blogger

CSS code:
<style type='text/css'>
.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%;
}
.sidebar .PopularPosts .item-title {
position: relative;
}
.sidebar .PopularPosts img {
height: 100%;
width: 100%;
object-fit: cover;
}
.sidebar .PopularPosts .item-title a {
color: #FFFFFF;
font: 15px &#39;Oswald&#39;, sans-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: 40px;
width: 60%;
height: 26px;
overflow: hidden;
z-index: 2;
}
.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 &quot;Times New Roman&quot;,Times,FreeSerif,serif;
text-align: center;
top: 35px;
width: 60%;
z-index: 1;
}
.sidebar .PopularPosts .item-content {
position: relative;
}
</style>

Popular Posts Style 2 - Large thumbnails with small post titles underneath

This uses the same code as the basic Blogger Popular Posts Widget with a few tweaks. Popularized by well-known blogs, this style is eye-catching because it focuses on pictures, which don't only summarize the posts' content but also add visual drama to the entire page. This is particularly useful for blogs that focus on clothes, makeup, art and other topics that highly depend on visual presentation to better express ideas.
popular posts widget for blogger
CSS code:
<style type='text/css'>
.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;
height: 120px;
}
.sidebar .PopularPosts .item-thumbnail {
width: 100%;
position: relative;
margin-bottom: 15px;
}
.sidebar .PopularPosts .item-thumbnail::before {
background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
border-bottom: 29px solid #fff;
border-left: 29px solid transparent;
border-right: 29px solid transparent;
bottom: 0px;
content: &quot;&quot;;
height: 0;
width: 0px;
left: 0px;
right: 0px;
margin-left: auto;
margin-right: auto;
position: absolute;
z-index: 3;
}
.sidebar .PopularPosts .item-thumbnail:after {
color: #000;
content: counter(popularcount, decimal);
counter-increment: popularcount;
font: 13px &quot;Times New Roman&quot;,Times,FreeSerif,serif;
list-style-type: none;
position: absolute;
bottom: 0;
text-align: center;
margin: 0px auto;
left: 0px;
right: 0px;
z-index: 4;
}
.sidebar .PopularPosts .item-thumbnail img {
position: relative;
width: 100%;
height: 120px;
object-fit: cover;
}
.sidebar .PopularPosts .item-title {
font: 15px &#39;Oswald&#39;, sans-serif;
text-transform: uppercase;
text-align: center;
margin: 0px auto;
padding-bottom: 10px;
border-bottom: 1px solid #000;
}
.sidebar .PopularPosts .item-title a {
color: #000;
text-decoration: none;
}
.sidebar .PopularPosts .item-snippet {
padding: 10px 15px;
font: 13px &quot;Times New Roman&quot;,Times,FreeSerif,serif;
text-align: center;
}
</style>

Popular Posts Style 3 - Colorful boxes

If your blog needs a pop of color, this is the right choice for you. This widget style presents your Popular Posts in several boxes that feature a thumbnail image and have bright, eye-catching shades like light green, ocher yellow and vivid orange. Each box has a different color, and you can add up to four boxes.

popular posts widget for blogger

CSS code:
<style type='text/css'>
.sidebar .PopularPosts ul {
padding: 0;
margin: 0;
}
.sidebar .PopularPosts .item-thumbnail a {
clip: auto;
display: block;
height: auto;
overflow: hidden;
}
.sidebar .PopularPosts .item-thumbnail {
width: 130px;
height: 130px;
border-right: 5px solid #fff;
margin: 0px 10px 0px 0px !important;
position: relative;
}
.sidebar .PopularPosts .item-thumbnail img {
position: relative;
height: 100%;
width: 100%;
object-fit: cover;
}
.sidebar .PopularPosts ul li {
float: left;
margin-bottom: 5px;
max-height: 130px;
min-width: 250px;
overflow: hidden;
}
.sidebar .PopularPosts ul li:first-child {
background: #D9EDF7;
}
.sidebar .PopularPosts ul li:first-child + li{
background: #F2DEDE;
}
.sidebar .PopularPosts ul li:first-child + li + li {
background: #DFF0D8;
}
.sidebar .PopularPosts ul li:first-child + li + li + li {
background: #FFEEBC;
}
.sidebar .PopularPosts ul li:first-child + li + li + li + li{
background: #E0E0E0;
}
.sidebar .PopularPosts .item-title {
font: 13px &#39;Oswald&#39;, sans-serif;
text-transform: uppercase;
padding: 10px 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;
padding-right: 5px;
}
.sidebar .PopularPosts .widget-content ul li {
padding: 0px 5px 0px 0px!important;
}
</style>

Popular Posts Style 4 - Grid layout

Just like the large-picture widget style, the grid layout is an excellent option if you want to showcase your pictures or if your blog depends on visual information. However, the title of your posts won't be included in the layout, so readers will have to hover their mouses on the images to read the titles.

popular posts widget for blogger

CSS code:
<style type='text/css'>
.sidebar .PopularPosts ul {
padding: 0;
}
.sidebar .PopularPosts ul li:first-child{
width: 100%;
max-height: 100%;
opacity: 0.9;
}
.sidebar .PopularPosts ul li:nth-child(even){
margin-right: 2%;
}
.sidebar .PopularPosts ul li {
box-sizing: border-box;
position: relative;
padding: 0px !important;
width: 49%;
max-height: 120px;
opacity: 0.4;
overflow:hidden;
float: left;
margin-bottom: 2%;
-webkit-transition: all 0.5s ease 0s;
-moz-transition: all 0.5s ease 0s;
-ms-transition: all 0.5s ease 0s;
-o-transition: all 0.5s ease 0s;
transition: all 0.5s ease 0s;
}
.sidebar .PopularPosts ul li:hover {
opacity: 1;
}
.sidebar .PopularPosts .item-thumbnail {
margin: 0;
width: 100%;
}
.sidebar .PopularPosts ul li img {
box-sizing: border-box;
width: 100%;
height: 100%;
object-fit: cover;
padding:0;
}
.sidebar .PopularPosts .item-content:hover .item-title a,
.sidebar .PopularPosts .item-thumbnail-only:hover .item-title a {
visibility: visible;
opacity: 1;
}
.sidebar .PopularPosts .item-title a {
color: #fff;
background: rgba(0, 0, 0, 0) linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.93) 100%, rgba(0, 0, 0, 0.85) 100%);
text-decoration: none;
position: absolute;
text-align: center;
font: 13px &#39;Oswald&#39;, sans-serif;
left: 0;
right: 0;
bottom: 0%;
padding: 100px 10px 10px;
opacity: 0;
visibility: hidden;
}
.sidebar .PopularPosts .item-snippet {
display: none;
}
</style>

Popular Posts Style 5 - Numbered posts

If you love numbered lists, or if you'd like to make your blog more organized, this can be the perfect option. By using the code for this widget style, your Popular Posts will be automatically numbered and will feature clean, minimalistic boxes that include your snippet and image thumbnail.

popular posts widget for blogger

CSS code:
<style type='text/css'>
.sidebar .PopularPosts ul {
counter-reset: popularcount;
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);
content: counter(popularcount, decimal);
counter-increment: popularcount;
font: 70px &#39;Oswald&#39;, sans-serif;
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: 13px &#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 are just some of the widget styles you can choose from. When you've picked a style you want, make sure to copy its CSS code. Once you do so, go to your blog, click "Template" on the left side and select "Edit HTML" under the template preview.

These next codes need to be pasted above the "</head>" or "</body>" tags, so check the instruction to know exactly where you need to put the code.

Adding the CSS

When the template editor has opened, click anywhere inside the code area and hit CTRL + F or Command F to search the following tag:
</head>
Just ABOVE the </head> tag, copy-paste the CSS code of one of the styles above.


Important: If the Popular Posts widget is located in the footer of your blog, remove the .sidebar class found in the CSS code in order to make it work.

Please note that most of the styles are using the Oswald font which you need to add to your template's code as well.

So, search for this tag:
<head>
Just BELOW it, add this line:
<link href='https://fonts.googleapis.com/css?family=Oswald:400,700' rel='stylesheet' type='text/css'/>

Adding the JavaScript

These styles 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;/w72-h72-p-nu/&#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>
Note: if you have already the jQuery library in your template, remove the line in red.

Once you have added all the codes in the right place, press the "Save template" button to save the changes.

That's it!

The five Popular Posts widgets for Blogger featured today are all great solutions for adding a popular post section to your blog. They all have different appearance for determining what makes a post popular, but the end result is the same: visitors are always one click away from your best content. Try some of these styles, find your favorite, and see how it impacts the performance of your blog.

44 comments:

  1. Great... I want see more...

    ReplyDelete
  2. Very cool. I'm going to try this out later today. Thank you!

    ReplyDelete
  3. very good bro...though you didn't leave comments. i was able to customize it and made my post title red. really neat work. Thanks sir

    ReplyDelete
  4. The popular posts 2 looks distorted on my blog www.anonymousbeautyblogger.com. Help! I can't seem to figure it out.

    ReplyDelete
    Replies
    1. Hi Lavanya,

      Please remove the existing style for the popular posts widget and then apply the chosen one from this tutorial. My best guess is that you added the codes found here, so you need to remove the CSS code and script and replace them with the ones from here.

      Hope it works!

      Delete
  5. @admin Wohoo! It worked like a charm. Thank you!! Can you please point me to a post for changing the default text fonts. Your website is so so helpful.

    ReplyDelete
    Replies
    1. Glad it worked :) Also, it would be recommended to check the snippet checkbox on the Popular Posts widget so that the style is displayed properly. To change the titles font, modify this line font: 15px 'Oswald', sans-serif; from .sidebar .PopularPosts .item-title { - where Oswald is the font family... and for the post snippet font sidebar .PopularPosts .item-snippet { this line font: 13px "Times New Roman",Times,FreeSerif,serif;. Don't forget to make a backup of your template.

      If you need to change the font of any element, please follow this tutorial.

      Delete
  6. @admin Oh no! My posts stopped sliding down on the homepage. Sigh. Help again?

    ReplyDelete
    Replies
    1. Hi Lavanya,

      You may need remove the jQuey library (the line in red) as you have multiple jQuery versions on the same page.

      Delete
  7. Hi, these are AMAZING! I was just wondering..on style no.4 it is only showing 5 posts when I have it selected to show 10 in my layout..is there a way I can stop this? http://myveryawesomeblog101.blogspot.co.uk/

    ReplyDelete
    Replies
    1. Hello, i just visited your blog. Will you mind if you add me as an admin to edit your blog?

      Delete
  8. I have added No. 2 widget. I think its best than others. Can I change the font color of this widget?

    ReplyDelete
  9. Nice collection, I pick style 3

    ReplyDelete
  10. Is there a way I can use one of these widgets as a 'recent posts widget'? How can I change it to display recent posts?

    ReplyDelete
  11. Wonderful! You always come with the best solutions when I'm looking for on the internet.

    Thanks for your efforts dedicated God bless here!

    ReplyDelete
  12. Many thanks! Works perfect for me.

    ReplyDelete
  13. Hi

    I have used the first template however I changed the width to 83% to fit in with the rest of my side bar, and now the item title and snippet aren't central? help! Also my background image cuts off the top and bottom of each picture? Any help would be great! thanks!

    ReplyDelete
    Replies
    1. Hi Amber,

      To center the snippet, add the following code just below the ".sidebar .PopularPosts .item-snippet {" line:

      text-align:center;

      To change the pictures size, modify the "190px" value from "width:190px;" found below ".sidebar .PopularPosts .item-thumbnail {" or remove "width:190px;" to display the full height.

      To move the title and snippet more at the bottom, change the "top" value from ".sidebar .PopularPosts .item-title a {" and from ".sidebar .PopularPosts .item-snippet {".

      Hope it works. Thanks for visiting!

      Delete
    2. Thanks so much that has worked... just a couple of other things sorry! Can I remove the first line of my post and just have the post title instead but still with the snippet shaded box? Also it doesn't display the whole title? thanks again!

      Delete
  14. i can't help but the resolution of the picture is just really bad when i try this.

    ReplyDelete
  15. I tried using the code for the first popular post style but it is not working on my blog. Do you have any idea why it just won't take effect on my website: www.thoughtsofahappymomma.com

    ReplyDelete
  16. Thank you admin, your blog is like a blogger bible for me. Regards, SK

    ReplyDelete
  17. This comment has been removed by the author.

    ReplyDelete
  18. This comment has been removed by the author.

    ReplyDelete
  19. I just apply Style 5 but image not show. Could you help me?

    ReplyDelete
  20. admin please i did this it worked thanks to you but the texts in the widget is too faint i want to change the font colour can you help me please

    ReplyDelete
  21. love all of them... I decided for the 4th style... thanks a lot! ;)

    ReplyDelete
  22. These are great! I chose #2, but the arrow/white triangle doesn't show up. :/
    www.wanderlustandheart.ca

    ReplyDelete
    Replies
    1. Hi Elizabeth,

      It seems that you missed the first CSS rule:

      .sidebar .PopularPosts ul {
      counter-reset: popularcount;
      margin: 0;
      padding: 0;
      }

      Also, please replace &quot;&quot; below .PopularPosts .item-thumbnail::before { with two double quotes ""

      Delete
  23. Hi Mr. Admin. Thanks a lot for these wonderful options. I have installed option 2, but unfortunatelly pictures do not show on main page. They do show on the preview though. What can I do please? Thanks. Ana

    ReplyDelete
    Replies
    1. @Ana, try to upload the images through Blogger and don't forget to select the 'image thumbnail' option in the Popular Posts gadget.

      Delete
  24. Admin please on style2, how can I increase the thumbnails. It shows small image in my blog

    ReplyDelete
  25. hi! its installed fine but when i change the width it goes out of alignment with the rest of my sidebar and goes too far to the left...is there any way i can stop that??
    thanks!

    ReplyDelete
  26. Hi Admin, Pls my pictures in the popular posts thumbnail are pixelated, what can I do? Thanks in advance for your response

    ReplyDelete
    Replies
    1. Please add again the last script above the body tag. Sorry for the late reply!

      Delete
  27. Thanks for these wonderful options. I have installed option 3. Its working on main page. Very helpful post. Thanks. Sheikh Sorwardi

    ReplyDelete
    Replies
    1. You're welcome! Thanks for visiting :)

      Delete
  28. hi
    I have added style 3 in my blog but the pics. are all blurred. But when viewed in mobile devices it looks just fine,the problem is when viewing on my PC. Please let me know what's the mistake.
    Thank you.

    ReplyDelete
    Replies
    1. Hi Elsa,

      It seems that Blogger has made some changes recently and the previous script doesn't work anymore. Please add again the script above the </body> tag and it should fix the issue.

      Delete

Although every comment is appreciated, due to an overwhelming amount of questions, I can no longer provide personalized help. Keep in mind that comments are moderated and may take some time to appear. All spam comments will be deleted. Thanks for understanding!