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.

14 comments:

  1. let me know about your design.

    ReplyDelete
  2. awsm widget ......... can you tell which template u r using nd ..it's links plzzz ..

    ReplyDelete
  3. @Vishal its a custom template not available for download

    ReplyDelete
  4. then how to remove if it doesnt like it
    thnks post is great

    ReplyDelete
    Replies
    1. To remove you and can remove Popular Posts widget from blog layout or just delete this added code.

      Delete
  5. sorry but i want same template as you and i will not remove footer

    ReplyDelete
  6. hey! Dhiraj
    can you please give the code for the widget that come on the last page showing the massage"Don't You Think this Awesome Post should be shared ??" Please....
    Regards
    Aditya (the bloggers who are interested in this request can support it)

    ReplyDelete
  7. Hello! Something weird popped up when I used this code... can you help me out please? (:

    http://www.mussonlovin.blogspot.com/

    ReplyDelete
  8. Not working on www.allblogthings.com :(

    ReplyDelete
  9. I have once used this widget on my blog before changing the template. It was cool

    ReplyDelete