Sunday, 8 September 2013

Popular Posts v2 Widget customization

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.

<<<<<****************************************************************>>>>>

We hope you have Enjoyed this Widget & find it useful for you. If you have any Problem or Issue with this Widget, Please do visit the Official page of this Widget here and directly ask the developer of this Widget for the Solution by Commenting there.