Hace ya un par de dias que he agregado un nuevo estilo de comentarios en mi blog,en el cual los avatares son redondos y los comentarios estan enmarcados y separados por lineas azules.
El codigo pertenece a Karla de Compartidisimo que muy generosamente lo ha compartido con todos nosotros.
Para añadir estos estilos a tu blog ve a la Edicion HTML de tu blog y pegas después de ]]></b:skin> lo siguiente :
<b:if cond='data:blog.pageType == "item"'> <style type='text/css'> .comments .comments-content .comment-content{text-align:left;} .comments .comments-content .inline-thread {background: #eef2f2; border:1px solid #cedadc;}.comments .comments-content .comment {border-bottom: 1px solid #b2d1d6 !important;} .comments .avatar-image-container {background: url(http://4.bp.blogspot.com/-SGVRdTVEU_I/TZtDiTE9xNI/AAAAAAAAFYI/Oj8zWFsfs-Y/s1600/icono-persona-c.png) no-repeat center center; border:3px solid #cedadc;} .comments .avatar-image-container, .comments .avatar-image-container img { -webkit-border-radius:30px;-moz-border-radius:30px;border-radius:30px; } </style> </b:if>
La parte que puse de rojo son los valores que puedes editar, para cambiar los colores, donde en:
.comments .comments-content .inline-thread: puse el color del borde (border) y fondo (background) de las respuestas de los comentarios, por eso se ven en «cajitas».
.comments .comments-content .comment: puse el borde (border) que se aplica al fondo de cada comentario, independientemente que sea repuesta o no.
.comments .avatar-image-container,puse la imagen que aparece debajo de cada avatar, si alguien usa imagen transparente en su avatar, se verá ésta como fondo, o bien cuando no haya ningún avatar, por ejemplo en comentarios de usuarios que comenten como anónimos.
Si prefieres el texto justificado en los comentarios, quita todo lo que resalté de azul: .comments .comments-content .comment-content{text-align:left;} esa regla ya la envía Blogger.
Espero que os guste el tutorial y que sigan visitando Mil Trucos Blogger.
23 comentarios
Juan · febrero 5, 2012 a las 8:40 pm
De verdad muy bueno,lo usare cuando rediseñe el blog :buenpost: :]
Juvinao · febrero 5, 2012 a las 9:03 pm
Juan me alegra mucho que te guste la entrada,Saludos.
Anonymous · febrero 11, 2012 a las 2:25 am
Hola, yo quiero preguntar, se podra quizá hacer que los avatares de los comentarios tomen forma de triangulo, bueno yo veo que los de este blog son redondeados y los de otros blogs tambien son asi y otros son cuadrados, pero se padrán «atriangulados»?
Lamento si lo que pregunto es algo imposible o muy dificil, bien pues yo de eso de html no se nada pero me gustaria un estilo así y veo que ustedes saben mucho acerca de estas cosas, agracias por su ayuda!
Juvinao · febrero 11, 2012 a las 4:42 pm
Pues mira no se si sea posible o si es facil o dificil no lo se la verdad por lo que intentare hacer eso que me pides y si tengo exito publicare un tutorial ok.
Coral Black · febrero 24, 2012 a las 3:11 pm
Muy bueno ^^
Lo acabo de poner en mi blog y me va perfectamente.
Primera vez que un código me va a la primera jejeje. Soy nula con los códigos ^^
Gracias por compartirlo.
Juvinao · febrero 24, 2012 a las 9:05 pm
Coral Black que bueno que te haya servido a la primera,Saludos 😛
La Guitarra es Facil · marzo 13, 2012 a las 10:30 pm
Gracias realmente ha funcionado, mi pregunta es: ¿Se puede cambiar de alguna manera el circulo del avatar? ¿Como agrandarlo, estirarlo…etc?
Juvinao · marzo 14, 2012 a las 4:05 pm
La Guitarra es Facil si claro que si puedes acomodarlo a tu gusto,de hecho tengo una entrada con un truco en el que le podras aplicar efecto zoom y de rotacion.
Aca la URL de la entrada.
http://www.miltrucosblogger.info/2012/03/efecto-zoom-con-rotacion-en-los.html
Anonymous · marzo 20, 2012 a las 4:18 am
Buenas noches, sabes voy entrando por primera vez a tu blog y muy buenas explicaciones sin embargo tengo dos problemas el primero no salen las imágenes y el segundo no me sale el botón se suprimir los tendre ocultos o algo por el estilo ??
Espero y me puedas responder a mis dudas gracias…
Juvinao · marzo 20, 2012 a las 3:56 pm
Los estilos en los comentarios anidados no interrumpen con ninguna funcion de dichos comentarios asi que lo que te sugiero es que agregues los comentarios con otro metodo publicado en Ayuda Bloggers.
http://www.ayuda-bloggers.info/2012/01/nueva-funcion-en-blogger-comentarios.html
Admin Lalala · abril 3, 2012 a las 6:17 pm
voy a probar en mi blog
Admin Lalala · abril 3, 2012 a las 6:18 pm
Este comentario ha sido eliminado por el autor.
Admin Lalala · abril 3, 2012 a las 6:19 pm
O sea… es el recuadro con color de fondo de los comentarios anidados?
Bueno… a enredarme con el codigo de mi blog de nuevo…
Gracias
Admin Lalala · abril 3, 2012 a las 6:31 pm
Insertado diseño…
Muchas gracias me gusta mucho.
Despues con algo de tiempo ver que modifico de los css.
Muchas gracias
Juvinao · abril 7, 2012 a las 5:00 pm
Gracias a ti por comentar,modificalo a tu gusto es muy facil amigo,Saludos.
AtaSystem · junio 8, 2012 a las 11:44 am
es increible todo lo que hay en este blog la verdad. MUY BUEN TRABAJO Juvinao me gustaria saber como as puesto el icono cuando comentas para saber que eres el admin un saludo =)
Juvinao · octubre 23, 2012 a las 1:06 am
AtaSystem el tutorial es el siguiente:
http://www.miltrucosblogger.info/2012/04/destacar-los-comentarios-del-autor-en.html
SergioFM · octubre 22, 2012 a las 6:17 pm
¿Y cómo le hago para dejar los comentarios como los tuyos?
Juvinao · octubre 23, 2012 a las 1:07 am
Sergio este es el tutorial:
http://www.miltrucosblogger.info/2012/05/estilos-para-los-comentarios-anidados.html
FACUNDO SEGOVIA · octubre 31, 2012 a las 5:08 pm
Gracias por la info!!
Juvinao · octubre 31, 2012 a las 9:06 pm
😎
Mesa78 · diciembre 10, 2013 a las 11:28 am
Gracias por compartir (o)
Hayder Juvinao · diciembre 18, 2013 a las 1:43 pm
Gracias a ti por comentar 😉