CSS3 Popular Posts Widget with fill color and hover effect

Hi guys every blogger knows how important is popular post. Because it indicate that which posts are most popular in a blog. Generally when readers like a post they frequently visit that post and Blogger Popular post widget pick that post by the generating importance. In blogger default popular post with we cannot change but by using CSS3 we can easily manipulate the default widget. Similarly I have used CSS code for manipulating this popular post widget. Earlier I have released various popular post widget. But this popular post is little different with fill color and hover effect. Those who wants to keep improve blog loading speed they can use it. Because this popular posts widget display only Popular posts links with fill color as well as hover effect. You can change the color if you like.  using too much image blog loading time may increase. So using this widget would be wise decision. I hope you and your blog visitors would like it. So please follow the tutorial to install this popular widget into 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: Uncheck image Thumbnail and snippet. Because we will display only popular Post's links so we don't need that bulky image and unnecessary intro text.

Step 4 Now Save the  "Popular Posts" Gadget.

Step 5 Now click on Edit HTML-> Unfold code  ►

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

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

/*CSS Popular Posts by http://www.bloggerspice.com*/
#PopularPosts1{
border: 0px solid #000000; /*Main Border Color */
margin: 0;
}
#PopularPosts1 ul{
margin: 0;
padding: 0;
list-style-type: none;
font: normal 90% 'Trebuchet MS', 'Lucida Grande', Arial, sans-serif;
}
#PopularPosts1 a{
display: block;
margin: 0;
padding: 3px 5px 3px 5px;
text-decoration: none;
color: #ffffff;
background-color: #005C91;
width:300px;
border-bottom: 1px solid #90bade;
border-left: 5px solid #1958b7;
border-right: 5px solid #1958b7;
list-style-type:none;
}
#PopularPosts1 a:hover {
background-color: #04BDFA;
border-left-color: #1c64d1; /*Left border color On Hover*/
border-right-color: #1c64d1; /*Right border color On Hover*/
}

Step 8 Now simply save your template.

Customization

• Change #005C91 for Popular Post widget background color
• Change 300px for width of the widget
• Change #04BDFA for Popular Post widget hover color
• Change #1c64d1for left and right border color

If you need any further help then feel free to contact with me. I will help you to solve the issue. Happy blogging!!!