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 habra quedado agregado el borde al avatar de tus comentarios. Para cambiar el color solo debes editar el fragmento del codigo que he resaltado en azul.
Ahora si quieres un borde redonde en tus comentarios deberas 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.