10+ Latest Popular Post Widgets For Blogger With Thumbnails!

What type of blogging platform you are using doesn’t matter. I think that you obviously want to make your blog more beautiful to your readers. By customizing your Blogger blog, you can make it more user-friendly and eye-catching. If you customize your blog, then it will look like different and unique from others. That’s why today I will provide some best popular post widgets for the blogger with thumbnails.

There are many different ways to customize your blogger popular post widget. An eye-catching popular post widget will impress your readers. This will also increase the chance to get more clicks in your blog. Which will decrease the bounce rate of your blog and boost Alexa rank? Adding and customizing popular post is very easy. Just follow my instruction.

Related Customization:

How To Add Popular Post Widgets For Blogger?

First of all, I will show you how to add the default popular post widget to your blogger blog and then I will show you the way to customize it.

1. Sign into your blogger account and go to the “Layout” section.
2. Go to the sidebar section and click on the “Add a Gadget” link.
3. A popup window will appear. Choose “Popular Posts” gadget from the list. Click on the plus button to add it to your blog.

Add Popular Post Widgets For Blogger

4. Now it's time to configure the widget. From this configuration section, you will be asked to choose the most viewed posts of your blog. How many post you want to show with or without page thumbnail and snippet. Different popular post design requires different configuration so leave it as default for now. I will show what configuration needs for every widget later. Add the popular post widget by clicking on the “Save” button.

Add Popular Post Widgets For Blogger

After clicking on the save button, you will see the default popular post widget is added to your blogger blog. If you are using custom blogger templates then you will get a popular post widget design based on your template. If you like it, then you may keep it otherwise you can customize the popular post widget by picking one of the listed design provided in the below list.

Popular Post Widgets For Blogger:

Popular Post Widget Style 1:

Popular Post Widget Style 1

Blog Ornate generates this popular post widget. This beautiful widget is responsive. That means you don’t have to resize your widget’s width to fit with your blog’s sidebar. I have given 6 different image hover effect to this widget. Click here to get the step by step instruction to add this widget: Popular Post Widget For Blogger With 6 Hover Effect!

Popular Post Widget Style 2:

Popular Post Widget Style 2

