Popular Posts v2 Widget customization

Posted On // 15 comments


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.

15 comments

Parallel Blog Author
5 May 2013 at 08:24

let me know about your design.

Reply
Vishal Shukla Author
18 May 2013 at 06:11

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

Reply
19 May 2013 at 06:44

@Vishal its a custom template not available for download

Reply
Tech singh Author
29 June 2013 at 13:20

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

Reply
29 June 2013 at 20:39

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

Reply
nextandy™ Author
29 July 2013 at 04:45

i get this

Reply
Ravi Raj Author
29 October 2013 at 03:06

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

Reply
1 December 2013 at 01:19

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)

Reply
Lacey Musson Author
24 January 2014 at 17:52

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

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

Reply
Umer Prince Author
7 March 2014 at 20:02

Not working on www.allblogthings.com :(

Reply
26 March 2014 at 22:46

Not working mate

Reply
1 June 2014 at 13:09

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

Reply
26 September 2014 at 06:55

Good Widget Bro... :)

Reply
santanu achar Author
16 August 2015 at 07:55
19 August 2015 at 12:00

working very well

Reply

Post a Comment

Please do not spam here. All comments will be moderated.
Don't You Think this Awesome Post should be shared ??
| Popular Posts v2 Widget customization |