Blogger dio salida al Widget de Entradas Populares en 2011, te ensenare una lista numerada usando CSS3 con una propiedad de autoincremento. Puedes darle estilo a los numeros en una variedad de formas, nosotros lo estilizamos en forma rectangular y circular .Vamos a anadir este efecto a tu blogger en simples pasos usando puro css sin necesidad de JavaScript.
El widget de Articulos Populares es una herramienta efectiva para aumentar las vistas y hacer que los lectores se interesen en los articulos de tu blog.
Anadir el Widget de Articulos Populares
- Entra a tu Blogger > Diseno
- Da Click "Anadir un Gadget"
- Seleccione "Entradas Populares" de la lista
- Necesitaras configurarlo como muestro en la imagen de abajo: no marques "imagenes miniaturas" y ni tampoco "fragmento" Es mejor mostrar maximo de 7-9 entradas. Menos es mejor y limpio.
. Save it
Personalizar El Widget De Entradas Popular
Ahora necesitas cambiar el estilo por defecto y cambiar su apariencia a nuestro gusto usando estilo personalizado.- Entra en Blogger > Plantilla
- Haga copia de tu plantilla
- Da Click Editar HTML
- Busca el siguiente codigo </b:skin>. Da Click en flecha negra para expandir codigo.
5. Pega el siguiente estilo arriba de </b:skin>
/*--- CB Entradas Populares --- */
.popular-posts ul {
padding-left: 0px;
counter-reset: popcount;
}
.popular-posts ul li:before {
list-style-type: none;
margin-right: 15px;
padding: 0.3em 0.6em;
counter-increment: popcount;
content: counter(popcount);
font-size: 16px;
background: #292D30;
color: #ffffff;
position: relative;
font-weight: bold;
font-family: georgia;
float: left;
border: 2px solid #dddddd;
box-shadow: 1px 2px 9px #666666; }
.popular-posts ul li {
border-bottom: 1px dashed #dddddd;
}
.popular-posts ul li:hover {
border-bottom: 1px dashed #696969;
}
.popular-posts ul li a {
text-decoration:none; color:#5A5F63;
}
.popular-posts ul li a:hover {
text-decoration:none;
}
Personalizar:
- Para cambiar el color de Fondo de la burbuja cuadrada edite #292D30
- Para cambaiar el color del texto de la burbuja edite #ffffff
- Por defecto la forma de la burbuja es cuadrada . Para cambiarla por Circulo simplemente anada el siguiente codigo despues de box-shadow: 1px 2px 9px #666666;
border-radius:15px;
6. Guarde la plantilla y listo
Visita tu blog para verlo funcionar perfectamente.
0 comentarios:
Publicar un comentario