Mil Trucos Blogger

Avatares Redondos y Aumentados en Blogger

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

Yo siempre he procurado tener un buen diseño en mis comentarios y ahora con los nuevos comentarios anidados se desacomodo todo el CSS que tenia en mis comentarios pero gracias a Dios el CSS es una maravilla y poco a poco lo he ido reconstruyendo y entre esas recontrucciones esta el aumentar de tamaño el avatar y cambiarlo de forma que por defecto viene de 36*36px y cuadrado pero con un poco de CSS se puede aumentar a 50px y ponerlo redondo.

Con el hack que les presento hoy los avatares quedaran de la siguiente manera:


Para añadir este truco deberas pegar antes de ]]></b:skin> 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;
}

Con el anterior codigo se aumentara el tamaño del avatar a 50px,hay que aclarar que puedes aumentar aun mas el tamaño del avatar pero no es muy recomendable.
 
Ahora si quieres los avatares redondos pega antes de ]]></b:skin> 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;
}

Como vez es muy facil,espero que os agrade este pequeño truco y lo usen.

Via/Way2Blogging

0
Shares

Relacionados...

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

30 Comentarios

  1. Mayo 13, 2012    

    Muy bueno, gracias

    • Mayo 14, 2012    

      Gracias por comentar amigo 😀

  2. Mayo 21, 2012    

    No me funcionaaaaaaa!!! 🙁

  3. Mayo 21, 2012    

    a mi no me funciona…

    • Mayo 21, 2012    

      Hola Laura, puede ser por tu plantilla ya creo que no todas son iguales en sus codigos, ami tampoco me funciona 🙁 pero lo solucione usandolo como firma en cada entrada que hago, osea ya lo tengo listo solo para copiar y pegar, creo yo es un poco mas util asi ya que cada autor puede tener su propia firma cada vez que cree una nueva entrada… bueno espero te sirva esto 😛 no soy un experto per ahi vamos.. Saludos 😉

    • Mayo 21, 2012    

      Si Carlos tienes razon no todas las plantillas son iguales,y algunas son mas problematicas que otras.

    • Mayo 21, 2012    

      Jajajaj no wee.. me confundi de Post xD… pense que estava en el otro de la firma xD.. jajajajja Bueno en fin 😛

    • Mayo 21, 2012    

      Jajaja bueno todos tenemos un descache XD! :zombie:

  4. Mayo 23, 2012    

    Hola, tengo una pregunta, si yo quiero ponerlo cuadrado pero con bordes redondos como lo haría, y mi otra pregunta es si con este codigo tambien me queda la flechita esa que apunta al comentarista??

    • Mayo 30, 2012    

      Con este codigo lograras solo los avatares redondos.

  5. Mayo 29, 2012    

    Mil gracias a ti y a tu web eres sagradooooo
    :alaba:

    • Mayo 30, 2012    

      Gracias Raquel por comentar.

  6. Junio 17, 2012    

    Fabulosos, cada día amo más tus trucos, mi blog se ha ido implementado gracias a tí,

    Gracias!!!

  7. Junio 19, 2012    

    ya he puesto los avatares redondos pero ahora quiero poner el borde a los comentarios y la flecha apuntando al avatar como tienes tu, que tengo que hacer?

    • Junio 20, 2012    

      responde please! me gustaría tenerlo.

    • Junio 20, 2012    

      Bueno estos estilos corresponden a atributos CSS si quieres te los paso por email o hago una entrada.

    • Junio 21, 2012    

      como quieras, aunque quizás a mas gente le gustaría verlo y sería mejor un post, si nó mi email esta en mi cuenta.

      muchas gracias! gracias a ti estoy mejorando bastante el estilo de mi blog

    • Junio 22, 2012    

      Ok amigo estos dias te enviare un correo con los codigos que contienen los estilos.

  8. Agosto 15, 2012    

    De 10! muchas gracias, queda muy bonito 😀

    • Agosto 15, 2012    

      Gracias por comentar XD!

  9. Agosto 26, 2012    

    No consigo ponerlo, donde coloco el código??

    Gracias por adelantado.

    • Agosto 28, 2012    

      Ana debes poner todos los codigos encima de ]]></b:skin>

  10. Agosto 29, 2012    

    Muchas gracias, ya lo puse pero no me salen redondos, sino cuadrados. Aquí te dejo un enlace de mi blog: anarodrimen.blogspot.com.es

  11. Octubre 29, 2012    

    Hola, me gustaria saber como hago para que al aumentar el avatar no se me monte encima de nombre del comentarista. Y de paso si me dices como hago para separar hacia abajo el texto del comentario ya seria perfecto (es decir que quede el avatar y la franja con el numero arriba y el texto del comentario mas abajo)

    te lo agradeceria mucho

    • Octubre 31, 2012    

      Weed l tienes que borrar primero todo el estilo de los comentarios que tenias antes.

    • Noviembre 19, 2012    

      Thanks lo vi tarde pero genial, siempre estas muy pendiente…=)

      Aprobecho y te pregunto otra cosa =)

      tengo el avatar de comentarios, y a la vez sustitui la imagen del comentarista anonimo que ofrece blogger, por una un poco mas chula, y se muestra perfecto en los comentarios, pero el el gadget no me parece…. alguna pista sobre eso??

      saludos y gracias otra vez…=9

  12. Ru Ru
    Noviembre 19, 2012    

    Muchas gracias! hace tiempo que lo estaba buscando

  13. Marzo 6, 2013    

    Muchas Gracias ha quedado muy bonito, pero también me gustaría poner los bordes en los comentarios.

  14. Mayo 16, 2014    

    ¡¡Muchas gracias!! Facil y genial explicado ¡¡como tiene que ser!!

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