Enlace a comentarios en una imagen

El enlace que facilita la publicación de comentarios es uno de los elementos más importantes de nuestro blog , ya que nos posibilita el obtener un mayor número de comentarios.
Para los que no están habituados a los blogs se hace difícil localizar el sitio exacto donde deben pinchar para poder comentar, al menos en muchas de mis consultas se han quejado precisamente de esto bastante a menudo, así que vamos a destacar el enlace para comentar haciendo que se vea dentro de una imagen y situándolo en la parte de arriba de las entradas, mas o menos al lado del título.

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 != "item"'>

          <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:includable id='post' var='post'>

[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/>", con lo que el código quedará así:

<span class='post-comment-link'>
        <b:if cond='data:blog.pageType != "item"'>

          <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 <b:else/><data:post.numComments/> </b:if></a>
          </b:if>
        </b:if>
      </span>

[5] Colocamos entonces una líneas en el CSS, siempre antes de ]]></b:skin>, 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;
}

Conservar los dos enlaces, una arriba con imagen y el de siempre debajo de la entrada.

Una vez efectuados los cambios anteriores tendremos el número de comentarios dentro de una imagen y al lado del título de nuestras entradas, pero habremos prescindido del enlace de "comentarios" en el pie de cada entrada (post-footer).
Para conservar ambas opciones, en lugar de eliminar el código original en el paso [2] lo dejaremos donde está y tal como está, es decir, al código original no le eliminaremos las etiquetas del paso [4].

Tendremos que cambiarle la "clase" al nuevo enlace para que se distinga del anterior ya que sino ambos se verían dentro de la imagen.
En el nuevo código que hemos añadido, paso [4], cambiamos donde dice: <a class='comment-link' por <a class='comment-link2', y el código que hemos añadido en el CSS tendremos que ponerlo así:

.comment-link2 {
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;
}

ElHackerZ