Blogger. Configurar comentarios anidados. Lista de clases. | Oloblogger Es muy probable que tuvieras personalizada la parte de los comentarios de tu blog y que con el nuevo...

13 de enero de 2012

Blogger. Configurar comentarios anidados. Lista de clases.

Es muy probable que tuvieras personalizada la parte de los comentarios de tu blog y que con el nuevo sistema de comentarios anidados con respuestas, este se haya ido al garete. Lo probable es lo primero, pero si los tenías así, lo segundo es seguro.

Ocurre que el nuevo sistema incorpora un buen montón de código de todo tipo y ha cambiado radicalmente la nomenclatura de todas las clases que antes controlaban el aspecto de los comentarios. Si miráis en vuestro código, los .comment-author, #comment-block y todas esas clases que usábamos hasta ahora, siguen estando y el problema no es que se hayan borrado. El problema es que ya no sirven para nada porque los nuevos comentarios no están sujetos a ellas sino a otras con otros nombres.

Ante esto tenemos dos soluciones.

La primera que es la que mandan los cánones, sería definir las nuevas clases con las propiedades que nos interesan. La verdad es que en esta ocasión Blogger se ha portado bien dentro de lo que cabe y nos ha incluido la lista completa dentro de un includable que podéis localizar con Expandir plantillas de artilugios seleccionado y buscando la cadena threaded_comment_css.

Si queréis modificar algo lo podéis cambiar en ese mismo sitio según la guía que publico al final de esta entrada, pero si no vais a cambiar demasiadas cosas, quizás os convenga incluir en  la parte CSS de la plantilla sólo las clases a modificar y las nuevas propiedades. Así dejamos el código original de Blogger por si alguna vez lo necesitamos.

Esto último se puede hacer teniendo presente que las propiedades que existan en la parte del includable que no se modifiquen en la parte CSS, persistirán.

Esto es que si por ejemplo hay un borde en la clase .comments del includable y nosotros no hacemos ninguna referencia a border en la clase .comments de nuestro CSS, el borde se dibujará igualmente. Siguiendo este ejemplo habría que incluir en nuestro CSS un .comments {border: 0;} para que se anulara.

Esta es la lista completa que como podréis ver cuando miréis allí, ya incorpora una serie de propiedades por defecto para cada clase.

Para que se entiendan las anotaciones, para mi un comentario es lo que antes se entendía como tal, un bloque, lo que queda totalmente a la izquierda con el estilo estándar. El comentario puede incluir respuestas o no. Estas respuestas son las que aparecen dentro del bloque de un comentario y se ven con un sangrado o margen izquierdo.

La segunda solución más chapucera y para una emergencia, otro día.

Contenedor general de todo el artilugio
.comments {}

Contenedor general de comentarios. Excluye encabezamiento
.comments .comments-content {}

Enlaces Responder (y Suprimir)
.comments .comment .comment-actions a {}
.comments .comment .comment-actions a:hover {}

Lista principal de comentarios. Cada elemento (li) incluye 1 comentario y sus respuestas
.comments .comments-content .comment-thread ol {}

En combinación con otras clases, insertar un padding para que quede de menor ancho
.comments .comments-content .inline-thread {}

Bloque de respuestas a un comentario. Incluye botón para desplegar
.comments .comments-content .comment-replies {}

Bloque interior de respuestas a un comentario
.comments .comments-content .comment-thread {}
Idem anterior para ocultar el bloque cuando no hay respuestas
.comments .comments-content .comment-thread:empty {}

Aspecto general de cada comentario/respuesta
.comments .comments-content .comment {}

Diferencia padding y border para el primer/último comentario
.comments .comments-content .comment:first-child {}
.comments .comments-content .comment:last-child {}

No lo encuentro en uso. Posiciona relativamente
.comments .comments-content .comment-body {}

Bloque de autor+icono+fecha
.comments .comments-content .comment-header {}
Nombre y enlace al autor del comentario/respuesta
.comments .comments-content .user {}
Un icono relacionado con el autor, actualmente sin contenido
.comments .comments-content .icon.blog-author {}
Fecha/hora del comentario/respuesta
.comments .comments-content .datetime {}

El texto de cada comentario/respuesta. Salen siempre con estilo blockquote si este está definido en la plantilla
.comments .comments-content .comment-content {}

Lo desconozco. Parecen los enlaces para suprimir el comentario por parte de quién lo grabó
.comments .comments-content .owner-actions {}

