Mil Trucos Blogger

Estilos para los Comentarios Anidados

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

Los nuevos comentarios anidados de Blogger trajeron consigo la perdida total de los estilos en los comentarios que muchos bloggers teniamos en nuestros blogs, en este contexto hoy les quiero compartir estilos CSS para mejorar el aspecto de sus comentarios.

El resultado final del truco es el siguiente:


Para añadir este aspecto a tus comentarios solo debes agregar arriba de ]]></b:skin> lo siguiente:

/* Start Comment Style Code http://www.spiceupyourblog.com */
.comments{clear:both;margin-top:10px;margin-bottom:0;font-family:Arial;line-height:18px;font-size:13px}
.comments .comments-content{margin-bottom:16px;font-weight:normal;text-align:left}
.comments .comment .comment-actions a,.comments .comment .continue a{display:inline-block;margin:0 0 10px 10px;padding:0 15px;color:#424242 !important;text-align:center;text-decoration:none;background:#fede72;border:1px solid #fec648;border-radius:2px;height:26px;line-height:28px;font-weight:normal;cursor:pointer}
.comments .comments-content .comment-thread ol{list-style-type:none;padding:0;text-align:none}
.comments .comments-content .inline-thread{padding:0}
.comments .comments-content .comment-thread{margin:8px 0}
.comments .comments-content .comment-thread:empty{display:none}
.comment-replies{margin-top:1em;margin-left:40px;background:#fff}
.comments .comments-content .comment{margin-bottom:0;padding-bottom:0}
.comments .comments-content .comment:first-child{padding-top:16px}
.comments .comments-content .comment:last-child{border-bottom:0;padding-bottom:0}
.comments .comments-content .comment-body{position:relative}
.comments .comments-content .user{font-style:normal;font-weight:normal}
.comments .comments-content .user a{color:#0E6284;font-weight:normal;text-decoration:none}
.comments .comments-content .icon.blog-author{width:18px;height:18px;display:inline-block;margin:0 0 -4px 6px}
.comments .comments-content .datetime a{color:#0E6284;font-size:12px;float:right;text-decoration:none}
.comment-content{margin:0 0 8px;padding:0 5px}
.comment-header{font-size:18px;background-color:#f1f1f1;border-bottom:1px solid #e3e3e3;padding:5px}
.comments .comments-content .owner-actions{position:absolute;right:0;top:0}
.comments .comments-replybox{border:none;height:230px;width:100%}
.comments .comment-replybox-thread{margin-top:0}
.comments .comment-replybox-single{margin-top:5px;margin-left:48px}
.comments .comments-content .loadmore a{display:block;padding:10px 16px;text-align:center}
.comments .thread-toggle{cursor:pointer;display:inline-block}
.comments .comments-content .loadmore{cursor:pointer;max-height:3em;margin-top:0}
.comments .comments-content .loadmore.loaded{max-height:0;opacity:0;overflow:hidden}
.comments .thread-chrome.thread-collapsed{display:none}
.comments .thread-toggle{display:inline-block}
.comments .thread-toggle .thread-arrow{display:inline-block;height:6px;width:7px;overflow:visible;margin:0.3em;padding-right:4px}
.comments .thread-expanded .thread-arrow{background:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAc AAAAHCAYAAADEUlfTAAAAG0lEQVR42mNgwAfKy8v/48I4FeA0AacVDFQBAP9wJkE/KhUMAAAAAElFTkSuQmCC") no-repeat scroll 0 0 transparent}
.comments .thread-collapsed .thread-arrow{background:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAA AcAAAAHCAYAAADEUlfTAAAAJUlEQVR42mNgAILy8vL/DLgASBKnApgkVgXIkhgKiNKJ005s4gDLbCZBiSxfygAAAAB JRU5ErkJggg==") no-repeat scroll 0 0 transparent}
.avatar-image-container{background:url(https://lh5.googleusercontent.com/-Wmy6bwNKzbo/T0miLZkuJsI/AAAAAAAAChc/orbwMGHyBxA/s51/arrow.png) top right no-repeat;float:left;vertical-align:middle;overflow:hidden;width:65px !important;height:51px !important;max-width:65px !important;max-height:51px !important}
.comments .avatar-image-container img{padding:2px;border:1px solid #ccc;width:45px !important;height:45px !important;max-width:45px !important;max-height:45px !important}
.comments .comment-block{margin-left:65px;position:relative;border:5px solid #e3e3e3;border-radius:8px}
@media screen and (max-device-width:480px){.comments .comments-content .comment-replies{margin-left:0}}
/* End Comment Style Code http://www.spiceupyourblog.com */

Espero que les haya sido de utilidad este pequeño truco y sigan visitando Mil Trucos Blogger.

Via/Spice Up Your Blog

0
Shares

Relacionados...

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

52 Comentarios

  1. Carlos Carlos
    junio 1, 2012    

    Muy bueno estos estilos ya los agregue a mi blog 🙂

    • junio 1, 2012    

      Carlos gracias por comentar.

  2. junio 5, 2012    

    Excelente. Muchas gracias por el aporte.

    • junio 6, 2012    

      Gracias a ti por comentar Marco..

  3. Anonymous Anonymous
    junio 7, 2012    

    retroceder en la opción de respuesta no funciona porque en mi

  4. junio 16, 2012    

    que tal como estas, consultando no me queda bien en mi blog por que es … que estoy haciendo mal no me funciona

    • junio 19, 2012    

      Amigo primero debes borrar los estilos que tenias antes.

      Veo que usas una version modificada de la plantilla que publique de Taringa!,borra todo el CSS que añadi para el estilo de los comentarios y luego de eso si agregas este codigo.

  5. junio 18, 2012    

    nome funciona…
    te dejo el link de mmi blog pa que cheques ya lo agregue el codigo pero nada

    • junio 19, 2012    

      Administrador lee el comentario anterior.

  6. Afm Afm
    agosto 5, 2012    

    Juvinao tengo problemas en mi plantilla y es que no me salen los comentarios anidados y salen otros y encima sin boton de responder entonces en la plantilla de taringa V5 si salen que lo publicastes tu quisiera saber como cojo el codigo y lo paso a la otra plantilla.

    Necesito ayuda.

    Un saludo

  7. agosto 9, 2012    

    Me gusta mucho, pero si lo aplico mis comentarios pierden la numeración… ¿Habrá alguna solución?

    • agosto 9, 2012    

      Prueba con los trucos de numeracion que tengo en el blog y dime si todavia te sigue presentando problemas 😕

  8. agosto 11, 2012    

    Hola oie no he podido agregar los estilos en mi blog,no se si sea por la plantilla que este usando alguna libreria Jquery o algo asi, habra solucion? NO me deja cambiar estilo, Destacar comentarios de autorn tampoco tengo en comentarios las opciones de suprimir y responder.
    Porfavor ayudame a saber si es algo que hago mal o es la plantilla que no me deja, saludos y gracias.

    http://www.checaesteblog.blogspot.com

  9. Afm Afm
    agosto 13, 2012    

    Juvinao me interesaria una numeracion para este estulo de comentarios si a ser posible porque el que pusistes no vale para este.

    Un saludo.

  10. agosto 22, 2012    

    acabo de ponerlo y se ve genial 😀 gracias ! 🙂

    • agosto 22, 2012    

      Pauli acabo de ver tu blog e hicistes un gran trabajo combinando este estilo de comentarios con el avatar redondo,gracias por comentar :love:

  11. agosto 24, 2012    

    A que te refieres con : Para añadir este aspecto a tus comentarios solo debes agregar arriba de ]]> lo siguiente:

    • agosto 24, 2012    

      Debes agregar el codigo antes de la etiqueta ]]>b:skin

  12. agosto 24, 2012    

    dONDE LO COLOCO?

    • octubre 31, 2012    

      Amigo que tanto sabes de HTML?

    • diciembre 18, 2012    

      jaja, sin ofender

      Excelente tu comentario Juvinao xd

  13. nomo nomo
    octubre 31, 2012    

    veamos q tal

  14. noviembre 3, 2012    

    quedo espectacular gracias 😀

    • noviembre 3, 2012    

      Adrian es genial este estilo,es el que yo uso en este sitio..

      Saludos :winky:

  15. noviembre 7, 2012    

    Hola amigo,
    Ahora mismo no tengo puesto este estilo, pero al ponerlo no quedán igual a como lo tienes tu, se que es porque hace conflicto con los estilos que ya tengo puestos y tengo que borrarlos, pero esque no se.
    Me podrias explicar que es lo que tengo que borrar para despues añadir estos estilos y que se incrementen a la perfeccion?
    Gracias de antemano.

    • noviembre 20, 2012    

      No sabes?

    • enero 24, 2013    

      Despues de mucho, los agregé ^^

    • enero 28, 2013    

      Disculpa Vhila por no haberte respondido pero tu comentario se me habia pasado por alto, es que recibo muchos comentarios al dia.

      Saludos 🙂

  16. Anonymous Anonymous
    noviembre 26, 2012    

    Mi caja de comentarios esta como desactivada no puedo escribir nada… ayudame porfa!!!

  17. Anonymous Anonymous
    noviembre 26, 2012    

    te dejo mi blog: mi-aula-musical.blogspot.com
    ayudame porque no puedo ingresar los comentarios..
    Gracias

    • noviembre 28, 2012    

      Amigo yo veo que hay comentarios en tu blog, fijate bien puede que esten desactivados los comentarios solo en una entrada.

  18. diciembre 17, 2012    

    excelente amigo me sirvió bastante

  19. diciembre 18, 2012    

    Sos un grande amigo, gracias por toda la ayuda! voy agregar el blog a mi “webs amigas”

    • diciembre 18, 2012    

      Facundo gracias por tus palabras y por el enlace 😛

      Saludos

  20. enero 15, 2013    

    Un aporte fabuloso, amigo, ya lo tengo puesto en mi blog, y funciona de lujo, solo una pregunta, ¿sabrías como darle color al fondo de los globos donde aparecen los comentarios? (Por ejemplo como la pág. http://www.intercambiosvirtuales.org)

    • enero 17, 2013    

      Jesus no creo que darle color al fondo combine mucho, pero si gustas te ayudo via correo electronico

  21. febrero 12, 2013    

    [ma]esta muy chido[/ma]

  22. febrero 12, 2013    

    [ma]muy buenos tips para blogs[/ma]

  23. febrero 14, 2013    

    Mi plantilla de mi blog es negra y edite todos los colores para ke se viera bien ya que en varias partes se veia blanco. Pero al lado del avatar a la derecha keda un espacio blanco eso es lo unico que me falta para que se vea bien en mi blog. Se puede modificar ahi ?

  24. febrero 14, 2013    

    Mi plantilla de mi blog es negra y edite todos los colores para ke se viera bien ya que en varias partes se veia blanco. Pero al lado del avatar a la derecha keda un espacio blanco eso es lo unico que me falta para que se vea bien en mi blog. Se puede modificar ahi ?

    • febrero 14, 2013    

      Hola Loko Ser ayudo a Hayder Juvinao a algunos comentarios en los que puedo y me gustaria ayuudarte en este. EL caso es que he entrado en tu Blog y no veo ese espacio en blanco en ningun lao o estoy ciego o no esta. El caso que si sigue estando me gustaria que me pasaras una foto señalandomelo con algo que lo pudiese ver hazlo con paint y listo.

      Espero averte ayudado.

      Un saludo!

  25. febrero 15, 2013    

    Hola Alberto Franco. que bueno que estes ayudando a Hayder. haci no se le hace tan pesado el trabajo xd. Y con respecto a que no se veia ningun espacio en blanco era por habia eliminado ese efecto jejej.
    Pero ya lo agrege y lo edite los colores, solo me falta al lado de los avatares al lado de la derecha, aqui te dejo una captura [img]http://i1144.photobucket.com/albums/o488/loko_ser/espacioblancoenlosavataresenestilosparaloscomentariosanimados_zps629d9925.png[/img]
    Ojala puedas ayudarme

    • febrero 17, 2013    

      Claro que puedo ayudarte y de hecho ya tengo la solicion!

      Para quitar ese fondo blanco y la flecha ya que va junto tienes que irte al código HTML y buscar el siguiente enlace: “url(“https://lh5.googleusercontent.com/-Wmy6bwNKzbo/T0miLZkuJsI/AAAAAAAAChc/orbwMGHyBxA/s51/arrow.png”) no-repeat scroll right top transparent” Una vez buscado y encontrado lo eliminas guardas los cambios y ya no te saldra eso que te molesta.

      Espero averte ayudado, y cualquier cosa ya sabes 🙂

      Un saludo!

  26. febrero 25, 2013    

    Hay si me salio. Solo habia que eliminar la url de la imagen.
    [ma]Gracias te pasaste Alberto Franco[/ma]

    • febrero 26, 2013    

      Gracias por tu comentario, y si Alberto Franco es un gran usuario 🙂

      Saludos

  27. marzo 27, 2013    

    hola muy buen tutorial
    mi consulta es la siguiente
    como ago para que los botones en vez que sean de color amarillo sean de color rojo
    y el texto sea blanco, o que los botones sean negros con su letra color roja..?

  28. septiembre 20, 2013    

    Muchas gracias, Hayder por el tutorial, me ha encantado sobre todo porque es muy configurable y eso es ideal para adaptarlo al diseño de nuestro blog.

    Un saludito 🙂

  29. julio 1, 2014    

    Hola, Hayder. Muy buen post, me ha sido muy útil. Gracias. sin embargo tengo un problema al dejar una respuesta a los comentarios. Resulta que la letra de mis respuesta es blanca y el fondo de la casilla también. Podrías indicarme cómo camibar este aspecto. Gracias
    Te dejo el enlace para que le eches una mirada si puedes. http://horizontefemenino.blogspot.com/2014/06/divagaciones.html#comment-form

    • julio 20, 2014    

      Maria pero yo veo muy bien los comentarios de tu blog

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