Popular Posts v2 Widget

by dafin defandaky

HTML

<div class="widget PopularPosts" id="PopularPosts1">
<h2>Popular Post</h2>
<div class="widget-content popular-posts">
<ul>
<li>
<a href="http://defandaky.blogspot.com/2013/07/membuat-halaman-error-404-di-blogger_1936.html">Membuat halaman error 404 di blogger</a>
</li>
<li>
<a href="http://defandaky.blogspot.com/2013/08/cara-membuat-menu-vertikal-accordion.html">Menu vertikal accordion dengan CSS3</a>
</li>
<li>
<a href="http://defandaky.blogspot.com/2014/04/kerangka-template-ala-dafin-blogger.html">Kerangka template ala Dafin Blogger</a>
</li>
<li>
<a href="http://defandaky.blogspot.com/2014/04/memasang-widget-amoung-tanpa-javascript.html">widget amoung tanpa javascript</a>
</li>
<li>
<a href="http://defandaky.blogspot.com/2014/12/template-responsive-mazda-db-v2.html">Template responsive Mazda DB V.2</a>
</li>
</ul>
<div class="clear"></div>
</div>
</div>

CSS

.popular-posts ul li a {
    background: none repeat scroll 0 0 #387;
    color: #fff;
    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 #389;
    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 #388;
}
.popular-posts ul li a:hover:after {
    border-left-color: #389;
    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"}