Seguimos con los comentarios anidados y vamos a establecer las reglas del texto del comentario en si mismo:
.comments .comments-content .comment-content {
  color: #666;
  font-family: Trebuchet MS;
  font-size: 13px;
  line-height: 1.3;
  margin: 0;
  padding: 15px 5px 10px;
}
y los enlaces Responder y Suprimir
.comments .comment .comment-actions a {
  background-color: #FFF;
  border-radius: 8px;
  box-shadow: 0 0 2px #000 inset;
  color: #888;
  float: right;
  font-family: Tahoma;
  font-size: 11px;
  margin: 0 2px;
  opacity: .7;
  padding: 1px 10px 3px;
  text-decoration: none;
  text-transform: lowercase;
}
.comments .comment .comment-actions a:hover {
  opacity: 1;
}
Y los comentarios anidados los separamos un poco hacia la izquierda y les quitamos la secuencia de color par/impar:
.comments .comments-content .comment-replies {
  clear: both;
  margin: 15px 0 0 25px;
}
.comments .comments-content .comment-thread ol li ol li {
  background-color: rgba(255, 255, 255, 0.5) !important;
}
Debajo de todo eso, está el enlace "Responder" y nos queda un enlace que dice "Respuestas" que despliega y contrae las respuestas si es que las hay:
.comments .continue {
  display:inline-block;
}
.comments .continue a {
  background-color: #FFF;
  border-radius: 8px;
  box-shadow: 0 0 2px #000 inset;
  color: #888;
  font-family: Tahoma;
  font-size: 11px;
  margin: 0 2px;
  opacity: .7;
  padding: 1px 10px 3px;
  text-decoration: none;
  text-transform: lowercase;
}
.comments .continue a:hover {
  opacity: 1;
}
.comments .thread-toggle {
  background-color: #FFF;
  border-radius: 8px 8px 8px 8px;
  box-shadow: 0 0 2px #000 inset;
  cursor:pointer
  display: inline-block;
  margin: 0 2px;
  opacity: 0.7;
  padding: 1px 10px 3px;
}
.comments .thread-toggle:hover {opacity: 1;}
.comments .thread-toggle a {
  color: #888;
  font-family: Tahoma;
  font-size: 11px;
  text-decoration: none;
  text-transform: lowercase;
}
.comments .comments-content .comment-thread:empty {
  display:none;
}
Dejamos las flechitas que usa Blogger:
.comments .thread-chrome.thread-collapsed {
  display: none;
}
.comments .thread-toggle .thread-arrow {
  display: inline-block;
  height: 7px;
  width: 10px;
}
.comments .thread-expanded .thread-arrow {
  background: transparent url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAHCAYAAADEUlfTAAAAG0lEQVR42mNgwAfKy8v/48I4FeA0AacVDFQBAP9wJkE/KhUMAAAAAElFTkSuQmCC") no-repeat 0 0;
}
.comments .thread-collapsed .thread-arrow {
  background: transparent url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAHCAYAAADEUlfTAAAAJUlEQVR42mNgAILy8vL/DLgASBKnApgkVgXIkhgKiNKJ005s4gDLbCZBiSxfygAAAABJRU5ErkJggg==") no-repeat 0 0;
}
Lo único que nos faltaría es el formulario de comentarios sobre el que mucho no podemos hacer, solo trataré de centrarlos. Hay dos tipos básicos:
.comment-replybox-thread  { /* el que está debajo de los comentarios */
  padding: 10px 0 0 20px;
}
.comments .comment-replybox-single { /* el que se muestra dentro de los replies */
  padding: 5px 0 0 0px;
}
Un detale extra, el enlace "Carar más ..." que se muestra al final cuando hay demasiados o no se han terminado de cargar:
.comments .comments-content .loadmore {
  background-color: #F0F0F0;
  border-radius: 16px;
  box-shadow: 0 0 10px #888 inset;
  font-family: Tahoma;
  height: 32px;
  line-height: 32px;
  margin: 20px auto;
  text-align: center;
  text-transform: lowercase;
  width: 80%;
}
.comments .comments-content .loadmore a {
  color: #888;
  font-size: 20px;
}
.comments .comments-content .loadmore:hover a {
  color: #000;
}
.comments .comments-content .loadmore.loaded {
  opacity: 0;
  overflow: hidden;
}
Y el resultado final es el que puede verse en este demo online aunque quedan cosas sin resolver con reglas de estilo que no tngo idea qué uso tendrán ya que hacen referncia a clases que no existen o carecen de contenido:
.comments .comments-content .icon.blog-author {
  width: 18px;
  height: 18px;
  display: inline-block;
  margin: 0 0 -4px 6px;
}
.comments .comments-content .comment-body {
  position:relative;
}
.comments .comments-content .owner-actions {
  position:absolute;
  right:0;
  top:0;
}

