Manual sobre cómo decorar el enlace de comentarios en Blogger.
Si es la primera vez que visitas este sitio, no olvides suscribirte al feed RSS o participar como blogger invitado. Gracias por tu visita!
Después de desgranar las partes en las que se divide cada post en Blogger y ubicar el contenido informativo de los metadatos (fecha, hora, autor, tags y comentarios) en cada una de ellas, es el momento de comenzar a trabajar sobre su diseño, formato y apariencia individual. El enlace de publicación de comentarios es el elemento que tiene un mayor atractivo visual y sobre el que generalmente se pretende llamar la atención, más que nada para obtener un mayor número de comentarios. Por ello, éste será el objetivo principal de este post, es decir, personalizar el enlace de publicación de comentarios para incitar a los usuarios de tu blog a hacer click sobre el mismo y dejar su opinión.
HTML
Lo primero que debes hacer es determinar la ubicación en la que quieres que aparezca el enlace, a través de la sección de entradas del blog, en el panel de edición de elementos de página en Blogger. Una vez hecho esto, es necesario realizar los cambios oportunos en el código HTML para incluirlo en la primera línea del post (debajo del título), o bien en alguna de las tres zonas en las que se divide el pie de página de la entrada (post-footer), siguiendo las instrucciones que se detallan en este reciente tutorial para personalizar tus posts en Blogger.
En tal caso, el bloque de código que deberás transportar de un lugar a otro es el siguiente:
<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>
<!– backlinks –>
<span class=’post-backlinks post-comment-link’>
<b:if cond=’data:blog.pageType != “item”‘>
<b:if cond=’data:post.showBacklinks’>
<a class=’comment-link’ expr:href=’data:post.url + “#links”‘><data:top.backlinkLabel/></a>
</b:if>
</b:if>
</span>
Como puedes observar en la vista previa de tu propia plantilla, el enlace de los comentarios estará formado por el número de comentarios publicados en la entrada, seguido del texto que hayas introducido en la sección de entradas del blog del panel de edición de elementos de página. Por ejemplo: 0 Comentarios, 0 Opiniones, 0 Animaladas, 0 Reflexiones insólitas… o cualquier otra fórmula. Ya sabes que el límite está en tu imaginación.
No obstante, en algunas ocasiones puede que quieras eliminar el texto del enlace y mantener únicamente el número de comentarios para situarlo sobre una imagen de fondo. Para conseguirlo, tan sólo hay que suprimir los valores “<data:top.commentLabel/>” y “<data:top.commentLabelPlural/>” del bloque de código anterior, señalados en la siguiente imagen:
De forma que el código resultante sería:
<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>
<!– backlinks –>
<span class=’post-backlinks post-comment-link’>
<b:if cond=’data:blog.pageType != “item”‘>
<b:if cond=’data:post.showBacklinks’>
<a class=’comment-link’ expr:href=’data:post.url + “#links”‘><data:top.backlinkLabel/></a>
</b:if>
</b:if>
</span>
CSS
La clase del código CSS correspondiente al enlace de comentarios, es aquella que tiene de nombre “.comment-link“, por lo que allí será donde tendrás que añadir los distintos atributos relativos al formato del elemento, como imagen de fondo, fuente, dimensiones, márgenes, bordes, etc. Ten en cuenta que el enlace de comentarios es un vínculo más, por lo que su aspecto como enlace normal o al pasar el puntero del ratón por encima, estarán determinados por las clases del código CSS propias de los enlaces de texto: “a”, “a:hover”, “a:visited”.
Aquí tienes un ejemplo de personalización en el que se ha eliminado el texto del enlace y se ha añadido una imagen de fondo, utilizado en la plantilla para Blogger Blue Blog:
font: 400 11px/22px “Georgia”, Times New Roman, Times, serif;
background: url(http://img207.imageshack.us/img207/8013/commenttg3.png) no-repeat top left;
height: 30px;
width: 57px;
text-align: center;
float: right;
margin: 5px 0 0 0;
color: #2e98a5;
}
Recibe las actualzaciones del blog suscribiéndote al feed RSS de Zona Cerebral!
13 Comentarios
Hola Graciela! Siempre es un placer recibir tus comentarios. Todos andamos un poco mal de tiempo últimamente, supongo que son unas fechas en las que se junta todo el trabajo entre unas cosas y otras. Que pases una buena semana querida amiga 
Besos!
gracias por todos los aportes para los nuevos usuarios de blogger
saludos
como puedo poner en mi blog algo para q m dejen sus comentarios parecido al tuyo
Muy interesante 
Curioso!!
Faltou uma foto pra ver como que fica!! 
que suerte! hace tiempo que estaba buscando esto
muchisimas gracias
bye bye
Hola! Me alegro de que el post te haya servido de ayuda
Saludos!
vale, vale
muchas gracias por la explicacion
saludos
suerte
Hola! quería saber como poder poner en blogger un enlace en un comentario sin tener que usar código HTML, ya que para los usuarios puede ser un poco engorroso, ¿modificando la plantilla puede hacerse?
Saludos.
hola!!
Buen Fin de semana mis besos y abrazos!!!