Icono delante del autor del comentario

Hace algún tiempo había explicado como eliminar los iconos de Blogger en los comentarios.

Algunos os habéis interesado por la forma de hacer que en el lugar donde antes estaban esos iconos, es decir, antes de cada nombre del autor del comentario, se muestre un icono escogido por nosotros.

[1] Para mostrar el icono (el mismo para todos los comentaristas), una vez eliminados los iconos de Blogger, localizamos esta línea de CSS en nuestra plantilla:

.comment-author {

Justo debajo de esa línea colocaremos estas otras líneas de CSS:


background: url (Url de laimagen-icono) left no-repeat;
padding-left: 20px;

Tendría que quedar algo así:

.comment-author {
background: url (Url de laimagen-icono) left no-repeat;
padding-left: 20px;

El resto del código que ya teníamos aquí.

}

Donde dice padding-left:20px; tendremos que cambiar el valor, es decir el número 20, por más o menos el ancho que tenga nuestro icono, para evitar que la imagen se vea sobre parte del nombre del autor del comentario.


[2] También podemos añadir un icono para nuestros comentaristas que distinga unos de otros, o sea, tendríamos una imagen para nuestros comentarios (autor del blog), otra para los comentaristas anónimos (que no dejan url) y otra para los demás (que dejan su url).

Esto lo conseguimos de la forma, no demasiada complicada, que Jmiur nos explica en  esta entrada de Vagabundia .

En nuestro panel de diseño, iremos a edición html y con la plantilla de artilugios expandida, localizamos esta parte del código:

<b:if cond='data:comment.authorUrl'>
<a expr:href='data:comment.authorUrl' rel='nofollow'><data:comment.author/></a>
<b:else/>
<data:comment.author/>
</b:if>

Y lo cambiamos por este otro:

<b:if cond='data:comment.authorUrl'>
<!-- autor reconocido -->
<b:if cond='data:comment.author == "MI_NICK"'>
<!-- mis propios comentarios -->
<img class='comenta-avatar' src='URL_IMAGEN_YO'/>
<b:else/>
<!-- comentarios de los visitantes -->
<img class='comenta-avatar' src='URL_IMAGEN_OTROS'/>
</b:if>
<a expr:href='data:comment.authorUrl' rel='nofollow'>
<data:comment.author/>
</a>
<b:else/>
<!-- comentarios anónimos -->
<img class='comenta-avatar' src='URL_IMAGEN_ANONIMO'/>
<data:comment.author/>
</b:if>

Fijaros que donde dice MI_NICK tendremos que poner el nombre con el que publicamos en Blogger, exactamente como aparece en nuestro blog.

Sustituimos  donde dice URL_IMAGEN... por la url  del icono que vamos a usar en cada caso.