Stylish Popular Posts Widget for blogger blog

 Stylish Popular Posts Widget for blogger blog

The Stylish Popular Post Widget For Blogger as one of the best blogger widgets all bloggers should have, shows a list of posts that have the highest page views on your blog. To be displayed on this stylish popular post widget can be the most popular posts within 7days, a month or of all time. In order to promote your blog and improve its design, it would be useful for you to use this Stylish Popular Post Widget in your blogger blog. Follow the steps listed below to add this blogger widget in your blog.

Step one

•     From you blogger dashboard
•     Goto 'Layout'.
•      Click on 'Add gadget'.
•     Select 'Popular Posts'.

• Tick the options for 'Snippet' and 'Image Thumbnail' before you save the blogger widget.

Step 2

You'll be Adding the CSS code in your blogger template. If you already have a popular post CSS code in your template, ensure you remove it before trying this out.

•     Goto your blogger template, back it up first.
•     Click on 'edit html',
•     Use ctrl+F keys to search for ]]></b:skin>
•     Copy this code below and paste  'above'  ]]></b:skin> 

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

Save the template. View your blog and you'll see the Stylish Popular Post Widget in your blog.