Popular Posts Gadget of Blogger has a specific fixed style that isn't changed. Here we will provide a new style for this widget. You can edit it easily by yourself if you have basic information in HTML, CSS and JAVA.
Popular Posts Style 1 - Live Demo
Step 1: the CSS code
Copy the following css code and paste it before </head> tag
<style type='text/css'>
.popular-posts ul {
list-style: none;
padding: 0;
}
.popular-posts ul li {
float: left;
width: 150px;
height: 150px;
padding: 10px !important;
overflow: hidden;
box-sizing: border-box;
position: relative;
}
.popular-posts .item-thumbnail {
margin: 0;
background-color: #000;
}
.popular-posts img {
height: 100%;
width: 100%;
box-sizing: border-box;
padding:0;
-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;
}
.popular-posts .item-content:hover img,
.popular-posts .item-thumbnail-only:hover img {
-webkit-transform: scale(1.2);
-moz-transform: scale(1.2);
-ms-transform: scale(1.2);
-o-transform: scale(1.2);
transform: scale(1.2);
opacity: 0.5;
}
.popular-posts .item-title a {
color: #fff;
position: absolute;
text-align: center;
left: 12px;
right: 12px;
bottom: 40px;
opacity: 0;
visibility: hidden;
-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;
}
.popular-posts .item-content:hover .item-title a,
.popular-posts .item-thumbnail-only:hover .item-title a {
opacity: 1;
visibility: visible;
}
.popular-posts .item-snippet {
display: none;
}
</style>
Step 2: the Java code
Copy the following java code and paste it before </body> tag
<script src='//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js'></script>
<script type='text/javascript'>
$('.popular-posts .item-snippet').remove();
$('.popular-posts img').attr('src', function(e, t) {
return t.replace('/s72-c/', '/s200-c/')
});
</script>
Popular Posts Style 2 - Live Demo
Step 1: the CSS code
Copy the following css code and paste it before </head> tag
<style type='text/css'>
.popular-posts ul {
list-style: none;
padding: 0;
}
.popular-posts ul li {
width: 100%;
height: 100%;
padding: 10px !important;
overflow: hidden;
box-sizing: border-box;
position: relative;
}
.popular-posts .item-thumbnail {
margin: 0;
background-color: #000;
overflow: hidden;
}
.popular-posts img {
height: 100%;
width: 100%;
box-sizing: border-box;
padding:0;
-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;
}
.popular-posts .item-content:hover img,
.popular-posts .item-thumbnail-only:hover img {
-webkit-transform: scale(1.2);
-moz-transform: scale(1.2);
-ms-transform: scale(1.2);
-o-transform: scale(1.2);
transform: scale(1.2);
opacity: 0.5;
}
.popular-posts .item-title {
padding: 10px 0px;
display: inline-block;
}
</style>
Step 2: the Java code
Copy the following java code and paste it before </body> tag
<script src='//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js'></script>
<script type='text/javascript'>
$('.popular-posts img').attr('src', function(e, t) {
return t.replace('/s72-c/', '/s350-c/')
});
$('.popular-posts ul li .item-snippet').each(function(){
var txt=$(this).text().substr(0,60);
var j=txt.lastIndexOf(' ');
if(j>10)
$(this).text(txt.substr(0,j).replace(/[?,!\.-:;]*$/,' ...'));
});
</script>