58 comentarios:

Felipe OI  

Muchas gracias por destripar el nuevo sistema de comentarios! Ahora hasta parece bonito y útil y todo ;)
Una cosilla, hay un problema en el enlace "este demo online", que me lleva a una página con el mensaje "Tu cuenta actual (xxx@yyy.com) no tiene acceso para ver esta página.".

Responder
Domin-Omega  

Quería ver el demo, pero al parecer el blog es privado U.U

Responder
Víctor Emanuel Ortiz  

También estuve haciendo mis pruebas intentando agregar a alguno de mis blogs este nuevo sistema de comentarios y hay cosas que no le encuentro el lado como por ejemplo que el "Mensaje del formulario de comentarios" queda debajo del cuadro de comentarios en vez de arriba como estaba antes. Y cosas así.
Sobre el código CSS .icon.blog-author es una especie de "indicador" del autor, es decir, en las plantillas de las vistas dinámicas muestra un dibujo de un lápiz al lado del nombre del autor. Más específicamente hablando el CSS en cuestión es este (espero que se pueda dejar códigos):

.comments .comments-content .icon.blog-author {
width: 18px;
height: 18px;
display: inline-block;
background-repeat: no-repeat;
background-image: url(URL_IMAGEN);
margin: 0 0 -4px 6px;
}

El "lápiz" en el código fuente de Blogger Buzz es esta imagen en esquema data:

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAASCAYAAABWzo5XAAAAAXNSR0IArs4c6QAAAAZiS0dEAP8A/wD/oL2nkwAAAAlwSFlzAAALEgAACxIB0t1+/AAAAAd0SU1FB9sLFwMeCjjhcOMAAAD+SURBVDjLtZSvTgNBEIe/WRRnm3U8RC1neQdsm1zSBIU9VVF1FkUguQQsD9ITmD7ECZIJSE4OZo9stoVjC/zc7ky+zH9hXwVwDpTAWWLrgS3QAe8AZgaAJI5zYAmc8r0G4AHYHQKVwII8PZrZFsBFkeRCABYiMh9BRUhnSkPTNCtVXYXURi1FpBDgArj8QU1eVXUzfnjv7yP7kwu1mYrkWlU33vs1QNu2qU8pwN0UpKoqokjWwCztrMuBhEhmh8bD5UDqur75asbcX0BGUB9/HAMB+r32hznJgXy2v0sGLBcyAJ1EK3LFcbo1s91JeLwAbwGYu7TP/3ZGfnXYPgAVNngtqatUNgAAAABJRU5ErkJggg==

Algo más: te aviso el link al demo tiene un pequeño fallo :P

Responder
madita  

Me va gustando, pero me queda la duda de los emoticonos.

Responder
Gem@  

Me encanta, es un gran trabajo :)

Responder
Brian Armendia  

JMiur: Ayer me refería al nuevo look de Blooger, y gracias me ayudaste mucho, te lo agradezco.

Responder
JMiur  

El enlace ya está arregaaldo, es el mismo del post anterior.

Ahora, parece que al entrarse, se posiciona al final de la página ¡UFA!!!

Víctor Emanuel Ortiz
No sé como controlar eso del "Mensaje del formulario de comentarios"; efectivamente, queda debajo. El esquema de Blogger es complciado y bastante absurdo.
Gracias por la info de .icon.blog-author :D

madita
Aún no me he fijado en el detalle de los emoticones pero imagin oque podrán agregarse igual. Tengo que probar.

Responder
Adrián J. Messina  

Exacto, justo leí tu comentario.
Se al hacer click en el título de la entrada se posiciona al final de la página. Any suggestions?

Responder
JMiur  

