Custom Popular Post Widget Counter

Custom Popular Post Widget Counter

This popular post widget will make your blog look nice we'd help vistors easily navigate you posts. 

Login to your blogger Dashboard>>click on Template>>>Edit Html.

On the blog Template click on it and click ctrl+f on windows and cmd+f on Mac

First step=Adding javascrip to before  </bod>  tag. 

Copy the code below, and paste it before the </body> tag in your template.

<script src='http://ift.tt/nkWzpa
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>

Note : Back up your blog template first. 

Customizing the thumbnail size. 

Simply change the highlited digit 150, to any number of your choice.

In this, our thumbnail size will be 150x150px. 

Step two adding the css style code. 

Simply chose any of your choice style code and paste it before the ]]></b:skin>

Style One 

/***** 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  Two 

/***** 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;

}

Now got to your blog Layout and change you popular post settings according to the Image Below.  

Tags: WMF
October 30, 2016 at 06:55PM
Open in Evernote