Customize Popular Posts Widget In Blogger | Style #1

Popular posts widget is one of the most widely used blogger widget. The widget helps to showcase the most viewed posts on a blog. Yes, showcasing the most important posts is an important thing as far as blog is concerned. It helps the visitors to find out the best posts on a blog. Unfortunately the default style of the  popular posts widget is something pity. Anyway don't get worried, blogger allows us to customize the default popular post widget. Customizing it is quite simple and can be done by adding some CSS code to the template.

Here i have a superb style to share with you guys. Actually the code i have here is based on the code that i have found at Front-end development, which i have edited to make it suitable for the blogger popular posts widget.

Screen Shot:

 

Adding Popular Posts Widget To Your Blogger Blog:

To get the most, you have to add the the popular posts widget as seen below...

Go to your blogger dashboard, move on to layout and click the "Add a Gadget" button. Within the list find out popular posts widget and select it. Now on the popup widow, make the selection as shown below.

After making the selection as seen above, click the orange save button. Now lets move on to the CSS part.

Customize Popular Posts Widget In Blogger

Switch to template menu, click the 'Edit HTML' button. Now using 'Ctrl+ F' Search for ]]></b:skin> and copy-paste the below code above it.

.popular-posts ul li a{
    padding: .4em .4em .4em .8em;
    position: relative;
    transition: all .3s ease-out;   
    display: block;
    margin: 0em 0 .5em 0em;
    color: #444;
    *padding: .4em;
    text-decoration: none;
    background: #ddd;
}

.popular-posts ul li a:before{   
    top: 50%;
    margin-top: -1em;
    left: -2.5em;
    font-weight: bold;
    background: #fa8072;
    height: 2em;
    line-height: 2em;
    width: 2em;
    position: absolute;
    text-align: center;
   
}

.popular-posts ul li a:after{
    border: .5em solid transparent;
    position: absolute;
    top: 50%;
    content: '';
    left: -1em;
    transition: all .3s ease-out;
    margin-top: -.5em;               
}

.popular-posts ul li a:hover{
    background: #eee;
}
   
.popular-posts ul li a:hover:after{
    border-left-color: #fa8072;
    left: -.5em;
                   
}
.popular-posts ul li {
    margin-left: 2.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"}

After adding the codes as it is, press the orange 'Save template' button.

Coustomization

• To change the background colour of the numberings, replace #fa8072.
• To change the back ground colour of the links, replace #ddd.
• To change the colour on hover, replace #eee.

Don't worry about the loading speed as the customization is purely based on CSS & NO JavaScript is used. If you have faced any errors wile installation, share it through the comment box below.