Número de comentarios en forma de burbuja


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:

.numComments {
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:
<span class='numComments'><a expr:href='data:post.url'><data:post.numComments/></a></span>
Si deseamos que nuestra página abra por la página de los comentarios en lugar del anterior código añadiremos:
<span class='numComments'><a expr:href='data:post.addCommentUrl'><data:post.numComments/></a></span>

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í.
Como veréis hay colores para todos los gustos y combinables con cualquier blog sea cual sea el color que tengamos, aún así Pizcos se ha ofrecido para crear globos de comentarios en otros colores, si este es tu caso no dudes en ponerte en contacto con él.



0 comentarios:

Publicar un comentario