Ponerle fondo a enlace comentarios

Una de las cosas muy importante en un blog, es que nuestras visitas encontren donde comentar. Podemos resaltar cambiando el diseño del enlace a comentarios.

Enlace a comentarios con imagen en la parte superior del post

[1] Iremos en nuestro panel a la pestaña de "Edición HTML" y tendremos que marcar la casilla de expandir las plantillas de artilugios.

[2] Localizamos ahora el código que corresponde a nuestro enlace de comentarios:

<span class='post-comment-link'>

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:post.allowComments'>
<a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><b:if cond='data:post.numComments == 1'>1 <data:top.commentLabel/><b:else/><data:post.numComments/> <data:top.commentLabelPlural/></b:if></a>

</b:if>
</b:if>
</span>

Una vez localizado el código tendríamos que transportar el código de donde está a donde vamos a mostrar los comentarios dentro de la imagen, es decir, copiarlo, guardarlo en el blog de notas por ejemplo, y eliminar el original.

[3] Localizamos ahora la parte del código de la plantilla donde vamos a pegar el código anterior. Podríamos colocarlo en distintos sitios dependiendo de donde queremos mostrarlo, por ejemplo justo después de esta línea estaría bien:

<b><b:includable id="post" var="post"></b:includable></b>

[4] Modificaremos lo necesario en ese código para eliminar el texto del enlace y mantener únicamente el número de comentarios ya quedará mucho mejor para mostrarlo dentro de una imagen.

Hay que suprimir las etiquetas </data:top.commentlabel><y "<data:top.commentlabelplural>"

Colocamos entonces una líneas en el CSS, siempre antes de ]]>, para añadir los atributos del enlace y conseguir así el formato que queremos (imagen de fondo, fuente, dimensiones, márgenes, bordes, etc.):

.comment-link {
font-size: 150%;
background: url(http://img368.imageshack.us/img368/2623/comentabe7.png) no-repeat top right;
height: 50px;
width: 53px;
text-align: center;
float: right;
margin: 5px 0 0 0;
padding:5px 2px 0 5px;
}

Fuente : El escaparate de Rosa