No tengo idea de por qué pasa eso, Adrián. Es un error de Blogger mismo porque ahora, ocurre en todos los blogs que usan este nuevo sistema de comentarios.

Responder
Edch  

Una pregunta, ¿qué debo hacer para que los comentarios anidados no se muestren automáticamente? O sea, quiero que por defecto no se muestren los comentarios, sino luego de hacer clic en "respuestas".

Gracias de antemano.

Responder
JMiur  

No sé. No es sencillo porque eso es parte de un script que manjea Blogger.

Responder
andres  

hola JMiur eres un grande, te agradezco por todos estos buenos aportes, mira que decidi modificar los comentarios aninados tal como indicas, me a resultado bien , tengo un problema y es que no me sirve la posibilidad de responder los comentarios anidados, suprimir si funciona pero como te indicaba responder no me funciona que debo hacer, tambien te molesto para pedirte el favor de que me ayudes a colocar imagen a los comentarios anonimos y organizar los comentarios del mas reciente al mas antiguo , es decir que el mas reciente salga de primeras, demaciada molestia te pongo pero se que eres el mejor gracias.
tengo solo un sector para los comentarios visitalo para que tegas idea de lo que te indico http://razapijaos.blogspot.com/p/libro-de-visitas.html?showComment=1326633202328

Responder
JMiur  

andres:

Responder no funciona porque tu blog utiliza las librerías Prototype-Scriptaculous. Eso, es algo que deberá resolver Blogger y por el momento, no hay nada que hacer, pasa en todos los blogs.

Hasta donde sé, no hay manera de mostrar los comentarios de modo inverso.

Para cambiar la imagen de los comentaristas anónimos, sólo se me ocurre usar JavaScript. No es algo que este muy claro ya que no hay manera de identificarlos; el código que se muestra siempre es el mismo, no hay diferencias entre ellos.

Responder
andres  

JMiur muchas gracias portomarte la molestia de mirar mi consulta, en este blog vi esta utilidad de organizar de forma inverza los comentarios http://chicablogger.com/blogger-permite-que-muestres-tu-avatar-en-los-comentarios/ fijate que en la opcion de redactar los comentarios hay una pequeña pestaña que nos da la opcion de organizarlos de 4 formas:
ordenar por: los mas populares
ordenar por: mejor evaluacion
ordenar por: los mas recientes primero
ordenar por: los mas antiguos primero

esas son gracias JMiur :)

Responder
Amador López Criado  

Hola de nuevo maestro. ¿Hay alguna manera de cambiar el texto predefinido "Cargar más..." que aparece al final de los comentarios por otro del tipo "Leer más comentarios".
Y una pregunta más. ¿Se podrías poner algún enlace como el que aparece en el formato antiguo que te lleve directamente al último comentario? Gracias por tu información y por la ayuda que nos ofreces.

Responder
JMiur  

andres
El sitio que muestras no está alojado en Blogger y el sistema de comentarios que utiliza es el de Disqus; de all´ique tenga esas opciones.

Amador López Criado:
Los textos están en una variable de Blogger que si buscas en tu plantilla, dice esto:
var msgs = <data:post.commentMsgs/>;

Eso, escribe lo siguiente:
var msgs = {'loadMore': 'Cargar más...', 'loading': 'Cargando...', 'loaded': 'No hay más.', 'addComment': 'Agregar un comentario', 'reply': 'Responder', 'delete': 'Eliminar'};

En principio, podrías cambiar la variable de Blogger por ese segundo código y cambiar los textos con cuidado.

Por el momento, no veo forma de direccionar al último comentario ya que carecen de IDs específicos.

Responder
Amador López Criado  

Funciona perfectamente. Mil gracias.

Responder
JMiur  

Perfecto, Amador :D

Responder
ayreonauta  

El único problema grave que sigo viendo es que Firefox e IE hacen foco en el formulario de comentarios al terminar de cargar la página (en tu demo y en mis pruebas).

Responder
JMiur  

Sí, así es. Es algo que venimos comentando hace tiempo y es otra vergüenza de Blogger.

Responder
☠★ Reené Herrera' Lavigne! ★☠  

:X

Responder
andres  