.sidebar .PopularPosts ul {padding: 0;} .sidebar .PopularPosts ul li:first-child{max-height: 100%;width: 100%;opacity: 0.5;} .sidebar .PopularPosts ul li:nth-child(even){margin-right: 2%;} .sidebar .PopularPosts ul li {float: left;position: relative;width: 49%;overflow:hidden;padding: 0px !important;max-height: 120px;opacity: 0.4; box-sizing: border-box;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 {width: 100%;margin: 0;} .sidebar .PopularPosts ul li img {height: 100%;width: 100%;object-fit: cover;box-sizing: border-box;padding:0;} .sidebar .PopularPosts .item-content:hover .item-title a,.sidebar .PopularPosts .item-thumbnail-only:hover .item-title a {opacity: 1;visibility: visible;} .sidebar .PopularPosts .item-title a {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%);color: #fff;position: absolute;text-align: center;text-decoration: none;font: 13px 'Oswald', sans-serif; right: 0;left: 0;bottom: 0%;padding: 100px 10px 10px;visibility: hidden;opacity: 0;} .sidebar .PopularPosts .item-snippet {display: none;}

This is a grid style popular post widget for blogger. It is generated by helplogger. This widget has an excellent image hover effect. This widget is very eye-catching to attract more visitors. The title of your posts will be visible if readers hover their mouse over the image. The snippet will be hidden for this popular post widget, so the best option is to uncheck the snippet check box while configuring the widget.

Popular Post Widget Style 3:

Popular Post Widget Style 3

.widget .widget-item-control a img {background: none;height: 20px !important;width: 20px !important;border: none;padding: none;box-shadow: none;-moz-box-shadow: none;-webkit-box-shadow: none;-ie-box-shadow: none;} .sidebar .PopularPosts .widget-content ul li {overflow: hidden !important;height: 73px !important;list-style-type: none !important;list-style: none;padding: 0px 0px 0px;} .sidebar .popular-posts ul {list-style-type: none !important;padding-left:0px !important;} .sidebar .popular-posts ul {padding: 0;margin: 0;counter-reset: popcount;} .sidebar .popular-posts ul li:before {float: right;display: inline-block;position: relative;list-style-type: none;color: #000;background: rgba(247, 247, 247, 1);box-shadow: -2px 2px 10px rgba(187, 187, 187, 0.7);counter-increment: popcount;content: counter(popcount,decimal);font-size: 15px;font-weight: normal;line-height: 20px;right: 1px;top: 0px;z-index: 999999999999;padding: 0px 6px 1px 5px;border: solid #B5B5B5;border-width: 0px 1px 1px 1px;border-radius: 0px 0px 7px 7px;} .sidebar .PopularPosts .item-thumbnail {float: left;margin: 0px!important;} .sidebar .PopularPosts img {overflow: hidden !important;height: 72px;width: 72px;margin-right: 0px;padding-right: 0px !important;} .sidebar .PopularPosts .item-title a:hover {background: #f6f6f6;color: #000;} .sidebar .PopularPosts .item-title a {display: block;text-decoration: none;font-family: "Oswald",sans-serif;font-weight: normal;font-size: 14px;padding: 10px 30px 0px 78px;background: #EAEAEA;height: 62px;color: #6E6E6E;border-bottom: 1px solid #cccccc;line-height: normal;transition: all .4s ease-in-out;}

This is another beautiful, popular post widget for your blogger blog. This widget is designed by twistblogger. You can show the small snippet and an image thumbnail through this widget. This design also includes a smooth hover effect which makes this widget more effective.

Configuration : 
Go to the “Template” section and click on the “Edit Template” button.
Find “</head>” section and paste this code right before it.

Code :
<link href='http://fonts.googleapis.com/css?family=Oswald|Open+Sans:300italic,400italic,600italic,400,300,600,700' rel='stylesheet' type='text/css'/>

Popular Post Widget Style 4:

Popular Post Widget Style 4

.sidebar .popular-posts ul {padding: 0;margin: 0;counter-reset: popcount;} .sidebar .popular-posts ul li {list-style: none !important;float: left;font-family:'Oswald',Arial,Tahoma,sans-serif;position: relative;width: 48%;height: 130px;overflow: hidden;margin: 2px;padding: 0 !important;border: 0;} .sidebar .PopularPosts .item-thumbnail {width: 100%;margin: 0;} .sidebar .PopularPosts ul li img {float: left;display: block;height: 130px;width: 100%;padding: 0;-webkit-transition-duration: 1.0s;-moz-transition-duration: 1.0s;-o-transition-duration: 1.0s;transition:1.0s;} .sidebar .PopularPosts ul li img:hover {overflow: hidden;transform:scale(1.06);-webkit-transform:scale(1.06);-moz-transform:scale(1.06);-o-transform:scale(1.06);} .sidebar .PopularPosts .item-title {position: absolute;right: 0;left: 0;bottom:0;padding-bottom: 0;z-index: 999;} .sidebar .PopularPosts .item-title a {display: block;padding: 5px 0px 2px 5px;background: rgba(32, 32, 32, 0.77);text-transform: capitalize;font-size: 12px;color: #fff;line-height: normal;transition: all .4s ease-in-out;} .sidebar .popular-posts ul li:hover .item-title a {background: rgba(231, 76, 60, 0.88);color: rgba(255, 255, 255, 1);text-decoration: none;} .sidebar .popular-posts ul li:before {counter-increment: popcount;float: left;position: absolute;content: counter(popcount, decimal);list-style-type: none;background: rgba(255, 252, 8, 1);top: 0;font-size: 14px;color: #000;line-height: 20px;padding: 0px 8px 1px 1px;z-index: 4;border: solid #FFF;border-radius: 0px 0px 10px 0px;border-width: 0px 2px 2px 0px;}

This popular post widget is pretty different from other because this one is two column based widget. This widget will list popular post of your blog with thumbnail and title over it. Post counting is available in this template. That means the most visited post will get rank 1 and continue with this way. Thumbnails will show Zoom in effect for mouse hover too.

Configuration: For high-quality image performance you should add this snippet right before the closing "</body>" tag of your blogger template. Simply go to the Template > Edit HTML and find the closing </body> tag. Paste the JavaScript code right above the body tag.

Code :
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'/><script type='text/javascript'>//<![CDATA[ $(document).ready(function() {   var boi = 150;   $('#PopularPosts1').find('img').each(function(n, image){     var image = $(image);     image.attr({src : image.attr('src').replace(/s\B\d{2,4}/,'s' + boi)});     image.attr('width',boi);     image.attr('height',boi);   }); }); //]]></script>

You can remove the highlighted jquery line if your template has already contained this otherwise no modification is needed to this code.

Popular Post Widget Style 5:

Popular Post Widget Style 5

.sidebar .popular-posts ul {counter-reset: popcount;padding: 0;margin: 0;} .sidebar .popular-posts ul li {float: left;position: relative;overflow: hidden;list-style: none !important;border: 0;height: 130px;width: 100%;font-family: "Oswald",sans-serif;font-weight: bold;margin: 2px;padding: 0px !important;} .sidebar .PopularPosts .item-thumbnail {width: 100%;margin: 0;} .sidebar .PopularPosts ul li img {display: block;float: left;width: 100%;height: 130px;padding: 0;transition:1.0s;-webkit-transition-duration: 1.0s;-moz-transition-duration: 1.0s;-o-transition-duration: 1.0s;} .sidebar .PopularPosts ul li img:hover {overflow: hidden;transform:scale(1.06);-webkit-transform:scale(1.06);-moz-transform:scale(1.06);-o-transform:scale(1.06);} .sidebar .PopularPosts .item-title {position: absolute;padding-bottom: 0;z-index: 999;right: 0;left: 0;bottom:0;} .sidebar .PopularPosts .item-title a {display: block;background: rgba(32, 32, 32, 0.77);font-family: "Oswald",sans-serif;font-weight: bold;font-size: 16px;line-height: normal;color: #FFFFFF;text-transform: capitalize;padding: 10px 0px 5px 10px;transition: all .4s ease-in-out;} .sidebar .popular-posts ul li:hover .item-title a {background: rgba(231, 76, 60, 0.88);color: rgba(255, 255, 255, 1);text-decoration: none;} .sidebar .popular-posts ul li:before {counter-increment: popcount;content: counter(popcount, decimal);position: absolute;list-style-type: none;background: rgba(255, 252, 8, 1);float: left;color: #000;line-height: 20px;font-size: 14px;padding: 0px 8px 1px 1px;border-radius: 0px 0px 10px 0px;border-width: 0px 2px 2px 0px;border: solid #FFF;top: 0;z-index: 4;}

This is another beautiful, popular post widget design for blogger. This widget will show images of your popular post and title will be visible over images. Zoom in effect is available on mouse hover. This widget will arrange all of your blog’s popular post and provide rank by putting numbers on each post.

Popular Post Widget Style 6:

Popular Post Widget Style 6

.popular-posts ul{padding-left:0px;} .popular-posts ul li {list-style-type: none;background: #FFF url(http://4.bp.blogspot.com/-oOVUW06ghgo/UHwuqL9TltI/AAAAAAAAGKU/Nj4DQnvft8k/s1600/1.gif)  no-repeat scroll 5px 10px;border: 1px solid #ddd;padding:5px 5px 5px 20px !important;margin:0 0 5px 0px;border-radius:10px;-moz-border-radius:10px;-webkit-border-radius:10px;} .popular-posts ul li:hover {border:1px solid #6BB5FF;} .popular-posts ul li a:hover {text-decoration:none;} .popular-posts .item-thumbnail img {border-radius: 100px;-moz-border-radius: 100px;webkit-border-radius: 100px;  box-shadow: 0 1px 3px rgba(0, 0, 0, .4);-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, .4);-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, .4);}

This popular post widget is simple and clean. The design of this widget force images to become round shape. You can use this widget with a snippet or without a snippet. If you don’t want to make your blog messy or if your blog already contains many widgets in the sidebar then you will become comfortable with this simple widget.

Popular Post Widget Style 7:

Popular Post Widget Style 7

#PopularPosts1 h2{margin-bottom:10px;padding:7px 0 3px 0;width:100%;text-align:center;text-indent:-12px;font-size:18px;color: #757575;} #PopularPosts1 ul{counter-reset:li;width:290px;padding:8px 0px 1px;left:-7px;list-style:none;} #PopularPosts1 li{width:285px;left:-5px;position:relative;padding: 3px 2px 0 17px;margin:0 0 10px 0;} #PopularPosts1 ul li{display: block;position: relative;background: #ddd;margin: .5em 0;*padding: .2em;padding: .4em .2em .4em 2em;border-radius: .3em;transition: all .3s ease-out;text-decoration: none;} #PopularPosts1 ul li:before{background: #FB8835;color: #fff;position: absolute;counter-increment: li;content: counter(li);margin: -1.3em;top: 50%;left: 0;width: 2em;height: 2em;border: .2em solid #fff;border-radius: 2em;text-align: center;font-size: 15px;line-height: 2em;font-weight: bold;box-shadow: 0 8px 5px -7px #888;-webkit-box-shadow: 0 8px 5px -7px #888;-moz-box-shadow: 0 8px 5px -7px #888;transition: all .3s ease-out;} #PopularPosts1 ul li:hover{background: #eee;} #PopularPosts1 ul li:hover:before{transform: rotate(360deg);   } #PopularPosts1 ul li a{display:block;min-height:25px;font: 14px Georgia, serif;color: #444;text-transform: uppercase;text-decoration:none;text-shadow: 0 -1px 2px #fff;} #PopularPosts1 ul li a:hover{color: #444;}

This popular post widget comes with rotating number effect right beside the thumbnail. This is another simple and clean blogger popular post widget. This widget is very easy to install. Just copy the CSS code and paste it into your Blogger template. Then the widget will show its magic.

Popular Post Widget Style 8:

Popular Post Widget Style 8

.PopularPosts .item-thumbnail {margin: 0 15px 0 0;} .PopularPosts .item-title {padding-top:20px;} .PopularPosts ul li a {color: black;font: 14px verdana;} .PopularPosts .item-thumbnail img{background:#fff;width:55px;height:55px;box-shadow: 1px 1px 5px rgba(0, 0, 0, .1);border:1px solid #fff;border-radius: 100px 0px;padding:3px;-moz-border-radius: 100px 0px;-webkit-border-radius: 100px 0px;-moz-box-shadow: 1px 1px 5px rgba(0, 0, 0, .1);  -webkit-box-shadow: 1px 1px 5px rgba(0, 0, 0, .1);}

This widget is completely different from others. This popular post widget has a different image shape which will attract your readers quickly. This widget is basically for those who needs to keep their blog clean and simple.

Popular Post Widget Style 9:

Popular Post Widget Style 9

.PopularPosts .item-thumbnail {margin-right: 10px;margin-bottom: 0;box-shadow: 0 0 9px rgba(0,0,0,0.4) inset;border-radius: 50%;-webkit-box-shadow: 0 0 9px rgba(0,0,0,0.4) inset;-moz-box-shadow: 0 0 9px rgba(0,0,0,0.4) inset;-webkit-border-radius: 50%;-moz-border-radius: 50%;} .PopularPosts ul li img {border-radius: 50%;width: 50px;height: 50px;background: #333;padding-right: 0;-webkit-border-radius: 50%;-moz-border-radius: 50%;} .PopularPosts .widget-content ul li {background: #00aeef;} .PopularPosts ul li a {display: block;color: #fff;padding: 12px;line-height: 20px;font-family: Arial,serif;font-weight: 500;font-size: 15px;} .PopularPosts .widget-content ul li+li {margin: 0 10px 0 0;transition: all 0.4s ease;-moz-transition: all 0.4s ease;-webkit-transition: all 0.4s ease;} .PopularPosts .widget-content ul li+li+li {margin: 0 20px 0 0;} .PopularPosts .widget-content ul li+li+li+li {margin: 0 30px 0 0;} .PopularPosts .widget-content ul li+li+li+li+li {margin: 0 40px 0 0;} .PopularPosts .widget-content ul li:hover {opacity: 0.8;-moz-opacity: 0.8;-webkit-opacity: 0.8;} .PopularPosts .widget-content ul li:nth-child(2n+1) {background: #222;}

This lovely blogger popular post widget is totally different from other widgets. This widget is very attractive so it will increase the chance to get more clicks from your readers. Adding this widget to your site is a matter of few clicks. It supports top five popular posts of your site.

Configuration :
  • Select the image thumbnail option.
  • Uncheck snippet box.
  • Display up to 5 posts for optimal result.

Popular Post Widget Style 10:

Popular Post Widget Style 10

.PopularPosts .item-snippet{display:none} .PopularPosts .item-title{padding:0 5pxfont-weight:700;padding-bottom:.2em;} .PopularPosts .item-thumbnail{margin:0;} .PopularPosts ul{overflow:hidden;list-style:none;background:#fff;padding:5px 5px 0;margin:0;border-top:none} .PopularPosts ul{list-style:none;margin:0;color:#64707a} .PopularPosts li,.PopularPosts li img,.PopularPosts li a,.PopularPosts li a img{background:none;list-style:none;margin:0;padding:0;border:none;outline:none} .PopularPosts ul li img{display:block;float:left;background:#fafafa;margin:0 10px 0 0;height:60px;width:60px;overflow:hidden;} .PopularPosts ul li{position:relative;background-color:#fff;margin:0;padding:.7em 0!important;border:0;position:relative;border-bottom:1px solid #F1F1F1} .PopularPosts ul li:before{font-family:fontawesome;content:'\f005\f005\f005\f005\f005';display:inline-block;position:absolute;color:#30AEE1;text-align:center;bottom:0;right:0;margin:9px 0;font-size:11px;padding:0;font-weight:normal;line-height:normal;transition:all .3s} .PopularPosts ul li:hover:before{opacity:1} .PopularPosts ul li:first-child{border-top:none} .PopularPosts ul li:last-child{border-bottom:none} .PopularPosts ul li .item-title a,.PopularPosts ul li a{color:#333;font-size:13px;} .PopularPosts ul li a:hover{color:#2476e0;} .PopularPosts ul li:nth-child(1):before{font-family:fontawesome;content:'\f005\f005\f005\f005\f005';} .PopularPosts ul li:nth-child(2):before{font-family:fontawesome;content:'\f005\f005\f005\f005\f123';opacity:.9} .PopularPosts ul li:nth-child(3):before{font-family:fontawesome;content:'\f005\f005\f005\f005\f006';opacity:.85} .PopularPosts ul li:nth-child(4):before{font-family:fontawesome;content:'\f005\f005\f005\f123\f006';opacity:.8} .PopularPosts ul li:nth-child(5):before{font-family:fontawesome;content:'\f005\f005\f005\f006\f006';opacity:.75} .PopularPosts ul li:nth-child(6):before{font-family:fontawesome;content:'\f005\f005\f123\f006\f006';opacity:.7} .PopularPosts ul li:nth-child(7):before{font-family:fontawesome;content:'\f005\f005\f006\f006\f006';opacity:.75} .PopularPosts ul li:nth-child(8):before{font-family:fontawesome;content:'\f005\f123\f006\f006\f006';opacity:.7} .PopularPosts ul li:nth-child(9):before{font-family:fontawesome;content:'\f005\f006\f006\f006\f006';opacity:.75} .PopularPosts ul li:nth-child(10):before{font-family:fontawesome;content:'\f123\f006\f006\f006\f006';opacity:.7}

This popular post widget is very simple and clean. A small image thumbnail is available in this widget. But the main twist of this widget is ratings. This widget will show your most popular posts with star ratings which will look different to your readers. This will attract more visitors too. You can show up to 10 popular posts with star ratings by using this widget.

Adding Font Awesome Script: This widget requires Font Awesome script. So you have to install the font awesome script to configure this widget accurately.

Script :
<link href='//netdna.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css' rel='stylesheet' type='text/css'/>

Go to the Template > Edit HTML section and find the opening “<head>” tag. Paste the font awesome script right after <head> and click on “Save Template”.

Configuration :
  • Uncheck “Snippet” box.
  • Select “Image Thumbnail” and you can display up to 10 popular posts.

How to Add CSS For Popular Post Widget?

Have you choose any style from the above list? I guess yes. So now the question is how to add this CSS code into the blogger template. This procedure is very easy. Just follow these steps:

Note: Before editing, you should know how to backup blogger template and restore it?

1. Go to the “Template” section and click on the “Edit HTML” button on your blogger blog.

2. Now find the code “<b:skin>.” Expand it if it is not already expanded. Now go to the end of the CSS section and find “]]></b:skin>

3. Paste your chosen CSS code right above the “]]></b:skin>”.

4. Click on the “Save Template” button. If everything is ok, then you are done.

Add CSS For Blogger Popular Post Widgets

5. Now visit your blog to see if the widget is working properly or not.

These were my favorite popular post widgets for blogger. All of these widgets are tested, and I found these working properly. But if you are having trouble to implement your chosen widget then let me know by leaving a comment. I will get back to you very soon and obviously don’t forget to share.

I love to share my knowledge and experience. I am a part time blogger and a student of Computer Science & Engineering. I am a regular web developer & SEO analyst at Upwork. You can follow me on...

We accept <a> (for making links), <b> (for bold), <strong>, <em> and <i> Tags. Spam comments will be deleted.