Numero de comentarios arriba de la entrada

Tweet

Muchas veces vuestras preguntas me sirven para realizar la entrada, hoy Flamenquin me preguntaba como podía poner en el titulo de las entradas el número de comentarios con una imagen de fondo.

Con un poco de CSS y conociendo que el código que nos da ese número es <data:post.numComments/>, no ha resultado muy complicado implementarlo.

Editamos nuestra plantilla y antes de ]]></b:skin>, pegamos

.numComments {
background: url(URL ALOJAMIENTO 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;
text-decoration:none;
}
.numComments a:hover{
color: #CODIGO HEXADECIMAL;
}

Vemos que podéis seleccionar

.numComments {
background: url(URL ALOJAMIENTO IMAGEN/numcomments.png) 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.
}

Ahora guardamos, expandimos artilugios, buscamos <b:if cond='data:post.title'> y a continuación pegamos

<span class='numComments'><a expr:href='data:post.addCommentUrl'><data:post.numComments/></a></span>

Para abrir directamente la entrada en vez de la página de comentarios solo debéis cambiar data:post.addCommentUrl por data:post.url

Aquí os dejo unas burbujas de diferentes colores por si queréis usarlas.

Te recomendamos también

+ Artículos relacionados de Tutorial