hola JMiur mira que el dia de hoy dejo de funcionar los comentarios anidados de un momento a otro volvieron hacer como eran antes y no se por que, Maestro como los puedo arreglar,
http://razapijaos.blogspot.com/p/libro-de-visitas.html
gracias.

Responder
JMiur  

andres: Fíjate en esta entrada.

Responder
Obed Calva  

JMiur como personalizo donde dice "Añadir comentario"

Responder
JMiur  

Eso no ha cambiado, suele estar en una etiqueta H4 al inicio del includable.

Responder
Iván  

JMiur, buenas, tengo un problema con la fecha de los comentarios, están en inglés, quiero ponerlas en español pero desde la configuracion de blogger no cambia nada, como puedo hacer? Gracias!

Responder
JMiur  

Con el nuevo sistema de comentarios anidados, la fecha aparece siempre en ese idioma; es un error de Blogger mismo.

Responder
Gabriel Barcena  

¡Vos sos grande, Che!
Me ayudó muchísimo en este nuevo enredo de blogger.
Saludos desde la "madre patria".

Responder
encuentroswingers  

Saludos tengo todos estos codigos en mi palntilla pero al momento de colocar los coemntarios anidados estos dejan de funcionar...ayuda.

Responder
Zenix  

Hola, me gustaría saber como aplicarle un tamaño especifico a la caja que sale cuando uno accede a la opción de responder.

JMiur  

Las propeidades para eso deberían estar en esta regla:

.comments .comments-content .comment-replies { }

puedes usar width o margin; depende de lo que quieras hacer.

Responder
Obed Calva  

JMiur como puedo numerar los comentarios así como los tuyos?

Gracias.

JMiur  

Yo no uso este sistema. Si quieres numerar lso anidados de Blogger, fíjate en esta entrada

Responder
Diego Gomez  

Gracias Maistro... hice el ejercicio en mi blog y mira cómo ha quedado... gracias: www.sintemario.com

Responder
Magoplup  

JMiur me preguntaba que posibilidad existe de poder desplazar únicamente la palabra "Añadir comentario" sin que con ella se mueva la palabra "Responder" es que como están ligadas a la misma regla .comments .continue a {...} y forman parte de un javascrit no se si eso sea posible, existe alguna alternativa para lograr eso?

JMiur  

No sé cuáles son esos textos, como es algo que varia, deberías mostrarme el ejemplo.

Responder
Magoplup  

El ejemplo esta aquí mismo en Pruebasurtida

Cuando intentas darle un margin mayor para llevar más al centro la opción "añadir comentario" el botón "Responder" se centra junto con el primero, acá Una imagen para acalrar la idea.

Mi pregunta es ¿Se puede dar estilos al botón "añadir comentario" individualmente y que el mismo siga funcionando con el javascrit?

De esta forma el botón Responder quedaría en su posición actual y seguiría cumpliendo su función

JMiur  

La regla .comments .continue a {} afecta a ambos

La regla .comments ol .continue a {} afectará sólo al botón Responder

Responder
Magoplup  

Muchas gracias JMiur efectivamente esa era la que me faltaba :D

Responder
Magoplup  

¿Son ideas mías o mis navegadores tienen un bung? pero los botones de publicar y vista previa pueden ser personalizados con CSS :P ya hice algunas pruebas por lo que no creo tener tan malo los navegadores para dar tal fallo jaja

JMiur  

No sé a que te refieres.

Magoplup  

Me refería a los botones de Responder y Vista previa que están bajo la caja de comentarios pero por lo visto ya no dejan modificarlos solo fue un momento y ya no mas, aunque debo decir que se veía mejor como estaban antes porque ese color azul no cuadra en muchos blogs el otro estilo se ajustaba a cualquier diseño y color del blog

Responder
Magoplup  

Hola JMiur una vez más por acá esta ocasión para consultar si existe la posibilidad de establecer un espacio para el formulario de comentarios similar al que usas acá, estuve revisando un poco los códigos y esa área era antes usada por la clase comment-form y según pude ver actualmente es manejada por ID bc_0_2T_box .comment-replybox-thread de la clase comment-replybox-thread, intente usar el CSS que usas para manejar esa área

#comment-form-thread {...}

pero no responde por que la ID en el sistema de felipe varia con respecto a la de blogger

