Mil Trucos Blogger

Añadele estilo a los comentarios anidados

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

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 == &quot;item&quot;'> <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.

0
Shares

Relacionados...

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

23 Comentarios

  1. Juan Juan
    febrero 5, 2012    

    De verdad muy bueno,lo usare cuando rediseñe el blog :buenpost: :]

    • febrero 5, 2012    

      Juan me alegra mucho que te guste la entrada,Saludos.

  2. Anonymous Anonymous
    febrero 11, 2012    

    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!

    • febrero 11, 2012    

      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.

  3. febrero 24, 2012    

    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.

    • febrero 24, 2012    

      Coral Black que bueno que te haya servido a la primera,Saludos 😛

  4. marzo 13, 2012    

    Gracias realmente ha funcionado, mi pregunta es: ¿Se puede cambiar de alguna manera el circulo del avatar? ¿Como agrandarlo, estirarlo…etc?

  5. Anonymous Anonymous
    marzo 20, 2012    

    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…

  6. abril 3, 2012    

    voy a probar en mi blog

    • abril 3, 2012    

      Este comentario ha sido eliminado por el autor.

    • abril 3, 2012    

      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

    • abril 3, 2012    

      Insertado diseño…

      Muchas gracias me gusta mucho.

      Despues con algo de tiempo ver que modifico de los css.

      Muchas gracias

    • abril 7, 2012    

      Gracias a ti por comentar,modificalo a tu gusto es muy facil amigo,Saludos.

  7. junio 8, 2012    

    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 =)

  8. octubre 22, 2012    

    ¿Y cómo le hago para dejar los comentarios como los tuyos?

  9. octubre 31, 2012    

    Gracias por la info!!

  10. diciembre 10, 2013    

    Gracias por compartir (o)

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