5 Best Popular Posts Widgets for Blogger

5 Best Popular Posts Widgets for Blogger

5 Best and Cool Popular Posts Widgets for Blogger Blog.Popular Posts Widgets for Blogger is way to make your Bog Looks perfect and Attractive to the Visitors  .In Addition you can
make the Visitor to take more time on your BLOG by customizing your blog in a Better way by using these Best and Amazing Popular Posts Widgets for Blogger.It not only be a fact about your blog to make it more reliable to your visitors but also Helps them to have a good impression in their mind once they found your blog designed with these Best Popular widgets for Blogger.These are Top 5 Best Popular Posts Widgets for Your Blogger Blog.

If you have chosen Blogger Platform then you have to Do all the things manually in it because it doesn't have the features of Wordpress like Just depend on Installing the Plugin in it.
In Blogger all work is manual and you're always looking for it that how can customize your Blog in a better way.You can make your Blog eye-catching and give it a most attractive look by customizing installing Most wanted widgets into your Blogger.Once you will make your Blog in a Beautiful Look  ,then it will get the attention of your visitors and make them your Loyal readers and Followers.

There a lot of ways that will help you in making your blog look and on of them is to customize your blog with Popular Post Widget.So this will Guide will lead how you can Add Top 5 popular Posts Widgets into your Blogger.

Add Popular Posts Widgets into Blogger

Adding Popular post widgets into Blogger is not that difficult , Just Go to you Main "Dashboard" of your blog, then Go to "Layout" and click on "Add Gadget" then a new window will be appear with a list of widgets what  you can use into your Blogger . And from there Choose "Popular Posts" , once you will click on this Widget you will get a new Window on your Screen for Configure the Popular Posts in your own taste.

For example , How many posts you want to show on your Blog ,There is a limit of maximum 10 posts and you have to choose under the 10.And you can also have option to configure your Popular Posts that were Viewed mostly in last 30 days or 7 Days or that were most viewed All the time.

And you can Use the Title as you want for Example , you can write "Best Posts" or "Top Posts" instead of just using the "Popular Posts" ,it depend upon your choice.

Once you Have added the Popular Post Widget into your Blog now Let's come to the main part of Customize the Popular Posts in Attractive look that is suitable for you blog.

If you found any of these Different Popular Posts Looks that is matched with you Blog Design, so simply you can stick that From your blog to make it look perfect to your Blog readers.

Top 5 Amazing Popular Posts Widgets for Blogger

So here are the Top 5 Amazing Popular Posts widgets for Blogger/Blogspot Blog that are highly recommended for Bloggers to make their Blog Look attractive for their Visitors.

Popular Posts Style 1 : Post within a box

This is the Fist Popular Post widget Style and that's really very amazing.This Popular widget Style will show your Popular Post within a Box.This widget Style will customize your Thumbnails in a unique way.The Title of your Post will be shown in a small transparent box.

This is the Most best widget for blogger that will grab your readers attention with you Blog Colorful look.

And here is the CSS Code of this Popular Posts Style #1.CSS Code: 

.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 'Oswald', 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 "Times New Roman",Times,FreeSerif,serif;
text-align: center;
top: 35px;
width: 60%;
z-index: 1;
}
.sidebar .PopularPosts .item-content {
position: relative;
}
</style> 

<style type='text/css'>

Popular Posts Style 2: Large Thumbnails with Small Post Titles

This the 2nd Popular Posts Style Widget that is more different and looks very attractive.This Popular Posts widget style is well popular for its amazing features.In this widget Style Posts Thumbnail will be shown Large and the Title of the Post will be written under the Thumbnail.Applying this Widget style will catch the attention of visitors to you blog,
Moreover this is recommended by those people who are running the clothes,art,fashion site to focus their Visitors to their Most popular products.

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:Posts with Colorful boxes

If you want make your Blog posts eye-catching then this is the right widget for you. By Adding this Widget into your Blogger ,All You Popular Posts will be shown in a different color.
This widget have different feature like the thumbnail of the post and the Title Will be shown under attractive Shades of light green, ocher yellow and vivid orange.Each Popular Post will be shown in a different color in this widget.

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 :Posts in Grid Layout

As in above excellent Widget style of Different Color for Each Popular Posts .This Grid Layout widget Style is eye-catching for those blog who have most visual stuff Like More Pictures,Wallpapers etc.In this style the Title of Your Popular Blog posts will be remain Hide until someone will Highlight the post by Pointing out the Post with Mouse to read the Title.

 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: Show Numbered posts

Another Amazing Popular Posts Widget Style is to show them in Numbered value.By adding this widget Style your All Popular posts will be shown as Numbered Posts and its Looks very attractive.
However its a best option for those people who wants to looks their blogs more excellent.

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>

It Depend on your Taste which amazing Popular Post Widget That you will choose for your Blogger.Once you decided to Widget style that you want for your Blog , Then Next step is How to  Add CSS Code of These Popular Posts Widget into Blogger. So don't worry about it ,just follow these instructions.

 Adding CSS Code into Blogger

Go though your Blog "Dashboard" and click on "Template" button, and then select "Edit HTML" to go into Template Editor.
Once you have opened the Template HTML, now search this HTML tag inside you Blogger template.

</head>

When you will find this Code just put you required CSS code above this HTML Tag.

Adding JavaScipt into Blogger

Once you have successfully added the CSS code of a Popular Widget Style into Blogger ,Now Next is to Adding the Javascript into Blogger for making these CSS Code work.These Popular widgets Styles won't work until you added the Javascript into your blogger.
To add the Javascript Just add this Javascript Code above the </Body> Tag into your Blogger template.

Javascript Code:

<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>

Once you have followed all the Instruction Correctly Now click on "SAVE Template" for saving these codes into your blogger.

These Top 5 Best and Amazing Popular Posts widgets For Blogger will help your Blog in making its look interesting and eye-catching to the Visitors.Each Style for Blogger has its own Work and appearance in the Blog so always choose right widget for your Blog.