Configuración:
.
Biología
.
Botánica
.
Tecnología
.
Sociedad
A mis trece años de edad, el día 2 de Diciembre de 2007 inicié ‘El Balcón de Jame’. Este humilde espacio, cuyo secreto siempre fue el de compartir sin recibir nada a cambio, me dio la oportunidad de conocer un mundo nuevo, un entorno en el que me sentía yo mismo.

Hoy, 17 de abril de 2011 finalizo esta etapa de mi vida con una gran sonrisa y junto al recuerdo que este blog y cada unos de vosotros me habéis concedido.

He sido bloggero.

Jaime Trujillo Escobedo.

Mostrar avatares en los comentarios de blogger

Hace ya bastante tiempo y por motivo de su décimo cumpleaños, blogger introdujo una nueva característica: avatares en los comentarios. Esta novedosa funcionalidad muestra la imagen del perfil en blogger de cada lector que comenta en nuestro blog, lo que facilita la identificación de usuarios / administradores y hace más apetecible el comentar.



Muchos de vosotros me habéis comentado que, dependiendo de la plantilla, los avatares son visibles o no, aún configurándolos en el apartado de Configuración.

Por ello, he decidido explicar en esta entrada, la instalación a través del código de la plantilla, lo que hará posible el obtener los avatares a todo aquel que no los haya podido instalar.

El primer paso será el de asegurarnos que tenemos configurada la opción "¿Mostrar imágenes de perfil en los comentarios?"que encontraremos en el apartado Configuración>Comentarios.


Diseño>Edición de HTML>expandimos artilugios



Busca esta línea:

<dl expr:class='data:post.avatarIndentClass' id='comments-block'>

Si no la encuentras significa que en tu plantilla faltan los códigos necesarios por lo que tendrás que añadirlos.

Para ello busca <dl id='comments-block'> y reemplázalo con esto:

<dl expr:class='data:post.avatarIndentClass' id='comments-block'>

Seguidamente encuentra todas las líneas como esta (deberías encontrar más de una):

<a expr:name='data:comment.anchorName'/>

Y sustitúyelas por bloques como este:

<b:if cond='data:comment.favicon'>
<img expr:src='data:comment.favicon' height='18px' style='margin-bottom:-2px;' width='18px'/>
</b:if>
<a expr:name='data:comment.anchorName'/>
<b:if cond='data:blog.enabledCommentProfileImages'>
<div expr:class='data:comment.avatarContainerClass'>
<data:comment.authorAvatarImage/>
</div>
</b:if>

Finalmente busca la etiqueta ]]></b:skin> y encima agrega el CSS que aplicará estilo a los avatares:

#comments-block.avatar-comment-indent dd {margin-left: 0;}
#comments-block .avatar-image-container {background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgIw150dUPjAYQVpIBmPN5vRn1uyLZhQH9xTR7Jl3x8dVpWxitswBt6PJwjM3PXPsLUqMygWNuyV5fxlbUIpruCpXX9Kg-1-MnWRiRGAQSIYitIg7ctlZWCIYglkuf8-3TLNR-zhcaI1lM/s1600-r/blanonim.png); left: -40px; height: 36px; width: 36px; position: absolute;}
#comments-block .avatar-image-container img {border: 1px solid #dddddd; float: right;}
#comments-block.avatar-comment-indent {position: relative; margin-left: 40px;}
#comments-block .avatar-image-container.avatar-stock img {border: none; padding: 1px;}

La línea resaltada en color verde es la dirección de un icono para representar usuarios anónimos y que aparecerá cuando algún lector comente como anónimo o "Nombre / URL", pero puede reemplazarse por cualquier otra imagen.

Guarda la plantilla para terminar.

馬丁 dice...

muy bueno Jaime gracias :D

Jaime Trujillo Escobedo dice...

Gracias a ti, 馬丁 ;).

Mauricio~ dice...

Jaime Trujillo Escobedo, Excelente ;) creo que deverias poner como responder los comentarios ^^!

SALUDOS!

Jaime Trujillo Escobedo dice...

Mauricio, el truco para responder a los comentarios lo utilizo en El Balcón hace ya varios meses y estaba pensando en explicároslo pronto ya que encontré una forma muy sencilla de instalarlo. Es muy útil el poder responder a cualquier usuario con un clic ;).

Saludos!

Cocina dice...

Hola JAIME!me gusta esta entrada pero yo ya tengo los iconos,tendria que volver hacia atras con todo para incluir esto no..???
besito!
claudia

Jaime Trujillo Escobedo dice...

Claudia, supongo que no tendrías que retroceder. Además, el avatar siempre puede personalizarse en cuanto a la posición (a la derecha quedaría bien).

A pesar de todo, recomiendo una copia de seguridad, por evitar el perder alguno de los dos trucos.

Marcelo Mendoza dice...

Saludos nuevamente Jaime. quiero por cierto agradecer nuevamente tu trabajo con tan buenas herramientas y tutoriales, me han sido de gran apoyo ;)

Esta vez tengo una duda, en mi plantilla no encuentro esta líneas sugeridas para insertar los avatares, por lo que no puedo ponerla en el blog, te pido me ayudes por favor.

Muchas gracias y un gran abrazo.

Desde Chile:

Marcelo Mendoza dice...

Ups....problema corregido. había olvidado expandir artilugios... ;) ; en fin

Un detalle es que solo me aparece una sola línea a expr:name='data:comment.anchorName. Aprete Ctrl + F y encontré sola 1.

¿Es necesario tener mas de una línea de estas o basta solo una?

Jaime Trujillo Escobedo dice...

Akiles, si únicamente hay una entonces realiza el truco de la misma forma.

De todas maneras, prueba a buscar el término "comment.anchor" en el buscador de tu navegador por si acaso los espacios entre las etiquetas sean distintos y únicamente te esté mostrando una línea.

¡Suerte y gracias por comentar!

Joan Irazu dice...

gracias amigo, me faltaba el avatar anonimo :D listo ya esta

Cocina dice...

Hola Jaime!!sii me anime y puse los avatar!!viste que lindos quedaron??por suerte salio todo perfecto!!:D
gracias por responder a mi comentario,lo tendre en cuenta!agradezco tu ayuda de siempre!
un besito
claudia

Jaime Trujillo Escobedo dice...

Por supuesto que los vi, Claudia. Estoy encantado de que hayas conseguido instalarlos.

Gracias a ti por comenta.
Abrazos!

AlmaRockero dice...

Tengo un pequeño problema fiera, he seguido el tuto, ahora me aparecen avatares, pero solo me aparece el de usuario no registrado. Incluso en mis propios comentarios aparece ese avatar. ¿Tienes idea de que puede pasar? ¡Gracias de antemano!

Escribe tu comentario en la entrada...

El Balcón de Jaime fue terminado el 17 de abril de 2011. Leer despedida.

Me gustaría conocer tu opinión. El comentario será moderado y en breve se publicará.

Si deseas incluir un enlace utiliza este código:

<a href="Dirección de tu página">Titulo del enlace</a>

Para publicar un código haz uso del Conversor de entidades.

Intenta escribir sobre algo relacionado con el artículo. Si no lo haces, podría tardar en responderte.

¿Problemas al comentar? Utiliza el formulario antiguo