Numerar los nuevos comentarios Blogger sin JavaScript. Opción con sub-índices. | Oloblogger Ahora que disfrutamos de los nuevos comentarios -algunos estamos como McGyver en un desguace con ellos- la mayoría de scripts instalados ant...

16 de enero de 2012

Numerar los nuevos comentarios Blogger sin JavaScript. Opción con sub-índices.

Ahora que disfrutamos de los nuevos comentarios -algunos estamos como McGyver en un desguace con ellos- la mayoría de scripts instalados anteriormente para numerarlos han dejado de funcionar, así que creo que es un momento ideal para presentar una alternativa en mi opinión mucho más ventajosa.

Se trata de una interesante propiedad CSS2 llamada content que nos permite insertar casi cualquier tipo de contenido delante o detrás de un elemento cualquiera y que incluye un no menos preciado complemento denominado counter.

La combinación de ambas la leímos hace un tiempo entre otros sitios en Vagabundia y como ya habréis adivinado, con esas dos cosas es con lo que vamos a crear un contador y situarlo en cada comentario.

Como sólo vamos a utilizar CSS, el sistema tendrá una carga mucho más rápida que con JavaScript y además, no tendremos que tocar mas que la parte de estilo de nuestra plantilla; la menos arriesgada si la pifiamos.

La cuestión es encontrar una clase a partir de la cual poner el contador a cero sin problemas y otra por la que cada vez que pasemos se vaya imprimiendo e incrementando ese valor sin saltos ni duplicidades.

Pero una vez desgranado el nuevo estilo de los comentarios anidados esto se hace más fácil.


Si queréis probar ya y ver cómo funciona esto sobre la marcha, sólo tenéis que insertar en la parte CSS de la plantilla (antes de ]]></b:skin>) lo siguiente:

.comments-content {
counter-reset: contarcomentarios;
}

.comment-thread li:before {
content: counter(contarcomentarios);
counter-increment: contarcomentarios;
float: right;
font-size: 24px;
color: #666666;
}

Lo que hace esto casi que se puede leer:

  1. Cuando se inicia el bloque general de comentarios (.comments-content) un contador que hemos llamado contarcomentarios se activa y se pone con un valor inicial de 1.
  2. Luego, cada vez que el flujo del código pasa por un comentario de cualquier nivel, bien sea un comentario principal o una respuesta (.comment-thread li), content nos meterá delante (:before) del cuerpo del comentario, el número por el que va el contador en ese momento.
  3. A continuación se incrementa en una unidad el contador (counter-increment).

La siguiente vez que el código lea otro comentario o lo que es lo mismo, pase de nuevo por un .comment-thread li, se repetirán los pasos 2 y 3, pero cada vez con un mayor valor.

El resto del estilo (float/font-size/color) sirve sólo para dar estilo al numerito que se mostrará. Si por causa de otras modificaciones en vuestros comentarios el número no quedara en el lugar exacto dónde deseáis, siempre podéis añadir en ese mismo sitio márgenes para reubicarlo.


Cuando probéis esto -si la impaciencia no os ha podido ya- observaréis que se numeran todos los comentarios y respuestas sucesivamente, sin distinción de si son de los primeros o de las segundas.

Esto para mí y seguramente para otros que con frecuencia usen esos números como referencia a algún comentario concreto, puede ser un inconveniente. Pensad que cuando se introduzca una reply, todos los comentarios y respuestas que haya más abajo se renumerarán.

Para solucionar esto nos complicamos un poco más la vida y reestructuramos el anterior código para hacer una numeración distinta como si fueran capítulos y secciones. Para eso tenemos que echar mano de otras clases distintas para distinguir cuándo contamos comentarios (contarcomentarios) y cuando respuestas (contarbis)

.comment-thread ol {
counter-reset: contarcomentarios;
}

.comment-thread li:before {
content: counter(contarcomentarios,decimal);
counter-increment: contarcomentarios;
float: right;
font-size: 24px;
color: #666666;
}

.comment-thread ol ol {
counter-reset: contarbis;
}

.comment-thread li li:before {
content: counter(contarcomentarios,decimal) "." counter(contarbis,lower-latin);
counter-increment: contarbis;
float: right;
font-size: 18px;
color: #666666;
}


Si preferís otra presentación para la numeración, podéis cambiar el decimal y/o el lower-latin. Los valores posibles son:
  • decimal: Números decimales, comenzando de 1.
  • decimal-leading-zero: Números decimales completados con ceros iniciales (01, 02, 03, ..., 98, 99).
  • lower-latin: Letras en minúsculas (a, b, c, etc.)
  • upper-latin: Letras en mayúsculas (A, B, C, etc.)
  • lower-roman: Números romanos en minúsculas (i, ii, iii, etc.)
  • upper-roman: Números romanos en mayúsculas (I, II, III, etc.)


La única diferencia con repecto a los sistemas con JavaScript es que perdemos el enlace permanente al comentario, que por cierto no he visto en las fechas del nuevo sistema y que sí estaban en las del anterior. Pero eso es algo que aunque podríamos arreglar nosotros haciendo unas pequeñas modificaciones, esperaré a que arregle Blogger para no interferir en las actualizaciones que posiblemente quedan por venir. En cualquier caso las ventajas de este método de numeración creo que superan a los inconvenientes.

¿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

