Popular Posts Widget for Blogger with Thumbnails - Multiple Styles | Manu Forest Manu Forest: Popular Posts Widget for Blogger with Thumbnails - Multiple Styles
Contact Us:

If You Have Any Problem, Wanna Help, Wanna Write Guest Post, Find Any Error Or Want To Give Us Feedback, Just Feel Free To Contact Us. We Will Reply You Soon.

Name: *


Email: *

Message: *


LiveZilla Live Help

Templates Widgets About Us Services

Recent Posts

Tecno J8

Friday 26 February 2016

Popular Posts Widget for Blogger with Thumbnails - Multiple Styles

Published Under :
This is great to showcase your most popular posts in your blog sidebar. This will help you to make the visitors more engaging and ultimately to increase the time of the visitors on your site. But you may also know that the default style of the popular posts widget is very old fashioned and also not merge with your blog style. This is very annoying for those who really cares about the design of their blog.

The best solution for this problem is to change the style of the popular posts widget. This can be done by the one who knows the coding but for those who can't code this is a big challenge, But here is the best solution for them.Here I have curated all the 5 best popular posts widget for blogger around the web which you can simply apply by just copy and pasting. So let's check the list:

Style 1# Colorful boxes

This style is created by helplogger.
Popular Posts Widget for Blogger 1
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>

Style 2# Simple

This style is created by MyBLoggerLab.
Popular Posts Widget for Blogger 2


Code:
/*--- MyBloggerLab --- */.popular-posts ul{padding-left:0px;}.popular-posts ul li {background: #FFF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgBEVdGdh_bJc83rFR1AzahphurnC0iZcU8TpjoA7Ap6l4d8lmtW49FbzpArdsHAraxGRu3K8UZztV1seKKcHLLEHdUwv5hPkX5xPCZa74nAtqX9Upul97iTnVEwg8-gVGiG2-x-odQNHI/s1600/1.gif)  no-repeat scroll 5px 10px; list-style-type: none; margin:0 0 5px 0px; padding:5px 5px 5px 20px !important; border: 1px solid #ddd; 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 { webkit-border-radius: 100px; -moz-border-radius: 100px; border-radius: 100px; -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, .4); -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, .4); box-shadow: 0 1px 3px rgba(0, 0, 0, .4);} 

Style #3

This style is created by TwistBlogger
Popular Posts Widget for Blogger 3

Code

this will go in <body> tag.
<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 tbn = 150;
  $('#PopularPosts1').find('img').each(function(n, image){
    var image = $(image);
    image.attr({src : image.attr('src').replace(/s\B\d{2,4}/,'s' + tbn)});
    image.attr('width',tbn);
    image.attr('height',tbn);
  });
});
//]]></script> 

Css Code for 1st type:

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

Css code for 2nd type:

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

Style # 4 

This style is created by InternetSmash.
Popular Posts Widget for Blogger 4
Code:
.PopularPosts .item-title{font-weight:bold;padding-bottom:0.2em;text-shadow:0px 1px 0px #fff;}
.PopularPosts .widget-content ul li{padding:0.7em 0;background:none}
.PopularPosts img{border: 2px solid #FFF;border-radius: 10px;-webkit-border-radius: 10px;-moz-border-radius: 10px;-o-border-radius: 10px;padding-right: 0em;height: 5.4em;width: 5.6em;box-shadow: 0px 0px 6px rgba(14, 21, 34, 1);-webkit-transition: all 0.5s ease;}
.PopularPosts img:hover {-webkit-transform: rotate(360deg);}
.PopularPosts .item-thumbnail {margin: 0 5px 0px 5px;}

Style #5

This style is created by BloggingeHow
Popular Posts Widget for Blogger 5
code:
  /*--- BeH Popular Posts Widget Customized--- */
 
.popular-posts .item-thumbnail img:hover {
   opacity: 1;
   /*Reflection*/
  -webkit-box-reflect: below 0px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(.7, transparent), to(rgba(0,0,0,0.4)));
   /*Glow*/
  -webkit-box-shadow: 0px 0px 20px rgba(255,255,255,0.8);
  -moz-box-shadow: 0px 0px 20px rgba(255,255,255,0.8);
  box-shadow: 0px 0px 20px rgba(255,255,255,0.8);
-webkit-transform: rotate(-7deg);
    -moz-transform: rotate(-7deg);
    -o-transform: rotate(-7deg);
}
.popular-posts .item-thumbnail img {

    border-radius: 100px 100px 100px 100px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
    border: 5px solid #eee;
    /*Transition*/
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
 }
.popular-posts ul li {
margin: 12px;
    opacity: 0.8;
    border: 5px solid #eee;
 border-radius: 100px 100px 100px 100px;
    /*Transition*/
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    /*Reflection*/
}
.popular-posts a{
font-size: 13px solid;
}

This is the list of the top best styles of popular posts widget with thumnails. These widgets have created by the good developers and I have written their names along with the styles.
Like the Post? Share with your Friends:-

Posted By: Manu forest
Manu forest is a blog cum online blogger resources, where we provide various quality of tips, tricks, tutorials, widgets, blogger templates and other priceless goods related to blogger. this blog is mainly focused about the most and important topic in these days that "should We Migrate Blogger Blog To Self-hosted W@%$@#+%!?s" but wait we are here because we love blogger very much and our whole concept is that to help the new bloggers.
Join Us On: Facebook | Twitter | Goole Plus

0 Coments:

POST A COMMENT

Subscribe to: Post Comments (Atom)

Contact Us

Name

Email *

Message *

Recent Comments

 
Copyright © . . All Rights Reserved.
:-