Lo que he logrado de momento es colocarlo con este CSS pero solamente funciona con el último comentario por que bc_0_2T_box es variable al número de comentarios de la entrada ya que 0_2 aumenta 0_3, 0_4

#bc_0_2T_box {
height: 200px;
background: #fff;
padding: 8px 0px 45px 7px;
}

¿Crees posible lograr un espacio similar o aprovechar el comment-form anterior?

JMiur  

Lo que muestra esta entrada son loscomentarios anidados de Blogger; el sistema que uso es otro.

Responder
Gùde  

Hola JMiur... en el blog, cuando aún no a comentado nadie es decir cuando aun pone "0 comentarios", el link me lleva a una pagina en la q no hay caja donde se pueda escribir. ¿qué es lo q puede estar fallando?

Ahora mismo si entras en mi blog he puesto una caja de comentarios (la q sale a continuación de los post) para q la gente comente. Pero en un futuro lo suyo es q debajo del post no aparezca esa caja sino solamente el link q te lleve a esa caja. De momento, cuando sí hay comentarios (a partir de "1 comentario") no hay problemas... todo funciona bien con los anidados.

http://piesdechica.blogspot.com.es/

JMiur  

En principio no debería haber problema alguno cuando no hay comentarios. En e mismo blog de pruebas hay una entrada de ese tipo:
http://vagapruebasurtidas.blogspot.com.ar/2007/09/entrada-1.html

Puede ser que tengas alguna condición en tu plantilla que oculta eso. No es algo que pueda verse online.

Gùde  

No veo en la entrada q me dices nada al respecto.

JMiur  

Sólo es un ejemplo mostrando que, en una entrada si comentarios, por defecto, el formulario se ve como en cualquier otra entrada ya que no hay nada que lo impida.

Por eso, si no se ve, debe ser porque hay alguna condición en la plantilla que lo oculta.

Responder
Jeny  

Hola!
Perdona, me gustaría saber si me podrías ayudar en dos cositas:

1. ¿Cómo puedo hacer para que el texto de los comentarios se vea a la izquierda del todo, y no a la derecha de la imagen de comentarista?
2. ¿Cómo puedo hacer para que los comentarios se vean en toda la entrada y no que tenga margen a cada lado de la entrada? Cómo tu lo tienes, que te llega desde el lado izquierdo al derecho, de toda la entrada.

No sé si me explico bien, si no entiendes algo, dimelo. Espero que me puedas ayudar. Muchas gracias!!! :D

Un beso! ^^

JMiur  

En este blog no uso los comentarios anidados de Blogger. Si se trata del demo que muestra la entrada, la imagen del comentarista se encuentra en .avatar-image-container y flota a la izquierda. Si se quiere mostrar al otro lado, debe cambiarse float:left; por float:right; y ajustar el resto de los detalles.

Lo otro es imposible responderlo sin ver el blog en el que está incluido. En términos generales, el ancho depende del ancho del contenedor o contenedores donde se encuentren.

Jeny  

Sí, se trata del demo. No me refiero a la imagen del comentarista, me refiero al texto, que no queda a la izquierda del todo, si no desde la imagen del comentarista hacia la derecha.

Me gustaría que los comentarios quedaran del ancho de la entrada. El enlace es este: http://fantasialiterariajuvenil.blogspot.com.es/2013/09/marcapaginas-xliv.html

Muchas gracias!! ^^

JMiur  

Dos reglas de estilo a agregar a ver si estas, acercan un poco el resultado a lo que quieres obtener:

.comments .comment-block {margin-left: 0;}

#comments {padding: 15px 0;}

La primera elimina el margen del texto; la segunda, amplia el acho de los comentarios.

Jeny  

Muchas gracias! Me ha funcionado perfectamente. Ha quedado mejor de lo que esperaba.. :) Pensaba que no lo iba a conseguir, pero gracias a ti, lo he hecho!!! ^^ ¡Gracias!

Un saludo!!

Responder
elpoetaborracho  

Hola JMiur, no sabía bien si escribirte en la 1ª parte o en la segunda.
La info me ha resultado muy útil, pero yo me encuentro con un pequeño problema que no termino de entender, y no es otro que el de no encontrar las CSS, el no aparece, esta el de _js y el threaded_comment a secas, he mirado por todos los includes que pusiera alfo de comments pero no hay nada, el caso es que las CSS funcionan y lo puedo modificar, pero si no hiciera copy/paste con tu blog estaría en problemas.

