Lo vi, me llamó la atención y lo puse en práctica.
El efecto queda genial lo podéis ver en mi blog de pruebas, se trata de añadir una burbuja y en su interior el número de comentarios de cada entrada.
El artífice de este invento es nuestro querido amigo Pizcos, vamos a seguir sus explicaciones pero aún así recomiendo ver su blog porque seguro que más de uno quedara encantado con todo lo que nos enseña.
Como de costumbre ubicamos ]]></b:skin> y justo antes añadimos:
background: url(url-imagen) no-repeat top right;
float:right;
text-align: center;
padding: 10px 0 0 0;
font-size: 150%;
width: 50px;
height:50px;
color: #fff;
}
.numComments a:link{
color: #CODIGO HEXADECIMAL;
}
.numComments a:visited{
color: #CODIGO HEXADECIMAL;
}
.numComments a:hover{
color: #CODIGO HEXADECIMAL;
}
Guardamos los cambios y expandimos la plantilla de artilugios donde buscaremos:
<b:if cond='data:post.title'>
Justo después añadiremos:
Veamos lo que según Pizcos podemos modificar:
.numComments {
background: url(url-imagen) no-repeat top right; Aquí definimos la imagen y su posición.
float:right; Posición de todo el elemento.
text-align: center; Alineamos el texto.
padding: 10px 0 0 0; Posicionamos el numero.
font-size: 150%; Tamaño del número.
width: 50px; Ancho del conjunto, la imagen es de 50*50 pixeles.
height:50px; Alto del conjunto.
color: #fff; Color de la fuente.
.numComments a:link Color del número.
.numComments a:visited Color del link una vez visitado.
.numComments a:hover Color al pasar el mouse.
Colores hexadecimales.
Pizcos proporciona un zip conteniendo las imágenes que son las siguientes y también podéis guardar desde aquí.
0 comentarios:
Publicar un comentario