Monday, November 2, 2015
Numbered Popular Post Widget For Blogger
Popular Post Gadget For Blogger
Try out thi snumbered popular post widget for blogger. Most blog you visit have a Popular Post widget, as it is one of the best blogger widget any blogger should have. By default, blogger's popular post widget appears in a decreasing order with the most read post at the top followed by the next most read post. You can follow these tips to customize yours, by using this numbered popular post widget for blogger to make the most read post appears as 1, the next as 2 and so on. This blogger widget helps in decreasing the bounce rate of your blog and at the same time increase your pageviews.Also Read: Square Popular Posts Blogger Widget With Rotating Effect
Sliding Recent Posts Gadget For Blogger
Link to This Post Widget For Blogger
How To Add Numbered Popular Post Widget On Blogger
- From your Blogger dashboard, goto 'Layout'.
- Depending on where you want the popular post gadget to appear, click on 'Add gadget'.
- From the popup options, select 'Popular Post'. Save the gadget.
- Next, Goto your blogger Template
- Click on 'Edit HTML'.
- Using Ctrl + F keys search for ]]></b:skin>
- Copy the CSS code below and paste just 'above' ]]></b:skin>
.popular-posts ul li a {
background: none repeat scroll 0 0 #222222;
color: #FFFFFF;
display: block;
margin: 10px 0;
padding: 25px 15px 30px;
position: relative;
text-decoration: none;
transition: all 0.3s ease-out 0s;
width: 85%;
}
.popular-posts ul li a:before {
background: none repeat scroll 0 0 #2DB3E9;
color: #FFFFFF;
font-weight: 700;
height: 2em;
line-height: 2em;
margin-left: 88%;
padding: 4px;
position: absolute;
text-align: center;
width: 2em;
transition: all 0.2s ease-in-out 0s;
-moz-transition: all 0.3s ease-in-out 0s;
}
.popular-posts ul li a:hover {
opacity: 0.8;
}
.popular-posts ul li a:hover:before {
border-left-color: #CCCCCC;
left: -1px;
-webkit-transition: all 0.2s ease-out;
-moz-transition: all 0.2s ease-out;
-ms-transition: all 0.2s ease-out;
-o-transition: all 0.2s ease-out;
}
.popular-posts ul li:first-child + li + li + li + li + li + li + li + li + li a:before {
content: "10";
}
.popular-posts ul li:first-child + li + li + li + li + li + li + li + li a:before {
content: "9";
}
.popular-posts ul li:first-child + li + li + li + li + li + li + li a:before {
content: "8";
}
.popular-posts ul li:first-child + li + li + li + li + li + li a:before {
content: "7";
}
.popular-posts ul li:first-child + li + li + li + li + li a:before {
content: "6";
}
.popular-posts ul li:first-child + li + li + li + li a:before {
content: "5";
}
.popular-posts ul li:first-child + li + li + li a:before {
content: "4";
}
.popular-posts ul li:first-child + li + li a:before {
content: "3";
}
.popular-posts ul li:first-child + li a:before {
content: "2";
}
.popular-posts ul li:first-child a:before {
content: "1";
}
.item-snippet {
display: none;
}
.PopularPosts .item-thumbnail {
display: none;
}
- Save your template, view your blog to see the Numbered Popular Post blogger Widget. .