La única opción que me queda es volver a la plantilla por defecto de blogger, creo recordar que era el Widget Blog1 el que tocaba los comentarios, pero creo que tocaba más cosas. Con todo tengo copias de seguridad de los CSS.

Otra cosilla que me pasa y que no entiendo bien es que en la plantilla diseño está todo destartalado, no están las barras fijas en un sitio, están como solapándose unas a otras, pero los códigos están y funcionan.

Y the last one, la última publicación se queda algo más estrecha de altura que las anteriores, intenté probar algo con :last-child que se supone que debería afectar al último comentario, sea normal o de respuesta, lo que no se es la clase a utilizar, y al no tener el HTML pues es más complicado, con todo probaré más veces con las clases que tienes publicadas.

Edit: Acabo de leer lo que publicaste a la seman siguiente de esto donde indicas que en algunos blogs no esta el include threated-comments-css, igual me paso a disqus que he visto que la gente lo usa bastante, todavía no tengo el blog dado de alta en buscadores.

Muchas gracias y disculpa este tres en uno.

JMiur  

Hace ya mucho que el CSS no es parte de la plantilla. Puedes seguir la idea en esta entrada.

En cuanto a la forma en que se muestran los widgts en al pantalla de diseño, depende de las propeidades que tengan y hay algunas reglas que pueden agregarse para mejorar la forma en que se ven pero, son reglas que hay que ver una por una. Mira esta entrada

elpoetaborracho  

A ver, te cuento, el 1er link lo había leído, pero hablama del HTML, yo no tengo nada con etiquetas de lista, y si lo maneja blogger, ¿cómo podría modificar sin conocer el código, es decir, sin haberte leído?; el 2º no, pero no tengo claro si me servirá o no.
He estado mirando la ventana de Diseño, donde estába todo mal, y me he puesto a trastear con el inspector de elelmentos de firefox, y resulta que los gadgets se mueven si los mueves en tu blog. Tengo dos widgets externos, follow by mail y sharebuttons, que aparecen en el foooter uno debajo de otro, los apañé para que estuvieran a la misma altura uno al lado del otro, y eso afecta a la distribución en la ventana diseño, luego me puse a subirlos justo donde acaba el post antes de los comentarios, y ahí fue cuando desaparecieron.
No se porque pensaba que eso era sólo como una referencia visual, que no cambiaba la estructura, pero veo que no es así.
Sabiéndolo me quedo más tránquilo, pero entonces ¿tiene qué ser asi? porque lo suyo es compartir cuando has leido el post, no obligarte a cascarte los comentarios, como de hecho tú lo tienes.

Gracias de nuevo por la velocidad, espero me orientes un poco para no perderme en excso.

JMiur  

La ventana de diseño es un iframe que refleja las propiedades del blog pero, a la vez, posee reglas de estilo especiales que son las que deberías chequear y ver una por una. Por ejemplo si existe un elemento cuyo ID es outer-wrapper, esta regla lo afecta tanto en el blog como en la ventana de diseño:
#outer-wrapper {........}
pero esta otra, sólo afecta ese elemento en la ventana de diseño y no en el blog:
body#layout #outer-wrapper {........}
eso es lo que explica el segundo enlace.

Las definciones de estilo de los elementos agregados por Blogger pueden ser sobrescritos; puede hacerse colocando esas reglas de estilo al inicio del body por ejemplo o al final del head, depende de cuales sean.


Responder
Pedro PC - Admin.  

Cogí solo parte del código, lo necesario para el botón (retráctil) responder.
Gracias y un saludo

Responder

¿Quiere dejar un comentario?

recuerde que los comentarios están siendo moderados y serán publicados a la brevedad ...

Todos los archivos y demos alojados en Fileden han sido redireccionados y deberían estar funcionando correctamente.
De todos modos, también puede accederse a ellos a través de SkyDrive

Nota: sólo los miembros de este blog pueden publicar comentarios.

Si le gusta ir a lo seguro utilice este botón para abrir los comentarios en una ventana modal en esta misma pagina.

Si añora tiempos idos, use este enlace para agregar un comentario al viejo estilo ...

 
CERRAR