The Dai Li // An Avatar: the Last Airbender Topsite

Diferenciar a los comentaristas

¿Es posible hacer que los comentarios anónimos sean diferentes de los que tienen una cuenta? Sí, y de hecho Blogger lo hace sólo, agrega una imagen para usuarios de Google, OpenID y Anónimos, esto lo hace con data:comment.authorClass que genera el tipo de comentarista:

blogger-comment-icon cuando se está logueado en Blogger
openid-comment-icon si comenta logueado con OpenId
anon-comment-icon comentario de un anónimo

En el siguiente ejemplo hay que tener desactivada la opción de mostrar la imagen del perfil (los avatares).

Configuración | Comentarios



Ahora en Diseño | Edición de HTML y marcamos y buscamos un código como este:
MOSTRAR
Después de la apertura del loop se abrirá un DIV con la clase de cada tipo comentario y antes del cierre del loop se cerrará dicho DIV.

      <dl expr:class='data:post.avatarIndentClass' id='comments-block'>
<b:loop values='data:post.comments' var='comment'>
<div expr:class='&quot;comment-author-&quot; + data:comment.authorClass'>
<dt expr:class='&quot;comment-author &quot; + data:comment.authorClass' expr:id='data:comment.anchorName'>
<b:if cond='data:comment.favicon'>
<img expr:src='data:comment.favicon' height='16px' style='margin-bottom:-2px;' width='16px'/>
</b:if>
<a expr:name='data:comment.anchorName'/>
<b:if cond='data:blog.enabledCommentProfileImages'>
<data:comment.authorAvatarImage/>
</b:if>
<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>
<data:commentPostedByMsg/>
</dt>
<dd class='comment-body'>
<b:if cond='data:comment.isDeleted'>
<span class='deleted-comment'><data:comment.body/></span>
<b:else/>
<p><data:comment.body/></p>
</b:if>
</dd>
<dd class='comment-footer'>
<span class='comment-timestamp'>
<a expr:href='data:comment.url' title='comment permalink'>
<data:comment.timestamp/>
</a>
<b:include data='comment' name='commentDeleteIcon'/>
</span>
</dd>
</div>
</b:loop>
</dl>

Ahora agregamos los estilos antes de ]]></b:skin>:
/* Los comentarios de Blogger */
div.comment-author-blogger-comment-icon {
background: #FF8020;
padding:10px;
-moz-border-radius:10px;
-webkit-border-radius:10px;
-khtml-border-radius:10px;
margin:0 0 5px 0;
}
div.comment-author-blogger-comment-icon .comment-author {

}
div.comment-author-blogger-comment-icon .comment-body {

}
div.comment-author-blogger-comment-icon .comment-footer {

}
div.comment-author-blogger-comment-icon .comment-body p {

}


/* Los comentarios de OpenID */
div.comment-author-openid-comment-icon {
background: #A0C0ff;
padding:10px;
-moz-border-radius:10px;
-webkit-border-radius:10px;
-khtml-border-radius:10px;
margin:0 0 5px 0;
}
div.comment-author-openid-comment-icon .comment-author {

}
div.comment-author-openid-comment-icon .comment-body {

}
div.comment-author-openid-comment-icon .comment-footer {

}
div.comment-author-openid-comment-icon .comment-body p {

}

/* Los comentarios de Anónimos */
div.comment-author-anon-comment-icon {
background: #80C0C0;
padding:10px;
-moz-border-radius:10px;
-webkit-border-radius:10px;
-khtml-border-radius:10px;
margin:0 0 5px 0;
}
div.comment-author-anon-comment-icon .comment-author {

}
div.comment-author-anon-comment-icon .comment-body {

}
div.comment-author-anon-comment-icon .comment-footer {

}
div.comment-author-anon-comment-icon .comment-body p {

}

En mi ejemplo le agregué un color de fondo naranja a los usuarios con cuenta Google, no soy muy bueno para el nombre de los colores así que digamos que para OpenID es una tonalidad de azul y para los anónimos en verde. Las posibles definiciones son muchas, depende de nuestra imaginación y conocimientos. [Ver demo]

