Mil Trucos Blogger

Agregar bordes a los avatares de los comentarios

Deja tu Reacción sobre el artículo
Me Gusta Dichoso Feliz Admirado Triste Enojado

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.

0
Shares

Relacionados...

Deja tu Reacción sobre el artículo
Me Gusta Dichoso Feliz Admirado Triste Enojado

18 Comentarios

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

    • enero 28, 2013    

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

  2. Muchísimas gracias,eres un crac!!!

  3. febrero 3, 2013    

    :blaf:

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

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

    • febrero 12, 2013    

      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!

  6. Ya lo he aprobado.Muchas gracias eres muy amable

    • febrero 12, 2013    

      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!

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

    • febrero 12, 2013    

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

      Un saludo!

  8. febrero 15, 2013    

    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

    • febrero 15, 2013    

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

      Un saludo!

  9. noviembre 13, 2013    

    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.

  10. noviembre 13, 2013    

    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 *

Categorías

Síguenos en Facebook

Suscribete por Email

Introduce tu Correo:

Recibiras nuestros últimos posts en tu correo