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 the basic knowledge of HTML, CSS and JavaScript.
Popular Posts Style 1
Loading demo...
Step 1: The CSS code
Copy the following css code and paste it before </head> tag
<style>
/*<![CDATA[*/
.popular-posts ul {
list-style: none;
overflow: hidden;
margin: 0;
padding: 0;
}
.popular-posts ul li {
float: left;
width: 150px;
height: 150px;
padding: 10px !important;
overflow: hidden;
-webkit-box-sizing: border-box;
box-sizing: border-box;
position: relative;
}
.popular-posts .item-thumbnail {
margin: 0;
background-color: #000;
}
.popular-posts img {
height: 100%;
width: 100%;
-webkit-box-sizing: border-box;
box-sizing: border-box;
padding:0;
-webkit-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);
-ms-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;
-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 JavaScript code
Copy the following java code and paste it before </body> tag
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"/>
<script>
//<![CDATA[
(function ($) {
$(".popular-posts .item-snippet").remove();
$(".popular-posts img").attr("src", function(e, t) {
return t.replace(/\/((w72.*)|(s72.*)|(h72.*))\//, "/s200-c/");
});
})(jQuery);
//]]>
</script>
Popular Posts Style 2
Loading demo...
Step 1: The CSS code
Copy the following css code and paste it before </head> tag
<style>
/*<![CDATA[*/
.popular-posts ul {
list-style: none;
overflow: hidden;
margin: 0;
padding: 0;
}
.popular-posts ul li {
width: 100%;
height: 100%;
padding: 10px !important;
overflow: hidden;
-webkit-box-sizing: border-box;
box-sizing: border-box;
position: relative;
}
.popular-posts .item-thumbnail {
margin: 0;
background-color: #000;
overflow: hidden;
}
.popular-posts img {
height: 100%;
width: 100%;
-webkit-box-sizing: border-box;
box-sizing: border-box;
padding:0;
-webkit-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);
-ms-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 JavaScript code
Copy the following java code and paste it before </body> tag
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"/>
<script>
//<![CDATA[
(function ($) {
$(".popular-posts img").attr("src", function (e, t) {
return t.replace(/\/((w72.*)|(s72.*)|(h72.*))\//, "/s350-c/");
});
$(".popular-posts ul li .item-snippet").each(function () {
var
$this = $(this),
text = $this.text().substr(0, 60),
lastSpace = text.lastIndexOf(" ");
if (lastSpace > 10)
$this.text(text.substr(0, lastSpace).replace(/[?,!\.-:;]*$/, "..."));
});
})(jQuery);
//]]>
</script>
If you have any questions, let me know in the comments.