Avatares redondeados en los comentarios en Blogger

Algunos usuarios me han preguntado cómo añado los avatares de los comentarios del blog en forma de círculo y cómo también se muestra un avatar para el usuario anónimo que comenta.

En esta oportunidad les compartiré el mismo estilo que utilizo yo en los avatares.
El resultado es muy similar a este:

Avatares redondeados.

Recuerda que sólamente es el estilo de los avatares, lo demás no está incluído.


En ''Diseño | Edición HTML'' (''Plantilla | Editar Plantilla'' si usas Blogger 2011) busca la siguiente sección:

]]></b:skin>

Arriba de esta, pega el siguiente código:

#comments-block.avatar-comment-indent {
margin-left: 0;
}
#comments-block .avatar-image-container {
border-radius:45px;
float: left;
height: 49px;
position: static;
width: 49px;
}
#comments-block .avatar-image-container img {
border-radius:45px;
display: block;
float: none;
min-height: 45px;
min-width: 45px;
padding: 2px;
}
#comments-block .avatar-image-container.avatar-stock {
border-radius:45px;
background: #dadada url(http://3.bp.blogspot.com/-Ug-KluyFuHk/TiNB5HDJUeI/AAAAAAAABaE/BmDbfhNf4nI/s1600/question+comments.png) no-repeat 50% 50%;
}
#comments-block .avatar-image-container.avatar-stock img {
display: none;
}
img.delayLoad {
max-height: 45px;
max-width: 45px;
min-height: 45px;
min-width: 45px;
}

Guarda los cambios y listo.

• Es muy posible que necesites modificar las secciones para que los avatares no sobrepongan los comentarios.
• Si no se ven bien, tendrás que aplicar estilos al contenedor ''comment-author''.
• Yo creé una imagen redonda para los comentarios anónimos, pero no es necesario ya que si utilizas una imagen de 45x45px cuadrada, se verá redonda igual.