Fácil, simple y es poco el código. Seamos más específicos; los comentarios de usuarios registrados se dividen en dos: usuarios con cuenta Google/Blogger y con OpenID, mientras que los anónimos hay tres: los anónimos propiamente dichos y los que comentan como Nombre/URL que dejan sólo un nombre y los que dejan nombre y url.
Para esto usaremos condicionales que detecten a cada tipo y subtipo de comentarista.

Primero detectaremos a los usuarios de Blogger, luego a los de OpenID y de últimos a los subtipos de anónimos:
<!-- Comentarios de Blogger -->
<b:if cond='data:comment.authorClass == &quot;blogger-comment-icon&quot;'>
<div expr:class='&quot;comment-author-&quot; + data:comment.authorClass'>
<dt expr:class='&quot;comment-author &quot; + data:comment.authorClass' expr:id='data:comment.anchorName'>
<b:if cond='data:comment.favicon'>
<img expr:src='data:comment.favicon' height='16px' style='margin-bottom:-2px;' width='16px'/>
</b:if>
<a expr:name='data:comment.anchorName'/>
<b:if cond='data:blog.enabledCommentProfileImages'>
<data:comment.authorAvatarImage/>
</b:if>
<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>
<data:commentPostedByMsg/>
</dt>
<dd class='comment-body'>
<b:if cond='data:comment.isDeleted'>
<span class='deleted-comment'><data:comment.body/></span>
<b:else/>
<p><data:comment.body/></p>
</b:if>
</dd>
<dd class='comment-footer'>
<span class='comment-timestamp'>
<a expr:href='data:comment.url' title='comment permalink'>
<data:comment.timestamp/>
</a>
<b:include data='comment' name='commentDeleteIcon'/>
</span>
</dd>
</div>
</b:if>


<!-- Comentarios de OpenID -->
<b:if cond='data:comment.authorClass == &quot;openid-comment-icon&quot;'>
<div expr:class='&quot;comment-author-&quot; + data:comment.authorClass'>
<dt expr:class='&quot;comment-author &quot; + data:comment.authorClass' expr:id='data:comment.anchorName'>
<b:if cond='data:comment.favicon'>
<img expr:src='data:comment.favicon' height='16px' style='margin-bottom:-2px;' width='16px'/>
</b:if>
<a expr:name='data:comment.anchorName'/>
<b:if cond='data:blog.enabledCommentProfileImages'>
<data:comment.authorAvatarImage/>
</b:if>
<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>
<data:commentPostedByMsg/>
</dt>
<dd class='comment-body'>
<b:if cond='data:comment.isDeleted'>
<span class='deleted-comment'><data:comment.body/></span>
<b:else/>
<p><data:comment.body/></p>
</b:if>
</dd>
<dd class='comment-footer'>
<span class='comment-timestamp'>
<a expr:href='data:comment.url' title='comment permalink'>
<data:comment.timestamp/>
</a>
<b:include data='comment' name='commentDeleteIcon'/>
</span>
</dd>
</div>
</b:if>


<!-- Comentarios de Anónimos -->
<b:if cond='data:comment.authorClass == &quot;anon-comment-icon&quot;'>
<b:if cond='data:comment.authorUrl'>
<!-- Comentarios de Anónimos con nombre y url -->
<div class='comment-author-anon-comment-icon-anon-url'>
<dt expr:class='&quot;comment-author &quot; + data:comment.authorClass' expr:id='data:comment.anchorName'>
<b:if cond='data:comment.favicon'>
<img expr:src='data:comment.favicon' height='16px' style='margin-bottom:-2px;' width='16px'/>
</b:if>
<a expr:name='data:comment.anchorName'/>
<b:if cond='data:blog.enabledCommentProfileImages'>
<data:comment.authorAvatarImage/>
</b:if>
<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>
<data:commentPostedByMsg/>
</dt>
<dd class='comment-body'>
<b:if cond='data:comment.isDeleted'>
<span class='deleted-comment'><data:comment.body/></span>
<b:else/>
<p><data:comment.body/></p>
</b:if>
</dd>
<dd class='comment-footer'>
<span class='comment-timestamp'>
<a expr:href='data:comment.url' title='comment permalink'>
<data:comment.timestamp/>
</a>
<b:include data='comment' name='commentDeleteIcon'/>
</span>
</dd>
</div>
<b:else/>

<!-- Comentarios de Anónimos propiamente -->
<b:if cond='data:comment.author == &quot;Anónimo&quot;'>
<div class='comment-author-anon-comment-icon-anon'>
<dt expr:class='&quot;comment-author &quot; + data:comment.authorClass' expr:id='data:comment.anchorName'>
<b:if cond='data:comment.favicon'>
<img expr:src='data:comment.favicon' height='16px' style='margin-bottom:-2px;' width='16px'/>
</b:if>
<a expr:name='data:comment.anchorName'/>
<b:if cond='data:blog.enabledCommentProfileImages'>
<data:comment.authorAvatarImage/>
</b:if>
<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>
<data:commentPostedByMsg/>
</dt>
<dd class='comment-body'>
<b:if cond='data:comment.isDeleted'>
<span class='deleted-comment'><data:comment.body/></span>
<b:else/>
<p><data:comment.body/></p>
</b:if>
</dd>
<dd class='comment-footer'>
<span class='comment-timestamp'>
<a expr:href='data:comment.url' title='comment permalink'>
<data:comment.timestamp/>
</a>
<b:include data='comment' name='commentDeleteIcon'/>
</span>
</dd>
</div>
<b:else/>

<!-- Comentarios de Anónimos con nombre pero sin url -->
<div class='comment-author-anon-comment-icon-anon-name'>
<dt expr:class='&quot;comment-author &quot; + data:comment.authorClass' expr:id='data:comment.anchorName'>
<b:if cond='data:comment.favicon'>
<img expr:src='data:comment.favicon' height='16px' style='margin-bottom:-2px;' width='16px'/>
</b:if>
<a expr:name='data:comment.anchorName'/>
<b:if cond='data:blog.enabledCommentProfileImages'>
<data:comment.authorAvatarImage/>
</b:if>
<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>
<data:commentPostedByMsg/>
</dt>
<dd class='comment-body'>
<b:if cond='data:comment.isDeleted'>
<span class='deleted-comment'><data:comment.body/></span>
<b:else/>
<p><data:comment.body/></p>
</b:if>
</dd>
<dd class='comment-footer'>
<span class='comment-timestamp'>
<a expr:href='data:comment.url' title='comment permalink'>
<data:comment.timestamp/>
</a>
<b:include data='comment' name='commentDeleteIcon'/>
</span>
</dd>
</div>
</b:if>
</b:if>
</b:if>



Elaboré una explicación simple del código de anónimos por si a alguien le interesa
MOSTRAR



Los tres códigos van dentro de la etiqueta b:loop:

      <dl expr:class='data:post.avatarIndentClass' id='comments-block'>
<b:loop values='data:post.comments' var='comment'>

Aquí van los tres códigos

</b:loop>
</dl>



Falta agregar los estilos antes de ]]></b:skin>:
/* Los comentarios de Blogger */
div.comment-author-blogger-comment-icon {
background: #FF8020;
padding:10px;
-moz-border-radius:10px;
-webkit-border-radius:10px;
-khtml-border-radius:10px;
margin:0 0 5px 0;
}
div.comment-author-blogger-comment-icon .comment-author {

}
div.comment-author-blogger-comment-icon .comment-body {

}
div.comment-author-blogger-comment-icon .comment-footer {

}
div.comment-author-blogger-comment-icon .comment-body p {

}