149 comentarios :

  1. ¡Muy buena idea! Para el procesado de formularios quizás no es crucial, pero para un blog por ejemplo y lo de mostrar el número arriba tiene su utilidad y hasta puede ser más liviano que JS.

    Un saludo.

    ResponderEliminar
    Respuestas
    1. ¿Puede? Estoy convencido de que CSS es más ligero que JS y además en este caso, te ahorras ir cambiando luego la parte HTML, que no se sabe nunca cuando Blogger va a cambiar algo y te va a dejar fuera de la actualización por no reconocer el código original. Yo siempre me quedo fuera de todo por ese motivo y tengo que estar metiendo el código a mano. Saludos Dayer ;)

      Eliminar
  2. Una muy buena entrada oloman como siempre,te felicito.yo por ahora decidi quedarme con el sistema anterior que lo tengo todo hasta ver si hay algun cambio por blogger.saludos

    ResponderEliminar
  3. Buenas Tardes, Olomann.

    Todo perfecto pero una pregunta... tengo que poner los dos códigos antes de (]]>) o sólo el último? Como pones que reestructuraste el primer código, por eso mi duda?

    Cuál de los dos tengo que poner? Los dos?

    Saludos.

    ResponderEliminar
    Respuestas
    1. Ok, puse solamente el 2do código y me funciona a mil maravillas. Gracias Oloman.

      Eliminar
    2. Son dos opciones distintas de numeración: continua o con sub-índices

      Eliminar
  4. Oye tengo un problema con los comentarios lo que pasa es que la caja de comentarios no se muestra solo la opción responder .este es el blog de pruebas donde estoy buscando la solución del problema.

    http://descargasxr.blogspot.com/
    Gracias de antemano OLO

    ResponderEliminar
    Respuestas
    1. No tiene buena pinta. He visto el código y no aparece el que genera las cajas para responder. Creo que te falta algo en el código del artilugio que genera toda esta parte, pero no sabría decirte qué.

      Eliminar
    2. Eso quiere decir que estoy perdido?

      Eliminar
    3. Un poco... La verdad es que no sé lo que es y por eso no puedo hacer un diagnóstico sin equivocarme. Se me ocurre que puedes ver en un blog que crees nuevo, cual es el código completo (bastante largo) que genera todo el tema de comentarios. Luego tomas ese código y lo pegas en tu plantilla en lugar del que ahora tienes, pero no sé cual es tu nivel de destreza con esto y la operación es "peligrosa". Por supuesto, si finalmente lo haces así, obtén una copia de seguridad de tu plantilla actual por si acaso y utiliza Vista Previa tras cada prueba antes de guardar.

      Y esta es una posibilidad, porque otra es que he leído que algunos tienen problemas cuando usan gadgets oficiales de Twitter (no botones), pero no sé si los síntomas son como los tuyos. Prueba esto último primero que es más fácil. Vamos, que si tienes algún gadget de estos que lo quites.

      Eliminar
    4. Te agradesco tu ayuda lastima que no soy tan habil con esto GRACIAS. Bro

      Eliminar
  5. Muchas gracias. Me funciona perfectamente con Firefox y con Chrome, sin embargo con Internet Explorer 8 no visualizo los numeros.

    ResponderEliminar
    Respuestas
    1. En mi IE8 si se ven ¿lo arreglaste?

      Eliminar
    2. Debe ser un problema domestico pues desde otros equipos si los visualizo. Lo curioso es que desde el equipo que no veo la numeración de mi blog si veo la del tuyo.
      Por cierto que tambien dá problemas al descargar más comentarios cuando exceden de 200. En fin "cosas" del Explorer a las que ya nos vamos acostumbrando.

      Eliminar
    3. Lo de descargar más de 200 comentarios no es sólo cosa de IE. Tengo un par de personas afectadas con eso, pero les ocurría precisamente por NO haber cambiado a los nuevos comentarios. En mi blog no tengo ese problema y SÍ los nuevos comentarios.

      Eliminar
    4. A mi me funciona perfectamente con Firefox y con Chrome, a partir del comentario 200 los descarga en grupos de 50 sin ningún problema, ademas mantine la secuencia de numeración, cosa que antes no hacia. No me ocure lo mismo con el Explorer con el que no consigo cargarlos ni en la plantilla con comentarios numerados ni en otras sin numerar.

      Eliminar
    5. ¿Algo funciona con IE? :) La verdad es que pensaba que había visto eso con Explorer, pero ahora lo he comprobado y a mí tampoco me los carga bien. Me larga un aviso de que un script está haciendo funcionar muy lenta la página. Entonces hago caso omiso, espero y cuando por fin los caga, intento pinchar en "Cargar más". Y ahí termina la aventura... No carga los restantes por más tiempo que lo deje. Creo que Blogger (Google) sólo prueba las cosas en Chrome (Google de nuevo).

      Eliminar
  6. Hace un momento enviaba esto desde Vagabundia a Twitter, ahora lo he hecho desde aquí ;)

    Seguramente habrá quienes prefieran usar subíndices.

    Sólo tengo una observación Oloman:

    Al hacerlo de este modo no coincidirán el número de comentarios totales (que se muestran en el mensaje en la página principal y arriba de los comentarios) con el último comentario. Pienso que, tal vez sería bueno cambiar ese mensaje por otro pensando en ese punto...

    Cuando te desplazas hacia abajo, para agregar un comentario te guías usando la numeración para saber cuantos faltan para llegar al último, teniendo como base el número de comentarios totales, espero explicarme.

    Habría que analizarlo bien :)

    Saludos ;)

    ResponderEliminar
    Respuestas
    1. Es correcta tu observación, pero cuando vi que no coincidían pensé ¿y qué? Tú ahora me das un posible inconveniente, pero por ejemplo, para mí no lo es. Yo me fijo en la barra lateral de desplazamiento para ver si me queda mucho :)

      Es cierto que puede ser un problema para alguien, pero en todo caso opino que menor. A mí personalmente me resulta más claro ver qué es un comentario y qué una respuesta.

      En cualquier caso están las dos opciones para que cada cual elija la que más le convenza. Gracias una vez más Karla.

      Eliminar
    2. Implementé recién lo de los comentarios y efectivamente Karla tiene razón en ese punto, sin embargo, hice una chapucilla y dió resultado. En donde dice
      a name='comments', inmediatamente después viene h4, allí eliminé el contenido y solo dejé dentro data:commentLabel.

      De manera que como son entradas resumidas, dice nº comentarios (reales), y al entrar a la página solo dice comentarios sin decir el nº total. Se entiende??
      Borré el comentario anterior porque no me salieron los codigos :)
      Saludos.
      Gabriela.

      Eliminar
    3. A lo que te refieres es a que directamente te has cargado el mensaje del número total de comentarios y así nadie puede notar que hay diferencia.

      Pero... ¡se te olvidó el de la página de Inicio! :D
      Yo no me complicaría con eso...

      Eliminar
    4. entiendo lo que quieren decir, pero a mi me gusta mas este diseño, tengo un blog de novelas y me baso en la cantidad de comentarios para publicar un nuevo capítulo, antes no respondía los comentarios directamente porque perdía la cuenta de los comentarios reales.

      AHORA eso no importa, solo tengo que ver el último comentario sin importar la cantidad que haya realmente y así mis firmantes estarán mas felices y yo también =)

      Eliminar
  7. Buenas, copié el primer código y lo pegué antes de ]]> pero no me aparece nada.

    ResponderEliminar
    Respuestas
    1. No tienes habilitado tu perfil. No puedo ver tu sitio por si descubro algo...

      Eliminar
    2. Este código es para el nuevo sistema de comentarios. Tú todavía tienes el antiguo, por eso no te funciona. Habría que cambiar las clases. El problema es que yo ya no tengo las antiguas a mano. A ver si me puedes pasar la dirección de un post tuyo con comentarios.

      Eliminar
    3. http://adquiriendoestilo.blogspot.com/2011/12/lo-mejor-del-ano-2011.html

      Eliminar
    4. #comments-block {
      counter-reset: contadorcomentarios;
      }
      #comments-block dt {
      position: relative;
      }
      #comments-block dt:before {
      content: counter(contadorcomentarios, decimal);
      counter-increment: contadorcomentarios;
      position: absolute;
      right: 0;
      top: 0;
      color: #888;
      font-family: Arial;
      font-size: 30px;
      }

      Eliminar
    5. Buenas de nuevo, ese me funcionó perfectamente pero me he dado cuenta de que surge un problemilla. Los visitantes que dejan un comentario desde su cuenta de Blogger por ejemplo, tienen su imagen al lado. Al aplicar ese código se me desplaza esa imagen a la izquierda ¿cómo corrijo eso?

      Aquí un ejemplo: http://adquiriendoestilo.blogspot.com/2011/12/por-navidad-regala-un-polvo.html

      Eliminar
    6. Podríamos mover el número o mover el avatar. Lo más sencillo es lo primero. INcluye en #comments-block un position: relative; que se me olvidó. Luego si el número es el que no te queda bien, muévelo con top y right.

      Eliminar
    7. Lo siento, pero no tengo mucha experiencia en esto y no consigo hacer lo que dices, no veo ningún cambio. El código lo dejo así:

      #comments-block {
      position: relative;
      counter-reset: contadorcomentarios;
      right: 20;
      top: 20;
      }
      #comments-block dt {
      position: relative;
      }
      #comments-block dt:before {
      content: counter(contadorcomentarios, decimal);
      counter-increment: contadorcomentarios;
      position: absolute;
      right: 0;
      top: 0;
      color: #cc0000;
      font-family: Lobster;
      font-size: 30px;
      }

      Eliminar
    8. El right: 20; y top: 20; bórralos de dónde están (#comments-block ) y en el tercer selector (#comments-block dt:before) cambia esos valores de right y top que están en 0 por 20px, por ejemplo. Luego ya ajustas.

      Eliminar
    9. El número si lo consigo mover pero no el avatar que es lo que quiero. Se queda fijo.

      Gracias por la ayuda.

      Eliminar
    10. Busca esta parte en tu código y cambia el valor de left por cero (o el que quieras) ;)
      #comments-block .avatar-image-container {
      height: 37px;
      left: -45px;
      position: absolute;
      width: 37px;

      Eliminar
    11. Ya me funcionó, muchas gracias.

      Eliminar
  8. Pues yo llevaba tiempo queriendo cambiar a la numeración con css y al final me va a "obligar" blogger...
    Gracias por ir desgranando el nuevo sistema de comentarios, que blogger introdujo sin fijarse ni explicar nada. Para que me lance al cambio ya solo falta que Blogger vuelva a poner las fechas con la misma zona horaria del blog en vez de ese horrible formato "Jan 16, 2012 10:20 AM" (aunque me temo que esto quedará así).

    ResponderEliminar
    Respuestas
    1. Eso y alguna otra peguilla que todavía queda por ahí: scriptaculous, gadgets Twitter...

      Eliminar
  9. Me gustaría que fuera sin las letras y que solo sea números.

    ResponderEliminar
    Respuestas
    1. En el posts se explican dos opciones. En la segunda se detalla cómo cambiar las letras por números.

      Eliminar
  10. Genial!!!! Ya lo puse. Muchas Gracias.
    Gabriela.

    ResponderEliminar
  11. ¿Porque la letra "G" en minusculas aparecereá cortada en los replies? -___- dejare un ejemplo en este mismo comment

    ResponderEliminar
    Respuestas
    1. gato, grafiti, gotas .___. se cortan

      Eliminar
    2. Ya vi que era, el line-height, le subi .3 más para que no me pasara eso, gracias oloman, excelente post, ya esto jugueteando con esto de los replies xD

      Eliminar
    3. Tú mismo :D De nada...

      Eliminar
  12. Tengo un problema. Y es que siempre cuenta 1. La respuesta si que pone el decimal.

    ¿alguna idea?

    Mi Blog

    ResponderEliminar
    Respuestas
    1. Pues no sé qué ocurre, porque he comprobado el código y está bien. Lo único que veo extraño son los comentarios que hiciste. En la parte de estilo no van con <-- -->, sino con /* */. Cámbialos por si eso estuviera anulando algún selector o propiedad.

      También he visto un cierre sin apertura (-->), aunque tampoco he repasado la plantilla entera y puede que eso esté bien.

      Eliminar
    2. Ya está! Es debido a que tenia los comentarios del HTML en . Los he cambiado a /* */ y funciona!!

      Muchísimas gracias Oloman

      Eliminar
    3. Me alegro que fuera eso. Otra cosa nos hubiera complicado la vida mucho ;)

      Eliminar
    4. Eres un maestro! Gracias de nuevo!

      Eliminar
  13. Un genio! Mil graciassss!!!

    ResponderEliminar
  14. Excelente aporte, una maravilla haber caído en tu blog!

    ResponderEliminar
  15. Llevaba bastante tiempo buscando algo para numerar los comentarios pero nunca funcionaba.Gracias por la ayuda!!lo he puesto en mi blog y funciona perfectamente!

    ResponderEliminar
  16. En plantillas nuevas ¿Que he de modificar para mover el numero?
    Conseguí que el código funcione bien y cambiar el color pero no se como mover el numero.
    Gracias de antemano.

    ResponderEliminar
    Respuestas
    1. Es conocido que odio las plantilas del nuevo diseñador ¡grrrr! :)

      De todas formas puedes "mover" un poco esos números incluyendo en .comment-thread li:before, un margin-top (o -right, -left, -bottom) con el valor en px que necesites. Recuerda que también puede ser un valor negativo.

      Eliminar
  17. Creo que dije mal "plantillas nuevas", si que son plantillas nuevas pero no tienen nada que ver con las vistas dinàmicas.
    Lo consegui cambiando el "float:right;" por "position:relative;top:Npx;right:Npx"(siendo N el numero que se quiera y px pixels, tamben se puede definir en porcentaje cambiando px por %).
    Si que me ha servido la entrada para ver que puedo colocar elementos (imagenes y enlaces) dentro de cualquier elemento (cuerpo.cabecera,comentarios...) del blog solo sabiendo su clase. Lo cual es un gran avance para mi y que te agradezco profundamente.
    De hecho hace muy poco que empece con mi blog (www.blueoriol.com) y no conozco mas que un par de etiquetas muy utiles (una para insertar imagenes y enlaces y otra con condicionales para definir en que sitios del blog se ocultan y muestran cosas), pero me estoy aficionando mucho, ya que al final, simpre consigo lo que queria, lo cual es muy gratificante.
    Sobretodo gracias a paginas como la tuya que explican etiquetas para los menos expertos. En breve tambien incluire en mi blog una seccion explicando como esta hecho y que etiquetas utilice y en donde. Ya que a mi me han dado ese conocimiento gratuitamente yo seguire con ese ejemplo.

    ResponderEliminar
    Respuestas
    1. Pues eso mismo que vas a comenzar a hacer con la publicación de cómo modificas tu blog, fue el principio de este ;) Gracias por comentar como lo solucionaste finalmente, efectivamente no entendí bien lo de "nuevas".

      Eliminar
  18. Por cierto, es una tonteria, pero me ha ayudado mucho el hecho que le llamen "etiquetas" HTML porque las imagino asi (como rectangulos en capas) y el poder visualizarlo lo hace mas facil.

    ResponderEliminar
  19. Hola Oloman muy buenas por estos lares. Resulta que verás, después de aplicar el tip para que en mi blog aparezcan los comentarios anidados (sin el nuevo código gracias al blog de JMiur) acabo de retirar el sistema de numeración con javascript de tu otra entrada porque quiero introducir éste (mucho más fácil donde va a parar), pero no lo consigo. Quiero hacer la numeración con subíndices (como tienes aquí vamos) pero claro, entre que mi plantilla es antigua y que usé el tip de vagabundia ahora no sé cómo implantarlo. Te dejo una entrada de mi blog con algunos comentarios, por si puedes echarme un cable: http://bit.ly/AjMoOU

    Gracias de antemano, un saludo.

    ResponderEliminar
    Respuestas
    1. Le he echado un vistazo a ese enlace que me pasas, pero no lo tienes igual que J.Miur. Él usa en su blog listas hechas con dt/dd y tú no. Con ellas el código sería prácticamente igual que el de esta entrada pero cambiando los nombres de las clases, pero como te decía, tú no lo tienes así.

      Me tocaría repasarme todo el código, ya que no he "estudiado" ese script para generar los comentarios al margen del sistema de Blogger, así que si no te importa, pregunta a Jorge que seguro que se lo sabe de memoria y te dirá la solución enseguida.

      Eliminar
    2. Muchas gracias por contestar tan rápido Oloman, ya he ido a JMiur a plantearle el problemilla, sigo a la espera de que me diga lo que sea. Lo dicho, gracias.

      Eliminar
  20. Hola Olomán, yo tengo los comentarios anidados sin el código de blogger y, me interesaba numerar todos los comentarios, me he leído todos los comentarios de ésta entrada y en el 19.1 ya he visto que le decías a Joker que preguntara a JMiur,y así lo he hecho yo, y me ha sido de gran ayuda, ya lo tengo puesto a mi gusto pero, no quería pasar sin darte las gracias también a ti por ésta entrada
    Un abrazo y gracias

    ResponderEliminar
    Respuestas
    1. ¡Ah! Por no hacer nada expresamente por lo tuyo, pero vale :)

      Eliminar
  21. ¡¡Que siiiiii, que si que has hecho algo!!, jajajaja, si es que soy tonta, he releído mi comentario y no te puse que copié de una de tus respuestas, concretamente, la 7.5, el código que pones y, a ese código, JMiur le añadió otro pedacito para que también funcionara en los anidados, así que, el mérito es de los dos, por eso os he dado las gracias a los dos, los dos códigos juntos funcionan a la perfección para numerar todos mis comentarios
    Siento no haberlo explicado bien
    Que pases un buen día, un abrazo , ainssss, me estoy riendo yo sola, jajaja

    ResponderEliminar
  22. Hola!Oloman
    ya numerados los comentarios con ayuda de este post,quisiera saber si tienes algun post donde indiques como poner los comentarios dentro de la burbuja como lo tienes en tu blog.(plantilla nuevas)
    gracias

    ResponderEliminar
  23. Muchas gracias!!antenta espero
    Saludos

    ResponderEliminar
  24. Tengo un problema con la hora de los comentarios. Sale mal a pesar de que en el formato de diseño le tengo puesto un uso horario correcto.

    Lo único que he hecho raro es aplicar el google analitics pero supongo que poco tiene que ver.

    Algún alma caritativa que me ayude.

    ResponderEliminar
    Respuestas
    1. No hay ayuda ni caridad, pero no por mi parte, sino por la de Blogger. Eso nos pasa a todos desde que está este nuevo sistema. Se ve que cómo son norteamericanos, no se han dado cuenta de que en otras partes del mundo hay otras horas distintas. Estoy lo estoy escribiendo exactamente nueve horas después de lo que dice a la derecha de mi nick :s

      Eliminar
  25. Buenisimo estaba buscando esto
    ya lo inplemente a mi blog
    Gracias!!!

    ResponderEliminar
  26. Te molesto para ver si me podes ayudar a que el numero de comentario me quede alineado a la misma altura que el nombre y la fecha (como lo tenes vos) y no ligeramente mas abajo, no logro darme cuenta que modificar. Mil gracias!

    ResponderEliminar
  27. me equivoque de cuenta, es en mi Blog Amo ser Mama el problema, Saludos!

    ResponderEliminar
  28. perdon , acabo de darme cuenta que no aparece mas la numeracion como la tenia (lo habia hecho siguiendo las indicaciones de este post) de esta manera 1.a (si yo respondia. mis comentarios se contabilizan como uno mas. te agradeceria infinitamnete si me das una mano para tenerlo como antes,..

    ResponderEliminar
    Respuestas
    1. Para ponerlos como aquí tienes que usar el segundo de los códigos de esta entrada y quitar el primero que es el que tienes ahora. Luego, para mover el número, tendrías que añadir un
      margin-top:-12px;
      en la clase
      .comment-thread li:before {

      Eliminar
  29. Gracias ! Pero se arreglo solo sin que haga nada ... Lo de subir el numero si, me quedo bien gracias a tu ayuda ;) Por cierto, te felicito por el nuevo look del blog, esta genial! Besos!

    ResponderEliminar
  30. Bueno Oloman hoy me la e pasado casi todo el día haciendo tutoriales de tu blog y a mi parecer tenia la materia gris hoy fresquista, todo a salido a pedir de boca hasta esta también todo ok, aquí mi blog con todas las modificaciones de tu blog:

    http://www.info-noti-web.com/2012/04/battlefield-5-en-proyecto-glass.html?showComment=1335369450934#c8877868722833273663

    Lo que no logro entender porque el color de sombreado que le puse a todo el blog es diferente en los otros navegadores, yo utilizo chrome y el que se ve en chrome es el que me gusta; el de los otros navegadores para mi rompe un poco.

    Gracias

    ResponderEliminar
    Respuestas
    1. Pasa que las propiedades CSS3 (como la de las sombras) todavía no se interpretan igual en todos los navegadores. No tiene arreglo de momento.

      Y una cosa... Hay algunos elementos cuyo contenido se queda muy pegado a su borde exterior. Yo añadiría algún padding en esos casos.

      Eliminar
  31. MUCHISIMAS GRACIAS POR ESTE APORTE TAN CLARO Y CONTUNDENTE. POR FIN DESPUÉS DE SEMANAS DE IDAS Y VENIDAS PUDE HACER NUMERAR LOS COMENTARIOS DE MI BLOG : http://porelmundodelcrochet.blogspot.com/
    Quisiera vieras mi blog, porque la caja de COMENTARIOS varia de tamaño cuando es AÑADIR es más chica y al RESPONDER se agranda. Como puedo arreglarla, y no se porqué las últimas fechas de comentarios quedaron más opacas que las anteriores.
    Muchas gracias, por todo. Esperaré tus comentarios con mucha ansiedad.
    Un abrazo desde Montevideo-Uruguay

    ResponderEliminar
    Respuestas
    1. Las cajas de comentarios se van ajustando según sean nuevos comentarios o respuestas a otros ya existentes. Yo lo tengo igual y personalmente me parece apropiado.

      Con respeto a las fechas de los comentarios yo no observo ninguna distinta a otra. Leí tus comentarios de prueba y comentas que alguna está más pálida. Si es lo que imagino la cuestión es que esas fechas son enlaces directos a cada comentario y cuando ya ha sido visitado por un usuario (tú en este caso) a ese usuario en concreto le cambia el color para saber a simple vista que ya estuvo allí ;)

      Eliminar
  32. Gracias por tu respuesta. Lo veré más adelante funcionando en la realidad. Estaré por aquí viendo otras muchas cosas que me interesan para mi blog y aprender un poco de todo esto.
    Gracias nuevamente.

    ResponderEliminar
  33. Muchas gracias! :D, esta es pagina esta excelente... Felicitaciones

    ResponderEliminar
  34. Hola Oloman como hago para poner mis comentarios asi enmarcados y con esa flechita que apunta al avatar del comentarista???

    ResponderEliminar
    Respuestas
    1. Secreto profesional...

      Botón derecho > Ver código fuente > Estilo bocadillo comic

      Suerte ;)

      Eliminar
    2. Anónimo1/6/12, 5:38

      Ya lo hice pero es que tengo los comentarios viejos y no se como ponerlos ahi, no quiero actualizar a comentarios anidados porque no me gusta, sera que se podria poner???

      Eliminar
    3. Aquí tienes una lista de equivalencias entre las clases que controlan las nuevos comentarios y las clases que controlan los antiguos: Volver al diseño de comentarios previo a las replies

      Eliminar
  35. Hola buenas Oloman, acabo de copiar el segundo código, el de numerar con índices en mi blog, el de productosdx, pero no hace nada...
    Podrías echarle un vistazo?
    Desde ya, gracias.

    ResponderEliminar
    Respuestas
    1. Hombre, un paisano :) ¿Tienes Twitter para agregarte a mi lista?

      Sobre la pregunta, no veo el código en tu plantilla ¿seguro que lo pusiste?

      Eliminar
  36. Hola!!! de verdad voy a llorar de la emoción *lagrimita* ¿sabes el tiempo que tengo buscando esto??? DIAS!!! llevo DIAS buscando como hacer que mis comentarios se enumeren y por mas que probaba los trucos de otros blogs muy buenos no funcionaba, pero soy TERCA como mula y dije: "yo si puedo" (bendita sea mi ignorancia, soy un desastre en la informática) y pufff apareciste tu e iluminaste mi camino!!! O:)
    jajajajaja seguramente pienses que soy una loca (yo lo estoy pensando en este momento) pero mi emoción puede mas jajaja ahora seguire obsesivamente tus publicaciones xD es que tengo un blog que no me gusta el diseño (es horrible pero como tengo poco tiempo y SOY MALA para esto de la informática duró dias haciendo dos tonterias) y se basa en comentarios xq estoy publicando novelas, y el contador era el point!!!
    Muchisimas gracias por saberte explicar TAN BIEN!!! siento que estoy haciendo un curso jajaja y me voy a seguir leyendo a ver que mas puedo hacer con mi blog =)

    ResponderEliminar
    Respuestas
    1. Bueno, pues encantado de repartir un poco de felicidad por el mundo aunque sea de esta manera ;) Gracias por hacérmelo saber.

      Eliminar
  37. Hola! no puedo implementarlo en mi blog. Probé todos los códigos pero no me funcionan, inclusive probé el código que enviaste por los comentarios. Te paso mi blog por si se te ocurre algo: http://saxoparaeventos.blogspot.com/2011/11/que-partitura-necesitas-y-para-que.html
    Saludos y gracias por ofrecernos un blog tan util!

    ResponderEliminar
    Respuestas
    1. Para que te funcione esto debes tener los nuevos comentarios anidados. Tú tienes el sistema antiguo por lo que el código cambia un poco.

      Prueba con el que escribí en el comentario 7.5

      Eliminar
    2. Este comentario ha sido eliminado por el autor.

      Eliminar
  38. Me ha funcionado!!
    Tu blog es cojonudo. Muchas gracias por eneseñarme tanto!
    Un saludo.

    ResponderEliminar
  39. Hola, tu blog me está sirviendo mucho y te estoy muy agradecido pero me gustaría preguntarte si me puedes ayudar en una cosita. No se si está relacionado con esta entrada pero parece ser que sí.
    Cuando respondo a alguien, la respuesta no se me ve ya que no se porque el fondo de esa respuesta es totalmente negro y queda muy mal.
    Puedes verlo aquí:
    http://baloncestistas.blogspot.com.es/2012/07/baloncestistas-20.html?showComment=1341524458772#c60133182143996226

    Aunque no me respondas te agradezco tu blog.
    Un saludo.

    ResponderEliminar
    Respuestas
    1. Encontrado el problema. Busca este trozo de código. Prueba a cambiar ese BLACK por GREYSMOKE. Cuando veas que funciona cómo quieres, luego ya pones el color que gustes.

      .comments .comments-content .inline-thread {
      background: black;
      border: 3px solid #CEDADC;
      }

      Eliminar
  40. Hola!!!

    tengo un problema con la numeración, he agregado el segundo código y no se ven en los comentarios de mi blog. espero que me puedas ayudar.

    ResponderEliminar
    Respuestas
    1. Pues el problema es que el fondo que le pusiste a los comentarios interfiere con el de esta numeración y "tapa" el número en el primer comentario de cada hilo de respuestas. Los siguientes los muestra sin problemas. Aquí una muestra: http://j-musiic.blogspot.com.es/2012/04/discografia-perfume.html

      Es este background el problema. Si lo quitas verás que "aparece":
      .comment div, .trackback div, .pingback div{
      height:100%;
      background:#5bacfe;
      border-top:2px #040964 solid;
      border-bottom:2px #040964 solid;
      border-left:2px #040964 solid;
      border-right:2px #040964 solid;
      padding:5px;
      }

      Como supongo que no quieres prescindir de ese color y yo no sé arreglarlo de otra manera, vamos a hacer una chapucilla. Cambia las propiedades de .comment-thread li:before para dejarlo así:

      .comment-thread li::before {
      content: counter(contarcomentarios,decimal);
      counter-increment: contarcomentarios;
      float: right;
      position: relative;
      top: 0px;
      right: -16px;
      font-size: 20px;
      color: #050C68;
      }

      Eliminar
  41. Necesito ayuda con los comentarios de mi blog, quiero modificarlo por completo y no tengo idea de como, se puede volver a ponerlos como viene de fabrica y a partir de ahi modificarlos??? le meti mano ahora no puedo ni numerarlos, ni cambiarles el formato y encima al hacer clic en responder me abre una ventana emergente iciendo que hay algun error, me das una mano Olo??? no se que hacer ya... Saludos...

    ResponderEliminar
    Respuestas
    1. Pues tengo malas noticias. Tus comentarios están muy muy cambiados y sólo se me ocurre que uses "Restaurar plantillas de artilugios predeterminadas", porque creo que salvo un golpe de suerte, va a ser muy complicado encontrar el error. El problema es que también te cambiará otras cosas y no sé hasta dónde. Supongo que no tienes guardada ninguna copia de seguridad, porque esa sería la solución, volver a una versión anterior que no te estropee todo.

      Eliminar
    2. Una cosa por probar. Busca en el escritorio la opción de "Entradas y comentarios" y comprueba que no tienes seleccionada la de "Ventana emergente". Tiene que ser la de "Debajo de la entrada".

      Eliminar
  42. Hola, gracias por responder, tengo activada la opcion debajo de la entrada y tengo guandada una copia pero es reciente, probare restaurar plantillas de artilugios predeterminados para ver como queda y te aviso...

    ResponderEliminar
  43. Lo hice y se me modifico todo el blog por completo asi que tuve volver a como estaba, gracias igual...

    ResponderEliminar
  44. te hago las ultimas haber si me podes ayudar, como hago para que tanto el top 5 como los widget de etiquetas (año, peliculas alfabeticamente e idioma tengan el fondo transparate y no ese blanco que aparece??? Y como podria modificar el buscador ya que al buscar no encuentra nada, saludos master of the universe...

    ResponderEliminar
    Respuestas
    1. Mencionaste que tienes una copia de seguridad, pero sospecho que ya incluye todas las modificaciones de comentarios que no son fáciles de revertir...

      Por otra parte no veo mas que el Top 5 (ni rastro de etiquetas) pero el culpable de ese fondo blanco es esta imagen en el background que incluye además de la estrella una capa blanca opaca. Tendrías que editar esa imagen, hacer lo blanco transparente y luego sustituir la dirección:
      #PopularPosts1 li {
      background: #FFFCF5 url('http://1.bp.blogspot.com/-PihY-z6jQB0/TquWlHBeuGI/AAAAAAAAArI/CI8tzc1h4gM/s1600/star_icon.png') left center no-repeat;
      padding: 7px 0px 7px 35px;
      }

      Eliminar
  45. Para aquellos que no podian visualizar el contador de comentarios en Internet Explorer (como me paso) cambien esta linea:

    content='IE=EmulateIE7' http-equiv='X-UA-Compatible'

    por esta:

    content='IE=EmulateIE8' http-equiv='X-UA-Compatible'

    y listo!!

    ResponderEliminar
    Respuestas
    1. Sospecho que esas líneas incluyen un emulador para compatibilidad con IE, pero como no uso plantillas del Nuevo Diseñador, no las he incluido nunca.

      ¿Tú sabes exactamente qué es lo que hacen? Gracias por el dato en cualquier caso ;)

      Eliminar
  46. Oloman no me funciona en los comentarios anidados que son iguales que los tuyos no se porque pero si pongo los de el blog de Karla si que funciona necesito una solucion.

    Un saludo

    ResponderEliminar
  47. Yo creo que la solucion es si pudieras pasarme el codigo pero que se situen como los tuyos arriba de la letra o algo nose ya sabes que mi plantilla da muchos problemas xDD porfavor ayudame Oloman :)

    ResponderEliminar
    Respuestas
    1. Yo creo que si los pusieras y los dejaras para pudiera verlos, quizás te podría dar la solución. De todas formas dices que no se ven, así que prueba a poner el código de esta entradda y me avisas.

      Eliminar
  48. esque lo e puesto y no se ve es la cosa por eso te decia sin embargo en los de karla si se ven como vas a saberlo? ;S

    ResponderEliminar
    Respuestas
    1. Me perdí con la conversación :s

      Dj Afm tiene comentarios anidados y supongo que lo que quieres poner ahora es la numeración ¿no? Pues si es así, no veo el código de esta entrada en tu plantilla. No lo tienes y por eso no puedo decirte qué es lo que falla.

      Eliminar
  49. Buenas Oloman.
    Verás, intentando poner el código para la numeración decimal.
    Lo pongo bien y todo correcto, pero parece ser que el cuerpo de los comentarios y las respuestas tapan lo números y solo se ven la parte de arriba de los mismo.
    Aquí un ejemplo en una de mis plantillas de prueba:
    http://testingpollas.blogspot.com.es/2012/07/asdf.html

    Sabes alguna forma de hacer el fondo de los comentarios y respuestas transparente o únicamente que se vean de forma íntegra las numeraciones?

    Muchas gracias de antemano.
    Uso éste blog como referencia y se nota el trabajo que has hecho por todas partes. Un saludo!

    ResponderEliminar
    Respuestas
    1. OK. Haz lo siguiente.

      Busca este trozo y quita la primera línea, la del background:
      .comments .comment-block {
      background: none repeat scroll 0 0 white;
      border: 1px dashed #EEE;
      ...

      Ahora busca esto otro, arregla el valor del top añadiéndole "px" y por último añade el position de la última línea:

      .comment-thread li::before {
      content: counter(contarcomentarios,decimal);
      counter-increment: contarcomentarios;
      float: right;
      font-size: 24px;
      color: #666;
      top: 10px;
      position: relative;
      }

      Eliminar
    2. Perfecto, muchísimas gracias.

      He tenido también que quitar los bordes porque las líneas discontinuas grises que se aprecian muy poco se montaban encima de los números.

      Ahora voy a ver si le doy un poco de estilo al sistema de comentarios en general.

      Un saludo y gracias de nuevo.

      Eliminar
  50. Hola Oloman, puse el segundo codigo pero los números aparecen tapados por el borde de los bocadillos, me puedes ayudar ?
    mira esta entrada para verlo mejor.

    http://trucosoutlook.com/2012/11/poner-una-imagen-como-firma-en.html

    Gracias.

    ResponderEliminar
    Respuestas
    1. En tu caso añádele a este selector estas tres líneas:
      .comment-thread li::before {
      z-index: 1000;
      top: 8px;
      right: 8px;
      ...

      Eliminar
  51. Oloman no cambio nada, ahora los estilos están así:
    .comment-thread ol {
    counter-reset: contarcomentarios;
    }
    .comment-thread li:before {
    content: counter(contarcomentarios,decimal);
    counter-increment: contarcomentarios;
    float: right;
    z-index: 1000;
    top: 8px;
    right: 8px;
    font-size: 24px;
    color: #666666;
    }
    .comment-thread ol ol {
    counter-reset: contarbis;
    }
    .comment-thread li li:before {
    content: counter(contarcomentarios,decimal) "." counter(contarbis,decimal-leading-zero);
    counter-increment: contarbis;
    float: right;
    font-size: 18px;
    color: #666666;
    }

    ResponderEliminar
  52. Bueno ahora ya se ve mejor, pero no consigo meter el numero dentro de la viñeta, ahora tengo los estilos así:
    .comment-thread li:before {
    content: counter(contarcomentarios,decimal);
    counter-increment: contarcomentarios;
    float: right;
    margin-top:-20px;
    margin-right:10px;
    font-size: 24px;
    color: #666666;
    }

    ResponderEliminar
    Respuestas
    1. Lo siento pero tuve un lapsus. Además de las tres líneas que te decía en 50.1, también hay que añadir un position:relative;

      Eliminar
  53. Hola Oloman . tengo una duda. Mi blog tiene muchos comentarios y cuando llega a 100 pues le das a una pestaña lateral sino no los ves. yo queria que aparecieran primero los mas modernos y así estarian justo dejajo de la entrada y se verian rapidamente. es posible.
    Gracias.

    ResponderEliminar
  54. No entiendo el problema. He estado viendo esta entrada que tiene 135 y salen todos: http://estambul06.blogspot.com.es/2007/05/imprescindible-ver-en-estambul.html

    ResponderEliminar
  55. Gracias por contestar. Tienes razón , es cuando llegas a 200 comentarios , entonces no aparecen todos. Pero tarda mucho en llegar hasta el final, por eso decia de que salieran arriba los mas modernos y fueran quedando abajo los antiguos.
    Aquí poe ejemplo no salen todos.
    http://estambul06.blogspot.com.es/2011/12/estambulconsejos-viajeros-2012-parte.html
    Un sld y gracias de nuevo

    ResponderEliminar
    Respuestas
    1. Vale. Con 200 sí que Blogger crea ese "Load more" o como salga originalmente (yo cambié el texto y no me acuerdo) para ir cargando más comentarios poco a poco. Supongo que está así programado para que las entradas con muchos comentarios no sean demasiado pesadas, pero yo no sé cómo hacer que se vean todas de golpe. Y desde luego, no sé cómo hacer que aparezcan en orden inverso. De hecho creo que no se puede... al menos yo nunca he visto eso desarrolado.

      Eliminar
  56. hola oloman tu explicas como enumerar los comentarios podias tambien alguna forma como enumerar las entradas..si es posible gracias ?

    ResponderEliminar
  57. Algo así te podría servir, pero sólo numeraría las entradas de una página. Al pasar a la siguiente, la numeración comenzaría desde 1 de nuevo:
    .blog-posts {
    counter-reset: contarposts;
    }
    .blog-posts .date-outer:after {
    content: counter(contarposts,decimal);
    counter-increment: contarposts;
    }

    ResponderEliminar
  58. Que tal amigo quiero enumerar mis comentarios de manera decimal asi como estan los tuyos pero al momento de aplicar este codigo en mi plantilla no se ve ningun cambio no aparece la numeracion eh estado pensando que tengo que utilizar otro codigo al inicio del css pero no se cual aqui te dejo mi web para que la revices http://www.infoutilidades.net/2013/05/microsoft-office-professional-plus-2013_7637.html

    ResponderEliminar
    Respuestas
    1. Hola Carlo. El problema es que tú tienes un sistema de comentarios que no es el "normal" y sinceramente no sé cual utilizaste. De todas formas, actualmente hay algún tipo de error con los estándar porque si "respondes" a este mismo comentario, podrás comprobar que el foco se va al principio de la página y es un incordio, así que de momento ni los toques ;)

      Eliminar
  59. Hola Oloman,

    Cómo podría agregar "reply" y enumerar a la vez los comentarios. Agregué el código de tu entrada pero no me enumeró y encontré un código que va directo a un widget html en el sidebar que sí me enumeró pero después de cargar los 200 comentarios más el contador comienza desde 0 y ya no muestra los primeros 200 comentarios. ¿Cómo podría poner el "reply" y enumerar a la misma vez? Muchas gracias

    ResponderEliminar
  60. Ufff! No sé muy bien lo que te ocurre, pues no conozco ese widget que dices y además es completamente compatible la numeración con los comentarios anidados (replies). Eso es exactamente lo que estás viendo en mis comentarios. Sólo tienes que pasar a anidados y luego usar este CSS.

    ResponderEliminar
  61. ufff ayuda Oloman, he probado de todo, he leido todos los comentarios y probado y probado, no se que pasa, que no consigo que se numeren los comentarios :s

    Mi blog => http://www.fansherrilynkenyonspain.es

    Gracias adelantadas ;)

    ResponderEliminar
    Respuestas
    1. Hola.

      Haz todo tal cual explico en la entrada y en tu caso, luego añade las cuatro últimas líneas que ves aquí, en el siguiente trozo de código CSS:
      .comment-thread li:before {
      content: counter(contarcomentarios,decimal);
      counter-increment: contarcomentarios;
      float: right;
      font-size: 24px;
      color: #666666;

      z-index: 1000;
      position: absolute;
      right: 12px;
      top: 28px;

      }

      Ah, y para lo del avatar que preguntaste por otra entrada, simplemente cambia el margen superior de este selector y lo pones con un valor negativo. Tal que así:
      .comments .avatar-image-container {
      width: 65px;
      height: 65px;
      max-height: 65px;
      margin: -24px 0 0 2px;
      ...

      Eliminar
  62. ufff a mi b:skin no me sale por ningun sitio

    ResponderEliminar
  63. Edita plantilla HTML, PINCHA en el recuadro dónde está todo el código, teclea CTRL+F y en el buscador que sale (es uno interno sólo para el código, no es el del navegador) y busca la cadena SKIN. Verás que hay dos, la de apertura y la de cierre. Entre ambas va todo el CSS.

    ResponderEliminar
  64. Este comentario ha sido eliminado por el autor.

    ResponderEliminar
  65. Este comentario ha sido eliminado por el autor.

    ResponderEliminar
    Respuestas
    1. Pues el primero es para numerar cada comentario independientemente (1, 2, 3, 4, etc) y el segundo es el que tengo yo que sale con subíndices, es decir, el comentario principal será 1, 2,3,4, etc. y las respuestas a cada uno de esos tendrá el mismo número más un segundo número indicando que es una respuesta. Este por ejemplo debería salir como 66.1

      Eliminar
  66. Hola Oloman. Tu blog es fantástico y de gran ayuda para novatos del código. No consigo numerar mis comentarios en el blog http://apuntesdebabel.blogspot.com/2015/10/a-un-olmo-seco-de-antonio-machado.html
    Te enlazo a esta entrada que es la única que tiene comentarios de momento, ¿me podrías echar un cable? Muchas gracias

    ResponderEliminar
    Respuestas
    1. Off-topic, me gustaría preguntarte también; agregué el script de compartir en Facebook en el post-footer. Aparte de que me volví loco para conseguir que sólo hiciera link al post en cuestión con expr:href='data:post.url' con canonicalUrl no funciona, el enlace compartido en FB aparece sin el snippet y en su contra, si el post contiene comentarios, aparecen las primeras lineas del comentario. ¿Hay alguna manera de solucionarlo y que aparezca el snippet en FB? Gracias otra vez

      Eliminar
    2. Hola. Has metido mucha basurilla en tu CSS ¿podrías volver a dejar los selectores que se indican en esta entrada SÓLO con lo que yo indiqué y si no te funciona me avisas, pero sin cambiar nada?
      Me refiero sobre todo a
      .comment-thread li:before
      y
      .comment-thread li li:before

      Eliminar
    3. Para la segunda cuestión, visita esta otra entrada.

      Eliminar
  67. Hola, quisiera saber si esto se puede hacer en otras plataformas, como en Jimdo, ya que yo utilizo Jimdo. :D

    ResponderEliminar
    Respuestas
    1. Seguro que sí Swer3. Es sólo CSS y por tanto, compatible con todas las plataformas. Lo único es que los selectores con seguridad que serán otros.

      Eliminar
  68. Buenas tardes Oloman: Teníamos estupendamente puesta esta numeración pero modificando la caja de comentarios,éste genial sistema de numeración que nos has brindado ha desaparecido.¿Cómo podremos conseguir ver la numeración?El código está puesto en la plantilla .Muchas gracias de antemano.

    ResponderEliminar
  69. Mil disculpas Oloman,tras leer todos los comentarios y con las indicaciones que das en ellos,lo del comentario anterior está resuelto.
    Que tengas un buen día

    ResponderEliminar
    Respuestas
    1. Jajaja... Lei el primer comentario tuyo desde el correo, entré en tu blog y comenté. Venía a decir que todo iba bien, pero ya veo que hay un segundo comentario confirmándolo.
      Saludos Grupo Caminamos

      Eliminar
    2. Muchas gracias por todo lo que nos enseñas.

      Eliminar
  70. Años después caigo en cuenta que puedo aplicar la numeración jaja gracias Olomán ;) Crack

    ResponderEliminar