Avatares redondeados en los comentarios en Blogger

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.

Tutorial:

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.

Importante: 
  • 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.
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
Efecto de desenfoque con CSS # - Efecto de desenfoque 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
Ocultar entradas con determinada etiqueta en el inicio de Blogger # - Ocultar entradas con determinada etiqueta en el inicio de Blogger