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 borderborder-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.


18 commentarios

Localiza Recursos Sociales en el Municipio de Oviedo · enero 28, 2013 a las 7:21 pm

Hola: Juviano tenía numerados los comentarios y al agregar los bordes ya no veo la numeración de cada uno.¿Como los enumero dentro de un bocado por ejemplo u otra imagen?Me encanta tu blog,explicas las cosas de maravilla

    Hayder Juvinao · enero 28, 2013 a las 11:44 pm

    Para numerar los comentarios con una imagen hay un truco en ingles, espera lo busco y lo traduzco y te ayudo 🙂

Localiza Recursos Sociales en el Municipio de Oviedo · enero 29, 2013 a las 9:58 am

Muchísimas gracias,eres un crac!!!

eider garzon · febrero 3, 2013 a las 7:56 pm

:blaf:

Localiza Recursos Sociales en el Municipio de Oviedo · febrero 6, 2013 a las 12:27 pm

Hola Juvinao: No encuentras el truco que inglés que me has dicho me ayudarías a implementarlo? Un saludo

Localiza Recursos Sociales en el Municipio de Oviedo · febrero 12, 2013 a las 12:03 pm

Hola Juvinao:Gracias por tu atención,pero ya lo he implementado el código tal como indica y no sale nada.¿Qué ocurre? ¿Serías tan amable de verlo?
Gracias de nuevo. Y no me digas amigo que soy una chica
Un saludo

    Alberto Franco · febrero 12, 2013 a las 2:48 pm

    Yo ayudo a Hayder Juvinao en algunos comentarios y me gustaria ayudarte en este he dejado un comentario en la primera entrada que tienes para comprobar si tienes los anindados o no hasta que no apruebes mi comentario no podre ayudarte :S

    Un saludo!

Localiza Recursos Sociales en el Municipio de Oviedo · febrero 12, 2013 a las 3:04 pm

Ya lo he aprobado.Muchas gracias eres muy amable

    Alberto Franco · febrero 12, 2013 a las 5:11 pm

    Vale no te vale porque tienes el sistema de avatares redondos y creo que no es compatible con eso entonces deberia ponerte como Juvinao en sus comentarios y seguro que te funciona. Espero averte ayudado.

    Un saludo!

Localiza Recursos Sociales en el Municipio de Oviedo · febrero 12, 2013 a las 5:22 pm

OK.Alberto eres muy amable.Muchas gracias y disculpa por las molestias
Un saludo

    Alberto Franco · febrero 12, 2013 a las 7:31 pm

    No pasa nada para eso estamos qui Hayder y los que podamos ayudar jeje cualquier cosa ya sabes.

    Un saludo!

AngelG CE · febrero 15, 2013 a las 1:43 am

hermano he querido usar 2 trucos de su web… los cuales usan el ]]> y ademas en otras webs igual pero ninguno se aplica en mi plantilla D: sabe porque? podria ayudarme? mi web es http://www.angelgce.blogspot.co

    Alberto Franco · febrero 15, 2013 a las 8:58 am

    Y que dos trucos son? dimelos y podre ayudarte amigo.

    Un saludo!

| Harmony and design | · noviembre 13, 2013 a las 1:59 pm

Estoy intentando hacerlo y no hay manera al pegar en la plantilla ]]> me dice que no lo encuentra. Podrías ayudarme?
Otra duda y si tb quisiera ponerle marco igual q el avatar al comentario?
Muchas gracias de antemano.

| Harmony and design | · noviembre 13, 2013 a las 2:02 pm

estoy intentando hacerlo y cuando pego ]]> me dice que no lo encuentra. Podrías ayudarme?
Mil gracias

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *