Avatares en comentarios en Blogger (Para plantillas que no incluyen esta función)

Avatares en comentarios en Blogger (Para plantillas que no incluyen esta función)

Algunas plantillas de Blogger no incluyen la opción de mostrar el avatar de quién comenta, lamentablemente es una característica que los diseñadores deberían incluir en todo momento y que no lo hacen.

Hace un tiempo atrás creé una plantilla básica para blogger con la cual pudieran manipular un poco mejor las técnicas de diseño, por despiste olvidé incluir este sistema así recomiendo que si desean practicar aprovechen esta template para incluir el sistema de avatares en los comentarios.


El tutorial:


En "Diseño | Edición HTML" deberás marcar la casilla "Expandir plantillas de artilugios".  Deberás buscar el siguiente código:
<dl id='comments-block'>
Reemplázalo por el siguiente:

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

Si no lo encuentras busca el siguiente código:
<div id='comments-block'>
Y éste sustitúyelo por:
<div expr:class='data:post.avatarIndentClass' id='comments-block'>

Ahora deberás buscar el siguiente código:
<a expr:name='data:comment.anchorName'/>
Arriba de éste pega el siguiente código:
<b:if cond='data:comment.favicon'>
<img class="avatar-comentario" expr:src='data:comment.favicon'/>
</b:if>
<a expr:name='data:comment.anchorName'/>
<b:if cond='data:blog.enabledCommentProfileImages'>
<data:comment.authorAvatarImage/>
</b:if>
Posteriormente guarda los cambios y listo.

Importante:

Para aplicar estilos y corregir algunos errores de visualización deberás trabajar mediante CSS con la class .avatar-comentario de la siguiente forma:
.avatar-comentario {
width:45px; /*Ancho del avatar*/
height:45px; /*Alto del avatar*/
otros-atributos;
}

Estos códigos van siempre antes de ]]></b:skin>.
Artículo aleatorio
BuySellAds
BuySellAds
BuySellAds
BuySellAds
BuySellAds
Artículos destacados
Marca de agua en las imágenes con CSS # - Marca de agua en las imágenes con CSS
Botones para subir y bajar en Blogger # - Botones para subir y bajar en Blogger
Insertar una página externa en una entrada en Blogger # - Insertar una página externa en una entrada en Blogger
Efecto de desenfoque con CSS # - Efecto de desenfoque con CSS
Ocultar entradas con determinada etiqueta en el inicio de Blogger # - Ocultar entradas con determinada etiqueta en el inicio de Blogger