Formularios para escribir comentarios/respuestas
.comments .comments-replybox {}
.comments .comment-replybox-single {}
.comments .comment-replybox-thread {}

Desconocido para mí
.comments .continue {}
.comments .continue a {}

Enlace para mostrar más comentarios cuando hay más de 200
.comments .comments-content .loadmore {}
.comments .comments-content .loadmore.loaded {}

Enlace para plegar/desplegar respuestas
.comments .thread-toggle {}
Iconos flecha para plegar/desplegar respuestas
.comments .thread-expanded .thread-arrow {}
.comments .thread-collapsed .thread-arrow {}

Contenedor avatar comentarista
.comments .avatar-image-container {}
Imagen avatar comentarista
.comments .avatar-image-container img {}

¿Vemos otro post al azar por si le encuentras utilidad o quizás prefieres ser más metódico y suscribirte a nuestras entradas por correo? También puedes imprimir este artículo y por supuesto compartirlo en redes sociales si fue de tu agrado.

Compartir
Copy URL

Y muchos más artículos interesantes si nos sigues en...

follow us in feedly

66 comentarios :

  1. No hay una forma más facil de volver al diseño de los comentarios de antes? :s

    ResponderEliminar
    Respuestas
    1. "La segunda solución más chapucera y para una emergencia, otro día." Estoy en ello... ;)

      Eliminar
    2. Que gracioso, yo quiero que mi plantilla tenga los comments anidados y tú los quieres quitar, no es gracioso como hay unos afortunados y otros desafortunados por las mismas causas inversas... T_T

      Eliminar
    3. En este enlace encontrarás tres artículos explicando cómo instalar los comentarios anidados. Suerte.

      Para aquellos a los que no se les cargó el nuevo sistema

      Eliminar
    4. lo que yo quiero es tener los comentarios anidados pero con el diseño de antes. Esta bien que indiques que es cada cosa, pero no se cambiarlo para que salga como antes lo tenía :/

      Eliminar
  2. Hola Oloman,

    Yo no tenía personalizados los comentarios y me han quedado mucho mas chapuceros que antes. ¿ No es posible que Blogger haga mas adelante modifibles algunas de estas características desde "configuración" ? Parece bastante inútil cambiar todas estas nomenclaturas y solo poderlas modificar directamente en código, ¿no?...

    ResponderEliminar
    Respuestas
    1. No recuerdo cómo los tenías antes, pero ahora te salen de la manera habitual. Otra cosa es que no te gusten como quedan ahora porque haya cambiado algo el tamaño de letra o algún que otro margen.

      De todas formas, si quieres mi opinión, yo creo que Blogger no va a poner ningún sistema de configuración como el que propones, de la misma manera que no existe por ejemplo para realzar los gadgets de la barra lateral como tú los tienes.

      Eliminar
  3. Y cual parte del CSS controla el formulario para responder, no lo encuentro!!!

    ResponderEliminar
    Respuestas
    1. .comments .comments-replybox {}
      .comments .comment-replybox-single {}
      .comments .comment-replybox-thread {}

      ¿Va arreglándose el asunto Yurika-Chan? :D

      Eliminar
    2. Si, ya he logrado que aparezcan los textos que tenia sobre el formulario y los emoticones, pero no logro que me queden encima, aun sigo tratando

      Eliminar
  4. Excelente amigo.... leí esto de la nueva estructura de los comentarios y que cambiaron las clases pero no entendía para que servia cada cosa y ahora con tu guía que pusiste se en que corresponde cada sección del CSS...

    Muchas gracias ahora solo necesitare algo de paciencia para volver a diseñar mi zona de comentarios jeje.

    Saludos.

    ResponderEliminar
  5. Hola, no se si te habrás dado cuenta o solo me pasará a mi... Pero al dar click para ir a una entrada se carga la entrada y directamente me manda al final de la página :S no debería cargarse la página y dejarme arriba? como se ha hecho toda la vida?, he probado y esto pasa tanto en el mio, como en tu blog y en ciudadblogger

    ResponderEliminar
    Respuestas
    1. Al dar clic ¿dónde? ¿en un título? ¿desde Home? No veo qué es lo que quieres decir.

      Eliminar
  6. Hola Oloman,

    No me salen los nuevos comentarios anidados, ¿Sabes por qué?

    Gracias

    ResponderEliminar
    Respuestas
    1. ¿Ya viste la anterior entrada sobre como instalarlos en plantillas modificadas?

      Eliminar
    2. Ala!! Es verdad. Si es un perro me muerde.

      Gracias

      Eliminar
  7. Me gustaria saber como hago para que la respuesta de autor del blog salga en cursiva y de otro color.
    Gracias.

    ResponderEliminar
    Respuestas
    1. Eso es más complicado ahora. He intentando encontrar eso en el nuevo código y creo haberlo encontrado, pero la verdad es que no me atrevo a tocarlo :S Máxime cuando es posible que todavía cambien algo para arreglar algunos fallos que se están produciendo.

      Eliminar
  8. Como se podria reducir el espacio que sobra abajo de "publicar" y "vista previa". Hay un espacio considerable.

    En tu blog seria el espacio que hay entre "publicar" y "vista previa" y "Enlaces a esta entrada"

    ResponderEliminar
    Respuestas
    1. Te mando para otro sitio, aunque no sé si el código que se muestra allí como referencia, permanece operativo tras este cambio en los comentarios. No pierdes nada por probarlo porque lo peor que puede pasar es que el flujo de código no pase ahora por allí y no haga nada.

      Ciudad Blogger

      Eliminar
  9. Me gusta como se ve el resultado en este blog, no es lo mejor, pero hay que ver que ya es bastante el cambio y la mejora, buen trabajo blogger, pero aún puedes mejorar aún más, no piensan igual?

    ResponderEliminar
  10. Hola,ahora si que la he liado!!

    Mira el espacio que hay entre el formulario de entrada de comentarios y el final del blog (he cogido unas entradas al azar)

    http://descargaloquequieres.blogspot.com/2011/10/descargar-aguila-roja-4-temporada.html
    http://descargaloquequieres.blogspot.com/2011/10/descargar-cuentame-como-paso-13.html
    http://descargaloquequieres.blogspot.com/2011/12/descargar-inmortals-espanol-megaupload.html

    Lo raro es que no pasa en todas las entradas, sino en algunas porque sino mira estas otras

    http://descargaloquequieres.blogspot.com/2011/10/descargar-killing-1-temporada-espanol.html
    http://descargaloquequieres.blogspot.com/2011/12/descargar-inmortals-espanol-megaupload.html

    Buah tio si logras ayudarme con esto.... por favor

    ResponderEliminar
    Respuestas
    1. Se te tiene que haber ido un número de más por aquí:
      iframe[height=2150] {
      height: 2150px;
      }

      Eliminar
  11. Dios!!!! eres el amo, muchas gracias

    ResponderEliminar
  12. Hice el cambio me resulto pero se me desabilito las imagenes del comentario anónimo como al recupero?

    Ejemplo : http://www.futboltrujillano.com/2012/01/conoce-al-manucci-2012.html

    ResponderEliminar
    Respuestas
    1. Parece que ya lo has descubierto ;)

      Eliminar
    2. si ya lo acabo de arreglar mas bíen donde cambio el color de la letra de los comentarios al color del normal (ejemplo el color de aca) y si se puede justificar?

      Eliminar
    3. El color creo que en el contenedor general te funcionará, pero para justificar también y no fallar, te recomiendo que uses la clase
      .comments .comments-content .comment

      Eliminar
    4. maestro desde que hice el cambio para losnuevos comentarios se me desabilito la caja de comentarios de ahi en adelante en las entradas que hago ya no sale para comentar nose que paos ya intente todo pero nada que se me habilita de nuevo

      Eliminar
    5. incluso he bajado esa plantilla y la he puesto a otro blog y funciona normal para comentar la vuelvo a poner la misma pero sigue fallando

      Eliminar
    6. ¿También has descubierto cómo arreglar lo de las cajas de comentarios? Ahora mismo me salen sin problemas.

      Eliminar
  13. Debo ser la única a la que blogger no le agregó los estilos a las cajas ha-ha! Muy gracioso blogger! En verdad busco la cadena de css de los comentarios, y nada. No existe. Artilugios expandidos, lo busqué con solo css uno por uno... y nada! ¿¿Alguien que quiera pasarmelos??

    ResponderEliminar
    Respuestas
    1. No, no eres la única. Parece ser que están quitando ese CSS y lo están añadiendo como información interna (Más info), pero con estas clases puedes personalizar al gusto. Sólo añádelas a tu parte CSS y ya vas dando propiedades. Navegando por el anterior enlace podrás encontrar también una entrada con un ejemplo.

      Eliminar
    2. hola tengo el mismo problema pero no he podido solucionarlo, no entendi muy bien lo de la otra pagina.
      gracias

      Eliminar
    3. Me voy más abajo a contestarte

      Eliminar
  14. Buenas Oloman, que tal??
    Vaya historieta esta de los comentarios anidados! De momento ya he personalizado algunas cosas, pero hay otras que se me resisten.
    Tengo algunas dudas, a ver si tú sabes darme algo de luz.
    Parece que en mi blog aparecen dos formularios diferentes, es decir, cuando no hay comentarios en las entradas se ve con los estilos que ya tenía hechos, pero cuando hay comentarios se oculta ese formulario y aparece otro. Lo se por qué se quedan los bordes del formulario oculto en la parte baja.
    ¿Hay dos formularios? ¿Se puede borrar uno?
    Veo que en tu blog te pasa algo parecido, no?

    Gracias de nuevo Oloman!!
    Mi blog (http://loquemesaledelospeones.blogspot.com/)

    ResponderEliminar
    Respuestas
    1. Lo siento Oloman no se si me he explicado bien.
      Me lleva frito esto del formulario, no encuentro salida, jajá, ahora me he dado cuenta que cuando terminas de comentar te sale otra clase diferente, madre!!!!
      Tampoco puedo meter texto antes del formulario ni imagen, estoy no hay quien lo entienda, en fin ya se hará la luz.

      Eliminar
    2. Pues sí. La cosa es más complicada ahora. Si te fijas en las clases de este mismo post, hay tres. Todavía no me he metido a fondo pero sospecho que una es para los comentarios nuevos, otra para las primeras respuestas a un comentario y otro para las siguientes.

      Además, creo que se conserva la clase anterior (comment-form) para cuando no hay comentarios. En total serían entonces cuatro a formatear.

      Con respecto a los textos antes del formulario, habrá que buscar otro sitio porque si te das cuenta, este se va moviendo según dónde pinches para responder y eso es lo que trastoca el sistema anterior.

      Eliminar
  15. oloman, no me aparece esto :( aaaaa :( no podré cambiarlos jamás sniffff! T.T
    mi blog es este http://nattituu.blogspot.com

    ResponderEliminar
    Respuestas
    1. ui no se pego el codigo, pero no me aparece eso de css :(

      Eliminar
    2. Esto que publico aquí no es visible. Son las clases que tendrías que añadir para configurar los distintos aspectos de los nuevos comentarios. Por supuesto, además de añadir la clase, después tienes que darle las propiedades que quieras: margin, padding, border, etc.

      Eliminar
    3. :O que complicado snif u.u veré que puedo hacer gracias por tu ayuda! :D, puedo preguntarte otra cosa? es que tengo un problema, puse el comment box de face en mi blog, pero por alguna razón los comentarios que hicieron en mi última entrada en el comment box, aparecen en todas las entradas :( no se por que :(

      Eliminar
    4. Te recomiendo que veas este enlace de Ciudad Blogger, que publicó sobre ello. Yo nunca he probado ese gadget y no tengo ni idea de cómo funciona.

      Eliminar
    5. mil gracias oloman! que haríamos sin ti! gracias :D

      Eliminar
  16. Hola Oloman. Pues te cuento que por alguna razón hace tiempo me decidí por Disqus, pero la verdad estos comentarios anidados me gustaron mucho y pues aprovechando que aún no tenía muchos comentarios pues decidí regresarme a los comentarios de Blogger. Obviamente llevo toda la madrugada porque tuve bastantes problemas de código ja, pero gracias a ti, a Potro y a Karla de Compartidísimo lo he logrado en uno de mis blogs, ya para los demás solo cambio colores je. Por cierto, tomé tu plantilla de base, ya la iré modificando, espero no haya problema por eso. Y muchas gracias por estos códigos, sin ellos no se que hubiese hecho. Te invito a que observes de rápido: http://goo.gl/anzEs

    ResponderEliminar
    Respuestas
    1. Aunque Blogger nos de disgustos de vez en cuando, sigue teniendo cosas buenas y personalmente, estoy encantado con este nuevo sistema. Y no, no hay problemas con "copiarme" el código ;)

      Eliminar
    2. Si, la verdad está genial este nuevo sistema de comentarios, nunca debí irme jaja. Bueno, espero que conforme vayan saliendo nuevos trucos lo vaya diferenciando un poco para que no se vea tan frontal la copiada =D

      Eliminar
  17. Hola disculpa, me podrías decir como poner la flecha que esta a la izquierda del "comment-block", es que no se en que parte de la plantilla ubicarme =/

    ResponderEliminar
    Respuestas
    1. ¿La flecha? ¿Te refieres a la que yo tengo con forma de triangulo entre el avatar y el texto o a otra cosa?

      Eliminar
  18. Si esa misma, no me supe especificar bien.

    ResponderEliminar
    Respuestas
    1. Se puede hacer con bordes, pero esta fue mi manera de hacerlo:

      .comment-thread li .comment-block:before {
      position: absolute;
      left: -26px;
      content: "\25C4";
      font-size: 30px;
      color: #EACB71;
      }

      Eliminar
  19. Hola Oloman, como hago para sacar el fondo de la la caja de comentarios que dicho sea de paso no sé si pertenece a esta pero me apareció hace poco y no lo puedo sacar. Solo me aparece y me sobresale de las páginas, acá te mando el link para que lo puedas ver.

    http://fdtenradio.blogspot.com.ar/p/musica_23.html

    Traté de desactivar los comentarios de las páginas pero no hay caso, solo se achica nada más. Espero me puedas ayudar. Gracias.

    ResponderEliminar
    Respuestas
    1. Hola. No sé si con mi tardanza di lugar a que encontraras por tí mismo la solución o si es que borraste la página, pero yo ya no veo comentarios en esa página. Por si acaso, la manera de quitarlos es editando la página en cuestión y en el menú de la derecha, acceder a Opciones y después marcar "No permitir, ocultar los existentes
      Modo de redacción"

      Eliminar
  20. ¡Hola! Oloman hace tiempo que busco un sistema de comentarios como el que puedo observar en tu blog "comentarios y respuesta", pero la verdad es que no se como hacerlo, si me puedes dar alguna explicación te lo agradeceria mucho. Un saludo, Antonio

    ResponderEliminar
  21. Hola Oloman,
    soy nueva en esto del blog, la plantilla que tenía para mi blog no tenía habilitado eso de los comentarios anidados, bueno habilité la opción pero cuando respondía a algún comentario, mi respuesta aparecía como un nuevo comentario.
    Finalmente di deshacer a los cambios y continué con el antiguo formato ¿cómo podría evitar que esto me siga sucediendo?
    Gracias.

    ResponderEliminar
  22. No sé si entendí bien lo que dices porque los comentarios anidados o funcionan o no funcionan,m pero cuando puedes pinchar en Responder, es que todo va bien y se publica como este mismo que acabo de hcer yo, es decir, como respuesta.

    ResponderEliminar
  23. hola oloman , soy una pedazo de torpe porque no encuentro ningun de los de los codigos que me dices que locura , mira que he hecho cambio pero esto se me hace imposible

    ResponderEliminar
    Respuestas
    1. ¿Qué es exactamente lo que no encuentras?

      Eliminar
  24. hola se que esta publicacion es de hace mucho.
    logre activar la respuesta a los comentarios pero aparecen sin borde ya estan como antes y eso no me gusta, los quiero como tu los tienes, cada uno separado.
    no logro encontrar el css y realmente quiero arreglar eso.
    te agradeceria me ayudaras

    ResponderEliminar
    Respuestas
    1. Si no entendí mal, tu problema se va a solucionar con esto... al menos parcialmente, ya que no te funcionan todavía los comentarios anidados. Una vez los tengas, con la guía que puse aquí podrás modificar/incluir el CSS necesario para ponerlos a tu gusto.

      Eliminar
  25. He descargado e instalado un modelo personalizado del tipo Responsive Blogger Template y al activar de nuevo los comentarios anidados va todo bien salvo el hecho que cuando clicco por ejemplo en responder no pasa nada, es decir no responde el link. Evidentemente el autor ha bloqueado esta función. Tienes idea de cual puede ser la solución al problema?
    Gracias

    ResponderEliminar
  26. Hola Marisa

    El sistema de comentarios anidados tiene muchos trozos de código en la plantilla interrelacionados entre sí y es muy complicado saber cuál falta. Porque no creo que estén bloqueados, sino simplemente que no está actualizado.

    Lo más práctico es editar la plantilla y borrar todos los "includable" relacionados con "comments". Blogger los restaura a los últimos valores cuando los borras, es decir, que los repone con la última versión.

    Por si no estás muy ducha con estas cosas, mejor haz una copia de seguridad antes de intentar esto y así poder volver a tu actual plantilla en caso de problemas.

    ResponderEliminar