Agregar bordes a los avatares de los comentarios

Con CSS es mucho lo que se puede hacer, y hoy haciendo uso de la propiedad border les enseñare como agregar un borde a los avatares de los comentarios con el fin de que los comentarios se vean más definidos y ordenados.

Como puedes ver en la anterior imagen, yo tengo los avatares de mis comentarios con un borde o marco azul celeste, que a mi modo de ver hace que los avatares se vean más definidos.

Para agregar este borde al estilo de tus comentarios solo debes ir a la Edición HTML de tu blog y buscar la etiqueta ]]></b:skin> y justo antes de ella agrega lo siguiente:

.avatar-image-container{
 border:3px solid #58ACFA !important;

Con esto ya habrá quedado agregado el borde al avatar de tus comentarios. Para cambiar el color solo debes editar el fragmento del código que he resaltado en azul.

Ahora si quieres un borde redondo en tus comentarios deberás agregar lo siguiente:

  .avatar-image-container,
    .avatar-image-container img {
     max-width: 50px !important;
     width: 50px !important;
     max-height: 50px !important;
     height: 50px !important;
     padding: 0 !important;
     border: 0px;
     -webkit-border-radius: 999px;
     -moz-border-radius: 999px;
     border-radius: 999px;
    }
  .avatar-image-container{
     border:3px solid #fff !important;
     -webkit-box-shadow: 0 1px 2px #BBB;
     -moz-box-shadow: 0 1px 2px #BBB;
     box-shadow: 0 1px 2px #BBB;
    }

Para cambiar el color solo debes editar el fragmento del codigo que he resaltado en azul.

Como vez es muy facil y todo gracias a la propiedades border y  border-radius.

Si quieres los avatares más grandres puedes ir a  esta entrada Avatares Redondos y Aumentados en Blogger

Espero que haya sido de mucha utilidad esta entrada, y sigue visitando Mil Trucos Blogger para encontrar nuevos tutoriales para tu blog.