seo Stylish Popular Post Widget With Round Thumbnail For Your Blogger 2013

on Sunday, March 10, 2013 | 0 Comment

Seo Master present to you:

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.www.matrixar.com --- */

.popular-posts ul{padding-left:0px;}
.popular-posts ul li {background: #FFF url(http://www.matrixar.com/-oOVUW06ghgo/UHwuqL9TltI/AAAAAAAAGKU/Nj4DQnvft8k/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);
}