/* Los comentarios de OpenID */
div.comment-author-openid-comment-icon {
background: #A0C0ff;
padding:10px;
-moz-border-radius:10px;
-webkit-border-radius:10px;
-khtml-border-radius:10px;
margin:0 0 5px 0;
}
div.comment-author-openid-comment-icon .comment-author {

}
div.comment-author-openid-comment-icon .comment-body {

}
div.comment-author-openid-comment-icon .comment-footer {

}
div.comment-author-openid-comment-icon .comment-body p {

}
/* Los comentarios de Anónimos propiamente */
div.comment-author-anon-comment-icon-anon {
background: #80C0C0;
padding:10px;
-moz-border-radius:10px;
-webkit-border-radius:10px;
-khtml-border-radius:10px;
margin:0 0 5px 0;
}
div.comment-author-anon-comment-icon-anon .comment-author {

}
div.comment-author-anon-comment-icon-anon .comment-body {

}
div.comment-author-anon-comment-icon-anon .comment-footer {

}
div.comment-author-anon-comment-icon-anon .comment-body p {

}
/* Los comentarios de Anónimos con url */
div.comment-author-anon-comment-icon-anon-url {
background: #91D1D1;
padding:10px;
-moz-border-radius:10px;
-webkit-border-radius:10px;
-khtml-border-radius:10px;
margin:0 0 5px 0;
}
div.comment-author-anon-comment-icon-anon-url .comment-author {

}
div.comment-author-anon-comment-icon-anon-url .comment-body {

}
div.comment-author-anon-comment-icon-anon-url .comment-footer {

}
div.comment-author-anon-comment-icon-anon-url .comment-body p {

}
/* Los comentarios de Anónimos con nombre */
div.comment-author-anon-comment-icon-anon-name {
background: #AEEEEE;
padding:10px;
-moz-border-radius:10px;
-webkit-border-radius:10px;
-khtml-border-radius:10px;
margin:0 0 5px 0;
}
div.comment-author-anon-comment-icon-anon-name .comment-author {

}
div.comment-author-anon-comment-icon-anon-name .comment-body {

}
div.comment-author-anon-comment-icon-anon-name .comment-footer {

}
div.comment-author-anon-comment-icon-anon-name .comment-body p {

}


Otra vez en este otro ejemplo sólo cambié los colores, pero podríamos cambiar más cosas.

Para cambiar la imagen de cada caso habría que buscar
<dt expr:class='&quot;comment-author &quot; + data:comment.authorClass' expr:id='data:comment.anchorName'>
Borrar lo que está de color azul, buscar esto:
         <b:if cond='data:comment.favicon'>
<img expr:src='data:comment.favicon' height='16px' style='margin-bottom:-2px;' width='16px'/>
</b:if>

Y reemlazarlo por la imagen de nuestro agrado:
<img height='45px' src='URL-IMAGEN' style='margin-bottom:-2px;vertical-align: middle;' width='45px'/>

Aquí hay otro ejemplo un poco más "sofisticado".


Si usamos los avatares todo esto es inútil, no comprendo por qué Blogger desactiva data:comment.authorClass, lo máximo que podríamos personalizar son los avatares de los anónimos y a eso me voy a limitar.

Esto se logra fácilmente con CSS, creo que las definiciones mínimas serían estas:
#comments-block.avatar-comment-indent {
margin-left:0;
}
#comments-block .avatar-image-container {
float:left;
height:49px;
position:static;
width:49px;
}
#comments-block .avatar-image-container img {
background:#282C2F url(http://lh5.ggpht.com/_7FKsLpdNk4k/SrWgdBWjBYI/AAAAAAAAIOc/IAElVzxKM7c/anonimo_coment.png) no-repeat 50% 50%;
border:1px solid #282C2F;
display:block;
float:none;
min-height:45px;
min-width:45px;
padding:2px;
box-shadow: 3px 3px 5px #333;
}


No me gusta el resultado en el caso del icono de OpenID y cuando no hay imagen de perfil, su tamaño es muy pequeño y al redimencionarlo está muy borroso.

Preferí ocultar esos iconos, las definiciones que estoy usando son estas:

/* los avatares en los comentarios */
#comments-block.avatar-comment-indent {
margin-left:0;
}
#comments-block .avatar-image-container {
float:left;
height:49px;
position:static;
width:49px;}
#comments-block .avatar-image-container img {
background:#282C2F url(http://lh3.ggpht.com/_7FKsLpdNk4k/SrWdw7V2RFI/AAAAAAAAIOU/0REvg7aKlUU/blogger_no_image.png) no-repeat 50% 50%;
border:1px solid #282C2F;
display:block;
float:none;
min-height:45px;
min-width:45px;
padding:2px;
box-shadow: 3px 3px 5px #333;
}
#comments-block .avatar-image-container.avatar-stock {
background:#282C2F url(http://lh5.ggpht.com/_7FKsLpdNk4k/SrWgdBWjBYI/AAAAAAAAIOc/IAElVzxKM7c/anonimo_coment.png) no-repeat 50% 50%;
border:1px solid #282C2F;
}
#comments-block .avatar-image-container.avatar-stock img {
opacity:0.0;
filter: alpha(opacity=0);
}


