Personalizar entradas populares de blogger solo CSS

Las entradas populares suelen usarse mucho sobre todo en esos sitios con muchas publicaciones, el gadget que blogger ofrece a veces no cumple las expectativas que uno espera, lo que vamos hacer es tratar de personalizarlo un poco para darle un toque más sencillo pero con algo de vistosidad, las entradas quedarán enumeradas como se puede ver en esta imagen, para aplicar los cambios iremos a diseño en caso de no tenerlo y agregar el gadget de entradas populares pero lo configuramos solo con el título sin extracto de texto y sin imagen ya que lo que buscamos es que quede sencillo y resumido solo con títulos.

Una vez guardado nuestro gadget nos vamos a la plantilla y pegamos antes de ]]></b:skin> el siguiente código:

/* Entradas populares personalizado, Lápiz y café */
.popular-posts ul li a {
background: none repeat scroll 0 0 #0f78e3;
color: #ffffff;
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 #0f78e3;
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 #3c4049;
}
.popular-posts ul li a:hover:after {
border-left-color: #3c4049;
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"}

Damos guardar y listo, nos queda el gadget con un toque de diferencia.