How to add Rounded Corners Popular Post Widget

Follow @tonufz

Popular post widget is an essential widget for a blog. Every visitors can to see which post are most view. This widget is very cool & stylish than other popular post widget. Post thumbnail shown as a circle. Every bloggers use popular post widget for visitors attraction because through it visitors can to know which post are most read. If you want to use this widget just follow this post.

• Log in your blog --> then click Templates --> Edit Html

• Then Search (ctrl+f) ]]></b:skin>

• Paste the bellowing code before/above ]]></b:skin>

/* http://tech-everyday.blogspot.com */
.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;}

• Then go to Layout --> Add A Gadget and select Popular Posts

 For without description so please unchecked snippet option. You can change post displaying number. Noe save & refresh your blog.

Do you like this post? Please link back to this article by copying one of the codes below.

URL: http://tech-everyday.blogspot.com/2013/07/popular-post.html HTML link code: <a href="http://tech-everyday.blogspot.com/2013/07/popular-post.html">How to add Rounded Corners Popular Post Widget</a> BB link code: [url=http://tech-everyday.blogspot.com/2013/07/popular-post.html]How to add Rounded Corners Popular Post Widget[/url]