Con CSS es mucho lo que se puede hacer, y hoy haciendo uso de la propiedad borderles 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.
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.
SOCIALIZE IT →