PERSONALIZAR EL GADGET DE ENTRADAS POPULARES CON CSS

El gadget de entradas populares es una parte importante en los blogs ya que con el das a conocer a tus lectores lo más popular de tu blog, por eso es fundamental darle un toque único a este gadget y gracias a las bondades del CSS se pueden lograr resultados impresionantes. Con el truco de hoy el gadget quedara de la siguiente manera:

Si quieres que el resultado sea igual al de este blog debes tener el gadget de entradas populares con la opción de mostrar el fragmento.

Luego de eso accede a la Edición HTML de tu blog y justo antes de ]]></b:skin> debes agregar lo siguiente:

popular-posts ul{padding-left:0px;}
.popular-posts ul li {background: transparent
url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEitrcV2tbamCgoJ4DUFl4TS0vzMfgZj6hJdnq8ohrNEtBhXMWZAjHlmv_oB1oJhq1jRc6EzpqTrA4tTivH8Jnpv1VGUolKIsRNELAuObws5zWS5BtmZ5m3mfOcqH7ZNDcVZHIbvWMCvb_c/s400/261.gif) no-repeat scroll 5px 10px;
list-style-type: none;
margin:0 0 5px 0px;
padding:5px 5px 5px 20px !important;
border: 1px solid #ddd;
border-radius:10px;/* radio del borde */
-moz-border-radius:10px;/* radio del borde */
-webkit-border-radius:10px;/*  radio del borde  */
}
.popular-posts ul li:hover {
border:1px solid #2E9AFE;/* color de borde al pasar en cursor */
}
.popular-posts ul li a:hover {
text-decoration:none;
}

Ahora solo deberás guardar los cambios.

Espero que te haya gustado esta entrada Imprimir artículo