Cómo poner un borde en la foto de los comentarios

20.6.15

En su día te conté cómo puedes hacer redonda la foto de  los lectores que comentan en tu blog.

Para decorarlo un poco más, ¿qué te parece si le pones un borde en el avatar de los comentarios?

borde avatar comentarios




Aprenderás a poner un borde a los avatars de las personas que comenten.

Tendrás que retocar un poco el código HTML, por eso te recomiendo que hagas una copia de seguridad de tu plantilla HTML.

En el código que te pasaré más abajo hay la foto redonda, pero si no te gusta, aquí te conté cómo variar la forma.
  1. Entra en "Plantilla" del menú lateral izquierdo de Blogger.

    borde foto avatar
  2. Pincha en "Editar HTML"


    borde foto comentarios

  3. Clica encima de tu código y a continuación presiona  Control  f (command  f si tienes Mac) al mismo tiempo y te aparecerá un cuadro de búsqueda.

    marco avatar comentarios
  4. Busca el siguiente código


        #comments .avatar-image-container img {



  5. Ahora sustituye lo que tenías antes (hasta la próxima clave } ) por este otro código.



        #comments .avatar-image-container img {
          border: 2px solid red;
          border-radius: 18px;
          width: 90%;
          height:90%;
        }



    border --> el grosor del borde en píxeles
                     el tipo de border. Puede ser: solid, dotted, dashed (los otros tipos no quedan bien en una foto tan pequeña).
                     el color del borde. Lo puedes poner en HEX o con nombre.

    border-radius --> lo puedes variar de 0px (cuadrada) hasta 18px (redonda)

    width y height --> tienen que tener estos valores para que se pueda ver el marco. En caso contrario el espacio que hay para la foto es más pequeño que la foto con borde.


  6. No te olvides de guardar los cambios realizados! De lo contrario la modificación del código no tendrá ningún efecto.
avatar borde comentarios



En el caso del código anterior el avatar con borde se verá así


marco avatar comentarios

Si el borde es dotted será así

borde avatar foto

Y si es dashed así

marco fotos comentarios




Espero que te haya gustado y que te decidas a poner un borde en las fotos de los comentarios y así personalizar lo que parecía intocable!

Que acabes de pasar un buen día.

Laura

¿Te ha gustado lo que has leído?
Muchas gracias por compartirlo en tus redes sociales!
Tus contactos y yo te lo agradeceremos! :-)

¿Quieres contenido exclusivo para mejorar tu blog?
Suscríbete y recibirás AHORA la guía para dominar Blogger HOY!
Tu blog no pasará inadvertido.
Dejará huella.