Make Stylish to your Popular Post Widget of Blogger

Popular Post

How to customize popular post widget in blogger.

Follow the Below Steps........

1) Add "Popular Post Widget" From:

" Layout >> Add Gadget >> Popular Post " and "save" it

2) Than find the below code ( press ctrl+f for search box )

]]></b:skin>

4) Last Paste the "Code" from "Code 1, Code 2, Code 3,Code 4 or Code 5 " above

]]></b:skin>

1. Grid Layout For the Popular Posts Widget













"Code 1"

.PopularPosts .item-title { display:none; } .PopularPosts .widget-content ul li {
background: none repeat scroll 0 0 transparent; float: right; list-style: none outside none; margin: 10px 0 0 !important; padding: 0 !important; } .PopularPosts .item-thumbnail { margin: 0 8px !important; } #PopularPosts1 img:hover{-moz-transform: scale(1.2) rotate(-350deg);-webkit-transform: scale(1.2) rotate(-350deg);-o-transform: scale(1.2) rotate(-350deg);-ms-transform: scale(1.2) rotate(-350deg);transform: scale(1.2) rotate(-350deg);-webkit-box-shadow: 0 0 0px rgba(255,0,0,.4), inset 0 0 0px rgba(255,255,255,1);-moz-box-shadow: 0 0 0px rgba(255,0,0,.4), inset 0 0 0px rgba(255,255,255,1);box-shadow: 0 0 0px rgba(255,0,0,.4), inset 0 0 0px rgba(255,255,255,1);} .item-thumbnail img { -moz-border-radius: 8px; -webkit-border-radius: 8px; border-radius: 8px; -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; transition: all 0.5s ease; border: 3px solid #ccc; height: 60px; padding: 3px; width: 60px; }

2. Colorful popular posts

With the help of below CSS code you can add a colorful in this widget. For every post separate color with image css3 and we can up to eight colors.

"Code 2"

#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:first-child{background:#ff4c54;width:97%}#PopularPosts1 ul li:first-child:after{content:"1"}#PopularPosts1 ul li:first-child + li{background:#ff764c;width:87%}#PopularPosts1 ul li:first-child + li:after{content:"2"}#PopularPosts1 ul li:first-child + li + li{background:#ffde4c;width:84%}#PopularPosts1 ul li:first-child + li + li:after{content:"3"}#PopularPosts1 ul li:first-child + li + li + li{background:#c7f25f;width:81%}#PopularPosts1 ul li:first-child + li + li + li:after{content:"4"}#PopularPosts1 ul li:first-child + li + li + li + li{background:#33c9f7;width:78%}#PopularPosts1 ul li:first-child + li + li + li + li:after{content:"5"}#PopularPosts1 ul li:first-child + li + li + li + li +li{background:#7ee3c7;width:75%}#PopularPosts1 ul li:first-child + li + li + li + li + li:after{content:"6"}#PopularPosts1 ul li:first-child + li + li + li + li + li +li{background:#f6993d;width:72%}#PopularPosts1 ul li:first-child + li + li + li + li + li + li:after{content:"7"}#PopularPosts1 ul li:first-child + li + li + li + li + li + li +li{background:#f59095;width:69%}#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li:after{content:"8"}#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li +li{background:#c7f25f;width:66%}#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li:after{content:"9"}#PopularPosts1 ul li:first-child:after,#PopularPosts1 ul li:first-child + li:after,#PopularPosts1 ul li:first-child + li + li:after,#PopularPosts1 ul li:first-child + li + li + li:after,#PopularPosts1 ul li:first-child + li + li + li + li:after,#PopularPosts1 ul li:first-child + li + li + li + li + li:after,#PopularPosts1 ul li:first-child + li + li + li + li + li + li:after,#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li:after,#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li:after{position:absolute;top:20px;right:-15px;border-radius:50%;background:#353535;width:30px;height:30px;text-align:center;font-size:28px;color:#fff}#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) ;}

3. Round Corners Popular Post Widget

"Code 3"

.popular-posts ul{padding-left:0px;}
.popular-posts ul li {background: #FFF url() no-repeat scroll 5px 10px;
list-style-type: none;padding:5px 5px 5px 20px !important;
border: 1px solid #ddd;border-radius:30px;
-moz-border-radius:30px;
-webkit-border-radius:30px;
-moz-border-radius: 30px;
-webkit-border-radius: 30px;
height: 40px;
-moz-box-shadow: 3px 2px 5px #242424;
-webkit-box-shadow: 3px 2px 5px #242424;
box-shadow: 3px 2px 5px #242424;margin-bottom: 5px;height: 40px;
}
.popular-posts ul li a {
font-style: italic;
}
.popular-posts ul li:hover {
border:1px solid #d10202;
-moz-box-shadow: 3px 2px 5px #d10202;
-webkit-box-shadow: 3px 2px 5px #d10202;
box-shadow: 3px 2px 5px #d10202;
}
.popular-posts ul
li a:hover {
text-decoration:none;
}
.popular-posts .item-thumbnail img {
height:40px;width:40px;
webkit-border-radius: 100px;-moz-border-radius: 100px;border-radius: 100px;
-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, .4);-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, .4);box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
}
.popular-posts .item-thumbnail img:hover{
-moz-box-shadow: 0px 0px 5px #d10202;
-webkit-box-shadow: 0px 0px 5px #d10202;
box-shadow: 0px 0px 5px #d10202;}

4. Round image popular posts.

If you want to make its images round, then add below code. Which will help you to create round images with hover effect.

"Code 4"

.popular-posts ul{padding-left:0px;}.popular-posts ul li {background: #FFF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhXtkxoleeJ-3XgZHWm99aLz4sAvwmTWJ6a1QpeKA7531ysYIiRrCvgEHWz22kG2wszrEEnr2KisbNPhVDDoyI1lgDQ2xHG_Aj6H0izZzFFakEVYt5XKPmV4X7KGfHq6CWyYSYTr5ZTtCE/s1600/1.gif) no-repeat scroll 5px 10px; list-style-type: none; margin:0 0 5px 0px; padding:5px 5px 5px 20px !important; border: 1px solid #ddd; border-radius:10px; -moz-border-radius:10px; -webkit-border-radius:10px;}.popular-posts ul li:hover { border:1px solid #6BB5FF;}.popular-posts ul li a:hover { text-decoration:none;}.popular-posts .item-thumbnail img { webkit-border-radius: 100px; -moz-border-radius: 100px; border-radius: 100px; -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, .4); -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, .4); box-shadow: 0 1px 3px rgba(0, 0, 0, .4);}

5.Numbered the popular posts.

Below code will help to add auto numbered in this widget posts and also add a css hovering effect.

"Code 5"

#PopularPosts1 h2{padding:7px 0 3px 0;width:100%;margin-bottom:10px;font-size:1.3em;text-indent:-12px;font-size:18px;text-align:center;color: #757575; /* Color of the widget's title */}#PopularPosts1 ul{list-style:none;counter-reset:li;padding:8px 0px 1px;left:-7px;width:290px;}#PopularPosts1 li{position:relative;margin:0 0 10px 0;padding: 3px 2px 0 17px;left:-5px;width:285px;}#PopularPosts1 ul li{background: #eee;position: relative;display: block;padding: .4em .2em .4em 2em;*padding: .2em;margin: .5em 0;background: #ddd;text-decoration: none;border-radius: .3em;transition: all .3s ease-out; }#PopularPosts1 ul li:before{content: counter(li);counter-increment: li;position: absolute; top: 50%;margin: -1.3em;height: 2em;width: 2em;line-height: 2em;font-size: 15px;color: #fff; /* text color of numbers */background: #FB8835; /* background color of numbers */border: .2em solid #fff; /* border color */-webkit-box-shadow: 0 8px 5px -7px #888;-moz-box-shadow: 0 8px 5px -7px #888;box-shadow: 0 8px 5px -7px #888;text-align: center;font-weight: bold;border-radius: 2em;position: absolute; left: 0;transition: all .3s ease-out;}#PopularPosts1 ul li:hover{background: #eee;}#PopularPosts1 ul li:hover:before{transform: rotate(360deg); }#PopularPosts1 ul li a{font: 14px Georgia, serif; /* font size of post titles */text-shadow: 0 -1px 2px #fff;color: #444;display:block;min-height:25px;text-decoration:none;text-transform: uppercase;}#PopularPosts1 ul li a:hover{color: #444;}

5. Enjoy it and post your reviews.......

Talha Webz