Con Oloman de Oloblogger aprendí a usar otro código usando condicionales.
Localizamos el código que genera la imagen de perfil:
<b:if cond='data:blog.enabledCommentProfileImages'>
<data:comment.authorAvatarImage/>
</b:if>

Y se le sustituye por este:
<b:if cond='data:blog.enabledCommentProfileImages'>

<!-- Comentarios de usuarios registrados y anónimos con url -->
<data:comment.authorAvatarImage/>
<b:else/>
<b:if cond='data:comment.authorUrl'>

<!-- Anónimo con nombre sin url-->
<b:if cond='data:comment.author != &quot;Anónimo&quot;'>
<div class='avatar-image-container' style='background-image:none !important;'><img src='http://lh5.ggpht.com/_7FKsLpdNk4k/StIiffZ901I/AAAAAAAAIYw/GuoxpoMIbTU/anonimo_nombre.png' style='background-image:none !important;'/></div>
<b:else/>

<!-- Anónimo propiamente -->
<div class='avatar-image-container' style='border:0px;background-image:none !important;'><img src='http://lh5.ggpht.com/_7FKsLpdNk4k/SrWgdBWjBYI/AAAAAAAAIOc/IAElVzxKM7c/anonimo_coment.png' style='background-image:none !important;'/></div>
</b:if>
</b:if>
</b:if>


Oloman aplicó estas definiciones:
#comments-block .avatar-image-container {
margin-right:5px;
}
#comments-block .avatar-image-container img {
float: none;
width:35px;
height:35px;
border:1px solid #000000;
}
#comments-block .avatar-image-container.avatar-stock {
background:url(http://4.bp.blogspot.com/_0eC4K-qZ7AM/SrYDDOfHPQI/AAAAAAAAJz4/P62mG5OBKt8/s400/sinavatar.gif) transparent no-repeat 50% 50%;}


Esas condicionales no detectan al anónimo con url, lo que hace Blogger es generar la clase avatar-stock para cuando no se tiene imagen de perfil, ya sea usuario de Blogger, OpenID o anónimo. Pero les genera un icono, el de los anónimos es transparente y por eso puede verse la imagen de fondo. [Ver ejemplo].

Personalmente me interesa muy poco diferenciar a los comentaristas unos de otros, prefiero resaltar mis propios comentarios, ¿Cómo hacerlo? Eso lo veremos en otra ocación.

Ir al formulario 4 Comentarios:

Oloman dijo...

Muy completo Bonzu y especialmente útil en estos días en los que los avatares personalizados están dando muchos problemas. Este fin de semana por ejemplo, no salen los avatares de los comentaristas registrados, precisamente los que deberían salir sin problemas.

Bonzu Pipinpadaloxicopolis III dijo...

Lo he notado en otros blogs, en mi caso fui afortunado porque el problema no se ha presentado :-).

Felipe dijo...

Hola Bonzu

Tu explicación es la más completa de todas las que hay en la web y te felicito por tu trabajo y dedicación.
Precisamente llegué a tu blog gracias a Oloman y enhorabuena por compartir tus conocimientos.

Te envio un saludo cordial desde Bogotá, Colombia.

Bonzu Pipinpadaloxicopolis III dijo...

Hola Felipe‼ Gracias por el comentario. Este post es más una recopilación pero le di algo de imaginación para diferenciar a los comentariistas.

Publicar un comentario

De preferencia lea mi política de comentarios.

Puede comentar con su cuenta Google (Google +, Blogger, Youtube, etc.)

En caso de que usted no disponga de una cuenta seleccione Nombre/URL donde dice "Comentar como:" coloque su nombre o pseudónimo, y en URL la dirección de su página (como la de Facebook, Twitter u otra) y recuerde que la dirección web debe iniciar con http://

Al comentar puede utilizar algunos códigos HTML
En negrita <b>texto</b>
En itálica <i>texto</i>
Crear un enlace <a href="url-de-la-página">Texto</a>


Si el formulario anterior no funciona puede enviar su comentario utilizando los métodos antiguos:
En una pequeña ventana emergente
⇧ Ir arriba Comentar en una nueva pestaña