Sunday, March 10, 2013

Stylish Popular Post Widget With Round Thumbnail For Your Blogger

Friend,this post about how to customize your popular post widget more attractive with round thumnail. This widget is more beautiful than other. when mouse hover, it shows a thin solid blue border. It fully customized with CSS code. If you like this widget,and you can add it in your blogger. Just follow below instruction, and add it .

Now Go to Blogger Dashboard

Go to Layout option

Click on Add a Gadget

Add Popular Posts Widget from given list.

Select "display up to 5 posts" and check image thumbnail and snippet.

Now Save the widget

Then Go to Template Option.

Click on Edit HTML .

Find (CTRL+F) ]]></b:skin> tag.

Copy and paste below CSS code above ]]></b:skin> tag.

/*--- Customize Popular Posts Widget Design By www.masterhacksindia.blogspot.com --- */

.popular-posts ul{padding-left:0px;}
.popular-posts ul li {background: #FFF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiS5-UszBvb0yV1yV4HzKmutyEa1d8UHsMBHnorTf_RsIWm1kyN_2xIDshB0ZLy24DWpAggA6j4HqRv5ElUxYmwwQyq5wVmH5yuLXWOpO3zwDg6LKopgP7y7-ZNFGmulUIz3eiTGlYlCXA/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);
}