Just Another Stunning Popular Posts Widget With Hover Effect

Popular Posts widget will make your blog more attractive and this is a way to highlighting your most viewed or popular posts. So a visitors can easily get info about Popular Posts. So continuously I am working on to make some new and spicy. I have just designed another popular posts widget that is best fit for those website those are using 600+ wide images for the posts. On the other hand our integrated popular post can able to show only 75px X 75px wide images which is not suitable for wide images. However this  popular posts widget can show widescreen widget with Posts summary as well as I have added hover effects on this widget . This widget has not any limitations. You can display up to 10 popular posts in your blog.

Step 1 Log in to your Blogger account and Go to your Blogger Dashboard

Step 2 Go to your Layout tab.

Step 3 Click on "Add a Gadget" then select "Popular Posts" Widget.

Note

• Put Tick on image Thumbnail and snippet. Because we will display popular Post's image with summary. 
• You can display between 1 to 10 posts. So choose 7 posts or more.

Step 4 Now Save the  "Popular Posts" Gadget.

Step 5 Click on -> Template -> Edit HTML

Step 6 Now Find this code ]]></b:skin>  by pressing  Ctrl + F

Step 7 Paste the below code  Before/above ]]></b:skin> 

/*-- Stunning Popular Post By http://www.bloggerspice.com--*/
.PopularPosts .item-title {
display:none;
}
.PopularPosts .widget-content ul li {
background:#FEFEFE;
border:1px solid #009999;
border-radius:10px;
float: left;
color:#999;
list-style: none outside none;
margin: 5px 0 0!important;
padding: 5px !important;
}
.PopularPosts .item-thumbnail {
margin: 3px !important;
}
.item-thumbnail img {
background:#111111;
border: 1px solid #191919;
height: 75px;
padding: 5px;
width: 250px;
border-radius:10px;
}
.item-thumbnail img:hover {
border:0px solid #009999;
}

Step 8 Now Save the widget.