Super Popular Posts v2 Widget customization | All Techbook

Hi Guys...Previously I have posted a tutorial showing how you can add Popular Posts Widget with Hover Effect for Blogger. Today I am going to show how you can add a different style of Popular Posts widget for your blogger blog. This too has Hover effect in it like the previous one. Currently images and snippets are not supported in this widget and will make your widget look ugly so it is highly recommended to keep Thumbnails and Snippet of your off.

Well when it comes to demo, you can see the widget live on our blog. The widget demo can be seen on the right sidebar of our blog.



Now when it comes for adding this widget to your blog, just follow the below steps

Step 1 : Adding the Popular Posts Widget

Go to Blog Title → Layout → Add a Gadget → Popular Posts. Be sure that you have unchecked image thumbnail and snippet box.
 After adding the widget Save the Template.

Step 2 : Adding the CSS

Firstly go to Blog Title → Template → Edit HTML. Expand <b:skin>...</b:skin> if it is not expanded. Press Ctrl + F.  Type ]]></b:skin> in search box and press enter key. [As per the new HTML editor]
Add the below given code just above ]]></b:skin>
________________________________________________________________
/* Popular Post Customization by AllBloggerTricks.com */
.popular-posts ul li a {
    background: none repeat scroll 0 0 #DDDDDD;
    color: #444444;
    display: block;
    margin: 0 0 0.5em;
    padding: 0.4em;
    position: relative;
    text-decoration: none;
    transition: all 0.3s ease-out 0s;
}
.popular-posts ul li a:before {
    background: none repeat scroll 0 0 #CCCCCC;
    font-weight: 700;
    height: 2em;
    left: -2.5em;
    line-height: 2em;
    margin-top: -1em;
    position: absolute;
    text-align: center;
    top: 50%;
    width: 2em;
}
.popular-posts ul li a:after {
    border: 0.5em solid transparent;
    content: "";
    left: -1em;
    margin-top: -0.5em;
    position: absolute;
    top: 50%;
    transition: all 0.3s ease-out 0s;
}
.popular-posts ul li a:hover {
    background: none repeat scroll 0 0 #CCCCCC;
}
.popular-posts ul li a:hover:after {
    border-left-color: #CCCCCC;
    left: -0.5em;
}
.popular-posts ul li:first-child + li + li + li + li + li + li + li + li + li a:before{content:"10"}
.popular-posts ul li:first-child + li + li + li + li + li + li + li + li a:before{content:"9"}
.popular-posts ul li:first-child + li + li + li + li + li + li + li a:before{content:"8"}
.popular-posts ul li:first-child + li + li + li + li + li + li a:before{content:"7"}
.popular-posts ul li:first-child + li + li + li + li + li a:before{content:"6"}
.popular-posts ul li:first-child + li + li + li + li a:before{content:"5"}
.popular-posts ul li:first-child + li + li + li a:before{content:"4"}
.popular-posts ul li:first-child + li + li a:before{content:"3"}
.popular-posts ul li:first-child + li a:before{content:"2"}
.popular-posts ul li:first-child a:before{content:"1"}
/* Popular Post Customization by AllBloggerTricks.com */
_____________________________________________________________
After adding the code save your template. Your are done now. Now you and your visitors can see this cool Popular Post widget on your blog.