Stylish Popular Post Widget With Round Thumbnail For Your Blogger

Views:

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/AVvXsEjkTSVwfbcOdABb_DwuMFQbwzOYgBwI6ohb5rzgp4SFQWmkvPysrKLLlCO9p73FFssbw4Ehe021uVZJ1zq6tPN4mxNv_CPt7xUlVeU55flxYb6KSR1jXyGJGsHf-oxgZ_pbzvlr4cqp2YQ/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);
}