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
30 comentarios
leviomat · mayo 13, 2012 a las 11:16 pm
Muy bueno, gracias
Juvinao · mayo 14, 2012 a las 12:18 am
Gracias por comentar amigo 😀
Laura Morales · mayo 21, 2012 a las 2:05 pm
No me funcionaaaaaaa!!! 🙁
Laura Morales · mayo 21, 2012 a las 2:08 pm
a mi no me funciona…
Carlos Chamorro · mayo 21, 2012 a las 3:08 pm
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 😉
Juvinao · mayo 21, 2012 a las 3:55 pm
Si Carlos tienes razon no todas las plantillas son iguales,y algunas son mas problematicas que otras.
Carlos Chamorro · mayo 21, 2012 a las 4:19 pm
Jajajaj no wee.. me confundi de Post xD… pense que estava en el otro de la firma xD.. jajajajja Bueno en fin 😛
Juvinao · mayo 21, 2012 a las 4:29 pm
Jajaja bueno todos tenemos un descache XD! :zombie:
Hobbie Media · mayo 23, 2012 a las 12:47 am
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??
Juvinao · mayo 30, 2012 a las 2:25 am
Con este codigo lograras solo los avatares redondos.
Raquel91011 · mayo 29, 2012 a las 6:39 pm
Mil gracias a ti y a tu web eres sagradooooo
:alaba:
Juvinao · mayo 30, 2012 a las 2:26 am
Gracias Raquel por comentar.
Susumiyaharuhi03 · junio 17, 2012 a las 6:34 pm
Fabulosos, cada día amo más tus trucos, mi blog se ha ido implementado gracias a tí,
Gracias!!!
CSnts17 · junio 19, 2012 a las 12:45 pm
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?
CSnts17 · junio 20, 2012 a las 5:04 pm
responde please! me gustaría tenerlo.
Juvinao · junio 20, 2012 a las 7:43 pm
Bueno estos estilos corresponden a atributos CSS si quieres te los paso por email o hago una entrada.
CSnts17 · junio 21, 2012 a las 7:25 am
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
Juvinao · junio 22, 2012 a las 3:35 pm
Ok amigo estos dias te enviare un correo con los codigos que contienen los estilos.
Nani-chan · agosto 15, 2012 a las 5:27 am
De 10! muchas gracias, queda muy bonito 😀
Juvinao · agosto 15, 2012 a las 7:52 pm
Gracias por comentar XD!
Ana Rodriguez · agosto 26, 2012 a las 7:33 am
No consigo ponerlo, donde coloco el código??
Gracias por adelantado.
Juvinao · agosto 28, 2012 a las 7:39 pm
Ana debes poner todos los codigos encima de ]]></b:skin>
Ana Rodriguez · agosto 29, 2012 a las 7:13 am
Muchas gracias, ya lo puse pero no me salen redondos, sino cuadrados. Aquí te dejo un enlace de mi blog: anarodrimen.blogspot.com.es
Weed l · octubre 29, 2012 a las 1:40 am
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
Juvinao · octubre 31, 2012 a las 7:52 pm
Weed l tienes que borrar primero todo el estilo de los comentarios que tenias antes.
Weed l · noviembre 19, 2012 a las 11:35 pm
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
Ru · noviembre 19, 2012 a las 11:17 pm
Muchas gracias! hace tiempo que lo estaba buscando
Cristina · marzo 6, 2013 a las 4:54 pm
Muchas Gracias ha quedado muy bonito, pero también me gustaría poner los bordes en los comentarios.
Hayder Juvinao · marzo 7, 2013 a las 9:38 pm
Cristina, ya tengo publicado ese tutorial, aquí te dejo el enlace
http://www.miltrucosblogger.info/2013/01/agregar-bordes-los-avatares-de-los.html
NATALIA RICO · mayo 16, 2014 a las 5:36 pm
¡¡Muchas gracias!! Facil y genial explicado ¡¡como tiene que ser!!