Awesome Multi Colored Popular Posts Widget For Blogger

Blogger Popular widget is an awesome widget for your Blogger Blog. Most important feature of this widget is it lets your Blog visitors to surf more blog posts in your blog. Its let your users to spend more time in your Blog. Surely it increases your Blog’s internal links that lets your blog higher traffic.

This Blogger Popular Posts widget will attract your readers to click on this widget that will increase your page views and keep your readers engage with your awesome content. So now use Blogger Popular to show your posts in coloured style. Check out the live DEMO and give it a try.

Features:

1.) No JavaScript Added.
2.) No JQuery File Added.
3.) Stylish CSS Added.
4.) Simple And Fast Loading Code.
5.) Can Work With Any Browser.
6.) Work With Any Blogger Domain.
7.) Can See The Post Title and Post Thumbnails.
8.) Plain In Design.
9.) Fully Customizable With Your Design.
10.) Can Control Everything.

How To Add In Blogspot?

1.) Go To Your www.blogger.com
2.) Open Your Desire “Blog”.
3.) Go To “Layout”.
4.) Click “Add A Gadget” Where You Want To Add It.
5.) Now Scroll To “HTML-JAVASCRIPT”
6.) Click “+” Icon To Add It.
7.) Now “Copy” The Below Code And “Paste” It To There.
8.) Leave The “Title” Empty.
9.) Click “Save”, Now You Are Done.

CSS:

<style type="text/css">
#PopularPosts1 ul{margin:0;padding:5px 0;list-style-type:none}
#PopularPosts1 ul li{position:relative;margin:5px 0;border:0;padding:10px}
#PopularPosts1 ul li:nth-child(1) {
background: none repeat scroll 0 0 #FF4C54;
width: 97%;
}
#PopularPosts1 ul li:nth-child(1):after {
content: "1";
}
#PopularPosts1 ul li:nth-child(2) {
background: none repeat scroll 0 0 #FF764C;
width: 94%;
}
#PopularPosts1 ul li:nth-child(2):after {
content: "2";
}
#PopularPosts1 ul li:nth-child(3) {
background: none repeat scroll 0 0 #FFDE4C;
width: 91%;
}
#PopularPosts1 ul li:nth-child(3):after {
content: "3";
}
#PopularPosts1 ul li:nth-child(4) {
background: none repeat scroll 0 0 #C7F25F;
width: 88%;
}
#PopularPosts1 ul li:nth-child(4):after {
content: "4";
}
#PopularPosts1 ul li:nth-child(5) {
background: none repeat scroll 0 0 #33C9F7;
width: 85%;
}
#PopularPosts1 ul li:nth-child(5):after {
content: "5";
}
#PopularPosts1 ul li:nth-child(6) {
background: none repeat scroll 0 0 #7EE3C7;
width: 82%;
}
#PopularPosts1 ul li:nth-child(6):after {
content: "6";
}
#PopularPosts1 ul li:nth-child(7) {
background: none repeat scroll 0 0 #F6993D;
width: 79%;
}
#PopularPosts1 ul li:nth-child(7):after {
content: "7";
}
#PopularPosts1 ul li:nth-child(8) {
background: none repeat scroll 0 0 #F59095;
width: 76%;
}
#PopularPosts1 ul li:nth-child(8):after {
content: "8";
}
#PopularPosts1 ul li:nth-child(9) {
background: none repeat scroll 0 0 #e0c9ff;
width: 73%;
}
#PopularPosts1 ul li:nth-child(9):after {
content: "9";
}
#PopularPosts1 ul li:nth-child(10) {
background: none repeat scroll 0 0 #85ecf7;
width: 70%;
}
#PopularPosts1 ul li:nth-child(10):after {
content: "10";
}
#PopularPosts1 ul li:nth-child(1):after, #PopularPosts1 ul li:nth-child(2):after, #PopularPosts1 ul li:nth-child(3):after, #PopularPosts1 ul li:nth-child(4):after, #PopularPosts1 ul li:nth-child(5):after, #PopularPosts1 ul li:nth-child(6):after, #PopularPosts1 ul li:nth-child(7):after, #PopularPosts1 ul li:nth-child(8):after, #PopularPosts1 ul li:nth-child(9):after, #PopularPosts1 ul li:nth-child(10):after {
background: none repeat scroll 0 0 #353535;
border-radius: 50% 50% 50% 50%;
color: #FFFFFF;
font-size: 25px;
height: 30px;
position: absolute;
right: -17px;
text-align: center;
top: 1px;
width: 30px;
}
#PopularPosts1 ul li .item-thumbnail{float:left;border:0;margin-right:10px;background:transparent;padding:0;width:70px;height:70px;}
#PopularPosts1 ul li a{font-size:13px;color:#444;text-decoration:none}
#PopularPosts1 ul li a:hover{color:#222;text-decoration:none}
#PopularPosts1 img{
-moz-border-radius: 130px;
-webkit-border-radius: 130px;
border-radius: 130px;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
transition: all 0.3s ease;
padding:4px;
border:1px solid #fff !important;
}
#PopularPosts1 img:hover {
border-radius: 0 0 0 0;
-moz-transform: scale(1.2) rotate(-711deg) ;
-webkit-transform: scale(1.2) rotate(-711deg) ;
-o-transform: scale(1.2) rotate(-711deg) ;
-ms-transform: scale(1.2) rotate(-711deg) ;
transform: scale(1.2) rotate(-711deg) ;
}
</style>

Customization:

Nothing to change here by default. Edit your CSS if you are a pro and want more customization.

Last Words:

That’s all we have. If you have any problem with this code in your blogger template then feel free to contact us with full explanation of your problem. We will reply you as time allow to us. Don’t forget to share this with your friends so they can also take benefit from it and leave your precious feedback in our comment form below. Happy blogging, See you in next article…