Numerar comentarios en Blogger. | Oloblogger Hace ya tiempo que este truco anda en danza, pero quizás por eso, se encuentra perdido en los archiv...

10 de marzo de 2010

Numerar comentarios en Blogger.

Hace ya tiempo que este truco anda en danza, pero quizás por eso, se encuentra perdido en los archivos de varios blogs y no lo encontrais. Servidor lo aprendió hace bastante de Vagabundia, en su entrada Blogger y los comentarios (1), en el que además explicaba cómo hacer para que fueran saliendo de distinto color los comentarios pares e impares.

Para ponerle un numerito ordinal a cada uno de los comentarios de una entrada, vamos a necesitar una variable inicialmente a cero y un pequeño script que irá sumándole 1 a su valor cada vez que se "imprima" un comentario. Luego recuperaremos esa variable y pondremos ese número dónde nos convenga.

Todos los comentarios son creados mediante un loop (bucle) que va realizando repetitivamente la misma tarea: busca el primer comentario, muestra todos los datos relacionados con él (autor, avatar, texto, fecha...) y cuando termina, busca el siguiente comentario. Esto lo hará hasta terminar con todos los comentarios existentes.

Por tanto, en primer lugar, buscamos el bucle en cuestión (plantillas de artilugios expandidas) y que está redactado como <b:loop values='data:post.comments' var='comment'>. Justo antes de esa línea, insertamos:

<script type='text/javascript'>var contadorComentarios=0;</script>

Esto lo único que hace es crear una variable llamada contadorComentarios y asignarle el valor cero. Ahora buscamos este otro trozo e insertamos lo marcado en verde:

<b:if cond='data:comment.authorUrl'>
<a expr:href='data:comment.authorUrl' rel='nofollow'><data:comment.author/></a>
<b:else/>
<data:comment.author/>
</b:if>
<data:commentPostedByMsg/>

<!-- Numerar comentarios -->
<div class='comentacontador'><a expr:href='&quot;#comment-&quot; + data:comment.id' title='Enlace al comentario'><script type='text/javascript'>
contadorComentarios=contadorComentarios+1;
document.write(contadorComentarios);
</script></a></div>

</dt>
<dd class='comment-body'>
<b:if cond='data:comment.isDeleted'>
<span class='deleted-comment'><data:comment.body/></span>
<b:else/>
<p><data:comment.body/></p>
</b:if>
</dd>

Este otro código suma una unidad a la variable cada vez que se pasa por el bucle (cada vez que se muestra un nuevo comentario), lo muestra y, a la vez, incluye un enlace en dicho número al propio comentario, que es el mismo que habitualmente lleva la fecha al pie de cada uno. Este link sirve para poder enlazar a cualquier comentario publicado.

Ahora sólo nos queda darle estilo a nuestro numerito. La clase que hemos utilizado es comentacontador, así que ese será también el nombre que tendremos que usar en la parte CSS (antes de ]]></b:skin>). Como los números son a su vez enlaces, utilizaremos el ancla (a) y un efecto para cuando se pase el puntero por encima (hover). A continuación un simple ejemplo:

.comentacontador a {
float:right;
margin-top:-20px;
margin-right:20px;
font-size: 18px;
color: #999999 !important;
text-decoration:none;
padding:0px 4px;
}
.comentacontador a:hover {
color: #333333 !important;
}


Esta última parte la tendreis que ajustar en función de vuestro propio diseño.

¿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

86 comentarios :

  1. Que bueno, un 10!

    Loestoy poniendo en mi blog: www.tutoshector.blogspot.com y cuando acabe ya te diré como me ha quedado

    ResponderEliminar
  2. Hola! quería preguntaros que es lo que podría hacer para que la última de mis entradas se muestre en grande por encima de las otras, y no en forma resumen como las demás. Os dejo la direccion de mi blog:
    www.medicinajoven.blogspot.com
    Agradecería vuestra ayuda!! Gracias!!

    ResponderEliminar
  3. Hola Oloman, lo he puesto y meha salido todo bien, pero en mi opinión, no queda bien en mi blog, he modificado el código pero sigue sin gustarme del todo, de todas formas, muchas gracias por compartir la info con nosotros, un saludo desde Tutoriales Hector (www.tutoshector.blogspot.com), me he hecho seguidor de tu blog, haver si te pasas por Tutoriales Hector y te haces seguidor del mio :),hasta pronto Oloman

    ResponderEliminar
  4. Héctor, no hay que poner todo, sólo lo necesario.

    Francisco PJ, ya te contesté en tu anterior comentario y te pasé un link para resolver eso que preguntas.

    ResponderEliminar
  5. Hola Oloman... me funciono a la perfección, es muy facil de hacer. Pero queria preguntarte una cosa, como le hago para poner un fondo o una imagen a los comentarios??... espero que me entiendas... GRACIAS.

    ResponderEliminar
  6. Oloman...

    En primer lugar darte las gracias por todas las cosas que nos enseñas a los neófitos como yo. Llevó 6 meses visitando tu blog, y es imperdonable que aún no te haya dejado ningún comentario, y es bien nacidos ser agradecidos, así que gracias otra vez.
    Quisiera decirte que he seguido tus pasos al pie de la letra (como haces siempre) y siempre me funcionan, pero en este caso, he sido minucioso como siempre pero no me salen los dichosos numeritos. Se que es difícil que me des una solución porque no todas las plantillas son iguales, pero te agradecería me aconsejases al respecto.

    Recibe un fuerte abrazo, y te doy las gracias de nuevo por tu labor.

    ResponderEliminar
  7. Oloman...

    Uy, ¿donde introduzco la clase CSS? sorry por las molestias.

    Un abrazo

    ResponderEliminar
  8. Kuston, para modificar el aspecto de los comentarios en lo que sea, se hace a través del selector .comment-body. Por ejemplo para añadir un fondo:
    .comment-body {
    background:url(http://direccionimagen.com) #000000;
    }

    E hilando con la pregunta de Félix, toda la parte de estilo, en Blogger siempre hay que meterla entre <b:skin><![CDATA[/* y ]]></b:skin> Ahí es dónde va todo el codigo CSS... aunque se podría forzar ponerlo en otro sitio, eso es lo más correcto.

    ResponderEliminar
  9. Oloman...

    Perdon, porque me vas a madar a freir esparragos :), pero me sigue saliendo el simbolito de blogger y no me salen números ¡que ansiedad por Dios¡ ayyyy

    Un abrazo

    ResponderEliminar
  10. Félix, este "contador" es para los comentarios que aparecen cuando accedes a una entrada. En la ventana emergente no se ven. Si lo compruebas, verás que ahora mismo tienes el código de estilo en el sitio incorrecto, por lo que te sale como parte de cada comentario.

    ResponderEliminar
  11. Oloman...

    Ahhhh, para darme cabezazos contra la pared, ya pensaba que tendría que recurrir a las pastillas, jaja. De verdad que te agradezco mucho tus respuestas y la ayuda que siempre nos das. Gracias.

    Un abrazo

    ResponderEliminar
  12. Hola oloman, viste la nueva aplicacion del draft de blogger?

    ResponderEliminar
  13. Qué tal,
    Me gustaría invitarte a un concurso que estoy organizando para Bloggers y Webmasters. El premio, son $250 dólares americanos. Se trata de encontrar y resolver un problema que hay en mi blog.
    En el siguiente link, todos los detalles. http://goo.gl/Zlns
    Saludos.

    ResponderEliminar
  14. Hola Gracias por responder... me preguntaba q mas se le podria hacer?? me refiero a eso del fondo de los comentarios, pues quiero algo para q se vea como tus comentarios (no exctamente igual claro)....

    ResponderEliminar
  15. Mexotopo, me enteré pero no he tenido tiempo de verlo todavía. Nos van a quitar el trabajo :D

    Banco de imágenes, yo prefiero la misma cantidad pero en libras inglesas ;) Ya echo un vistazo.

    Kuston, puedes hacer cualquier cosa que te admita CSS: cambiar márgenes, color de texto, del fondo, poner una imagen, enmarcar los avatares, poner un borde... Incluso puedes añadir dibujos u otras cosas con HTML

    ResponderEliminar
  16. Hola de nuevo Oloman, gracias me quedo perfecto lo de los comentarios, ya lo modifice ;)...

    Pero te queria hacer otra pregunta. Como modifico lo de "Publicado por..." - "Etiqeutas.."?? que sale en la parte de abajo de cada entrada, pues quisiera ponerle un fondo o algo... espero tu respuesta =)

    ResponderEliminar
  17. Pues de la misma manera que configuraste .comentacontador, incluyéndolo en la parte CSS y dándole los atributos que querías, ahora haz lo mismo con .post-author vcard para el Publicado, con .post-comment-link para el número de comentarios y con .post-labels para las etiquetas. Si quieres cambiar todo de una sola vez, entonces lo que tendrás que configurar es .post-footer-line post-footer-line-1 y .post-footer-line post-footer-line-2, que es dónde se ubican todos esos cacharritos.

    ResponderEliminar
  18. Hola por favor ayudame, en mi blogg no me muestra esta opcion para dejar comentarios, es www.rphrpm.blogspot.com
    Muchas Gracias.
    Saludos

    ResponderEliminar
  19. He podido dejar un comentario sin problemas. No sé a qué te refieres exactamente.

    ResponderEliminar
  20. No me sale :S lo que pasa es que no se dónde poner el último código:

    .comentacontador a {
    float:right;
    margin-top:-20px;
    margin-right:20px;
    font-size: 18px;
    color: #999999 !important;
    text-decoration:none;
    padding:0px 4px;
    }
    .comentacontador a:hover {
    color: #333333 !important;
    }

    Eso es lo que le da el diseño y no se donde ponerlo. ¿Me podrías decir?

    mailto: wasong.10@hotmail.com

    ResponderEliminar
  21. La parte CSS es la que está entre
    <b:skin><!--[CDATA[/*
    y
    ]]--></b:skin>

    http://oloblogger.blogspot.com/2010/05/blogger-estructura-basica-de-la.html

    ResponderEliminar
  22. Por que no puedo agrandar el texto :S (el numero)
    me es imposible...

    http://borrador-j4.blogspot.com/2010/08/cheeno-2-face-macy-2010.html

    ResponderEliminar
  23. En la clase .comentacontador, no tienes ningún font-size. Prueba a ponerlo con un valor, como en el ejemplo de arriba.

    ResponderEliminar
  24. hola olomán. desde hace ya mucho tiempo el widget de Ultimos comentarios NO funciona en mi blog http://paraninosconcabeza.blogspot.com. He mirado la configuración, y está perfecta. ¿Qué crees que puede estar ocurriendo? Gracias!

    ResponderEliminar
  25. Lara, me resulta difícil saber lo que es desde aquí, porque tienes un script para mostrar esos comentarios y lo que yo veo es el resultado de ese script. De todas formas, por lo poco que veo, prueba a poner en el SCR de ese script, el http:// antes de la dirección de tu blog. Ahora mismo está así: paraninosconcabeza.blogspot.com/feeds/comments/default

    Si no te funciona y quieres probar con otro, busca en este mismo blog "comentarios recientes" y encontrarás varias opciones. Precisamente hay más de una porque en ocasiones dejan de funcionar las que tenemos.

    ResponderEliminar
  26. ola muy buena tu pagina ,me sirve de ayuda gracias.

    pasen por mi blog .xd
    http://carlangas24game.blogspot.com/

    ResponderEliminar
  27. Muchas Gracias! :D habia provado de otras pagina y no me habia funcionado nose por que pero el de tu sitio si me sirvio

    ResponderEliminar
  28. Christian Neyra, borrado sin compasión por spam gratuito.

    TheJigg0695, yo tampoco sé por qué otros no te funcionaban :D

    ResponderEliminar
  29. Hola Oloman... este mensaje también lo envíe a Gema otra excelente guía para blogs....

    He procurado trabajar solo y he evitado hacer molestas preguntas para el trabajo que estoy haciendo de reformar mi blog. Creo que he llegado a un buen punto, pero hasta aquí ya no puedo avanzar más. Me siento algo cansado. Quisiera pedir tu apoyo, ya que puedo apreciar que este tema lo has sabido solucionar de manera efectiva.

    Se trata de los comentarios. En mi blog aparece el avatar a la izquierda, el cuerpo del comentario al lado, el nombre del perfil arriba y la fecha abajo. Cuando intento poner un color para personalizar comentarios de otros y de autor, solo en el cuerpo aparece el color, quedando por fuera el avatar, la fecha y el nombre del perfil.... ¿cómo puede hacerse para que todo esto quede unificado en un solo recuadro con borde, cómo tienes en tu blog?

    Te mando mi blog para que veas la situación.

    http://ocultostextos.blogspot.com/2010/08/angeles-entre-nosotros.html#comments

    Un abrazo desde Colombia. Gracias de antemano

    ResponderEliminar
  30. Nuevos cielos. Lo cierto es que a mí me quedan esos elementos fuera del recuadro (avatar, autor y fecha) y además no recuerdo bien ahora mismo cual era la clase exacta. En un vistazo rápido creo que es la #comments-block

    Aunque es antiguo y actualmente mejorable ¿viste esta entrada?
    http://oloblogger.blogspot.com/2008/06/destacar-los-propios-comentarios.html

    ResponderEliminar
  31. Hola Oloman. Gracias por tu respuesta. Es verdad que la imagen te queda por fuera.... lo noté luego de enviar el mensaje, pero igual se ve muy bien. Creo que ya he solucionado el rollo mezclando algo de soluciones de Vagabundia, de Gema que toma a Jmiur pero lo explica algo mejor y algo tuyo. Ha quedado bien para mi gusto. Si quieres ver abajo pongo el link... procuraré poner un post sobre Ustedes ya que ayudan mucho a mejorar el diseño... mi blog es viejito pero hasta ahora estoy empezando a mejorarlo y a moverlo... saludos de nuevo desde Colombia... aquí el link:

    http://ocultostextos.blogspot.com/2010/08/cosas-que-me-agradan.html#comments

    ResponderEliminar
  32. Prueba a añadir en .comments-block .comment-body p un padding:5px; ;)

    ResponderEliminar
  33. muchas gracias oloma, una pregunta esperoq ue me puedas ayudar... como edito la caja del comentario?? Saludos!!

    ResponderEliminar
  34. Tendrás que hacer pruebas con los ID y las clases que se han comentado anteriormente. Depende de lo que quieras: .comments-block y . comment-body

    En la parte CSS suelen aparecer juntas todas las que tienen que ver con los comentarios.

    ResponderEliminar
  35. ok mirare eso del CSS gracias :D

    ResponderEliminar
  36. Gracias, este fue el unico codigo que pude encontrar en mi plantilla y utilizar ya que lei varios trucos por la web que daban otro codigo que no tenia! ^^

    ResponderEliminar
  37. Ah, me falto decirte que en el ultimo paso te olvidaste de poner donde hay que pegar el codigo para poder modificar el diseño de los numeros, es que mucha gente no sabe cual es el CSS, de mas esta decir que lo averigue de casualidad y seria bueno que lo aclararas ;)

    ResponderEliminar
  38. Eso es porque no me lees con frecuencia ;)

    Enlace
    Enlace 2

    De todas formas, gracias por la observación :D

    ResponderEliminar
  39. Buenas Oloman he aplicado el truco que aqui comentas y me ha funcionado todo menos el CSS, no me lo pilla, basicamente es como si no hiciese nada, ya que da igual que este que si lo quito, el resultado es igual y eso me extraña ¿puede ser por que el blog esta hecho con el nuevo diseñador de plantillas de blogger?

    Te dejo la url http://www.marketingonlinevalencia.org

    Gracias por anticipado

    ResponderEliminar
  40. Pues va a ser eso, porque por lo que he visto, está bien todo. Prueba a insertarlo desde el propio diseñador. Hay una opción para introducir CSS. Ya me cuentas.

    ResponderEliminar
  41. La parte de numerar la he aplicado y sin problemas. Pero la de los colores alternativos me lío un poquito, si pudieras hacer tu una explicación te lo agradecería infinitamente.

    ResponderEliminar
  42. Supongo que leiste el post de Vagabundia que enlacé Tim Mchara. Yo no he puesto nunca en práctica esa parte, pero creo que sólo se trata de añadir a la parte de código que aquí se refleja, los dos trozos que Vagabundia titula con comentarios como:
    "agregamos un bloque para darle un nombre único a cada comentario"
    y
    "establecemos la clase del comentario"
    ...además de añadir el último script que figura en ese mismo post.

    ResponderEliminar
  43. Hola, Oloman, entraba a preguntarte algo y vi que en parte está respondido, dices: este código es para numerar los comendatarios en la página de cada entrada, en la emergente no se ven....
    Es curioso hasta ahora hice esto en tres blogs en dos de ellos solo se ve en la pagina de cada entrada y no aparentado el link ¨"comentarios" desde la página principal de blog, ni aun habiendo marcado la opción pagina completa en vez de emergente, en el tercero de los blogs si se ve en todos los casos.
    Pero resulta que: El link "Comentarios" No funciona igual en todos los blogs y no tiene que ver que sea con las plantillas antiguas o las nuevas ya que en dos blogs con las plantillas nuevas me funciona diferente, me explico en el blog a) el link manda a la clásica página de comentarios donde la numeración no se ve:
    https://www.blogger.com/comment.g?blogID=16172195&postID=3014492816315596721

    sin embargo en el blog b) va a la página de la entrada pero al marcador donde comienzan los comentarios:
    http://rompiendo-muros.blogspot.com/2011/02/manifestacion-en-ramalay-mordazas.html#comments

    y de esta manera siempre se ve la numeración .
    Ahora me y os pregunto ya algo confundido a pesar de que tengo cierta experiencia ¿esto se debe a alguna diferencia de configuración? ¿o deberemos modificar las platillas?
    Es interesante por que de esta manera la numeración de comentarios se ve en todo caso.
    Saludos y felicitaciones por este blog

    ResponderEliminar
  44. Mi anterior comentario está solucionado. si en configuración/comentarios marcamos la opción: Entrada incrustada a continuación... la numeración se ve siempre :)

    ResponderEliminar
  45. Evidentemente es eso. Gracias por avisar porque así me ahorraste trabajo en balde Juan Ruetter.

    ResponderEliminar
  46. muchas gracias oloman ...me salio perfecto ... xD

    ResponderEliminar
  47. Muchisimas gracias por este buen aporte ;)

    ResponderEliminar
  48. tengo un problema con los comentarios,no puedo darles ningun estilo,ni tan siquiera puedo poner un frase diferente,por ejemplo:

    para cambiar el famoso dijo voy a la linea
    la elimino y la cambio por otra frase y no me lo cambia,sigue con el mismo dijo,aunque lo haya cambiado y no hay mas lineas iguales.

    ya ni te cuento para darle formato a todo lo referente a los comentarios,no me cambia nada

    el blog aun esta en construccion y la direccion
    es:http://paraprobarcodigos.blogspot.com/

    ResponderEliminar
  49. Apofis, pues para no poder cambiarlos, tienes todo muy, muy modificado. De todas formas, a ver si aquí encontrarás cómo modificar lo que te falta http://goo.gl/vMaJN

    ResponderEliminar
  50. ya,la plantilla base la e ido modifcando poco a poco,y ya esta hecha,salvo algun detalle que otro,aunque me cuesta encontrar las cosas para poder modificar todo lo que quiero hacer.
    gracias,mirare ese post que me as puesto a ver si lo logro.
    la direccion definitiva ya publica es:http://rutasparaviajar.blogspot.com

    ResponderEliminar
  51. Hola saludos cuando ingreso el codigo me aparece este error quisiera saber por que ? gracias de antemano

    " Se ha encontrado más de un artilugio con el ID: Followers1. Los ID de artilugio deben ser exclusivos. "

    ResponderEliminar
  52. Jesus Edu, eso no tiene nada que ver con este código. Te saldrá siempre que intentes cambiar algo en la plantilla. El problema es que hay dos artilugios de seguidores con el mismo nombre. Busca uno cualquiera de ellos en tu plantilla y cámbiale el nombre. Por ejemplo, el primero que encuentres con ID='Followers1', cámbialo para que sea ID='Followers2'.

    ResponderEliminar
  53. Hola como puedo poner los numeros a la derecha es que a my me salen a la izquierda

    ResponderEliminar
  54. Hola Cuman. En el último trozo de código que se muestra aquí, podrás ver la parte que da estilo a los números. Si tienes un código parecido tu solución está en el FLOAT. Tendrás que cambiar LEFT por RIGHT. No olvides ajustar los márgenes si los tiene.

    ResponderEliminar
  55. Gracias por la info, más claro y fácil imposible. Me ha quedado a la perfección :)

    Saludos y éxitos.

    ResponderEliminar
  56. Gracias! Simplemente genial!!!

    ResponderEliminar
  57. Hola, Oloman.
    Acabo de poner este truco y me salió de maravillas al primer intento, en una plantilla de las nuevas de blogger.
    Muchísimas gracias!
    Saludos!

    ResponderEliminar
  58. con este tuto me salio mucho mejor que con el de gema blog

    ResponderEliminar
  59. Gracias por lo que me toca DaviDenko, porque Gem@ suele explicar las cosas bastante bien.

    ResponderEliminar
  60. Lo he probado, pero los números salen debajo del nombre en vez de a la derecha, ¿cómo lo cambio?

    ResponderEliminar
    Respuestas
    1. Modificando esta parte. Tienes que cambiar los márgenes hasta llevártelo hasta dónde te interesa.
      .comentacontador a {
      float:right;
      margin-top:-20px;
      margin-right:20px;
      font-size: 18px;
      color: #999999 !important;
      text-decoration:none;
      padding:0px 4px;
      }

      De todas formas, ayer hubo cambios importantes en el sistema de comentarios y es posible que hoy ya no te funcione ese script.

      Eliminar
  61. Hola, me gustaría saber cómo quitar el link del número, ya que no me parece muy útil. ¿Qué parte del código quito?

    Gracias por adelantado!

    ResponderEliminar
    Respuestas
    1. Tienes que quitar lo marcado en cursiva y dejar lo que está en negrita:

      <a expr:href='&quot;#comment-&quot; + data:comment.id' title='Enlace al comentario'><script type='text/javascript'>
      contadorComentarios=contadorComentarios+1;
      document.write(contadorComentarios);
      </script>
      </a>

      De todas formas, a mí me pasa al contrario y echo de menos el enlace al comentario. Precisamente te he querido poner uno para que vieras otro sistema sin javascript (más liviano) para numerar SIN enlace y no he sabido encontrar la dirección concreta. De todas formas te remito a la entrada. Es el número 7.e de esta entrada.

      Eliminar
  62. Hola!! En mi blog lo instalé y no aparece...no sé qué pasó?? Me ayudás?? Te dejo la entrada para que la veas...saludos: http://asesoramientoconsorcios.blogspot.com/2012/01/regimen-del-encargado-de-edificio.html

    ResponderEliminar
    Respuestas
    1. Este script habría que modificarlo para que funcionara con el nuevo sistema de comentarios que es el que tú tienes. Prueba este otro que es mucho más fácil de poner y más eficiente: Numerar los nuevos comentarios sin javascript

      Eliminar
    2. Gracias, ya está, pero ahora voy por más!! Cómo hago para enmarcar las respuestas y cambiar el logo de blogger, así como lo tenés vos? Te aclaro, que cero manejo de html, salvo copiar y pegar, no meto mano en nada porque cuando lo hice, hice desastres!!!! Así que te agradecería si me explicás con lujo de detalles como podría lograr eso para que quede más prolijo. Gracias!!!!

      Eliminar
    3. El logo de Blogger se puede personalizar por la imagen que tu quieras editando tu perfil. Pinchando en tu nombre en cualquier comentario accedes a ese peril.

      Sobre lo de los marcos, tendrías que añadir a tu CSS (igual que hiciste con la numeración) código como este:

      .comments .comment-block {
      padding: 10px;
      background: red;
      border: 4px solid black;
      }

      Luego ya cambias o incorporas las propiedades que gustes.

      Eliminar
    4. Gracias!!! Yo tenía un separador muy lindo entre comentario y comentario...al poner esto, ya no aparece más, no?

      Eliminar
    5. Perdón, sí funciona, pero quedó adentro del recuadro, en vez de afuera...y otra cosa, la numeración me quedó muy en el borde del recuadro, casi ni se ve, cómo soluciono éstas dos cosas? gracias!!!

      Eliminar
    6. En la plantilla, está así:

      .comments .comment-block {
      background-image:url(http://media.smashingmagazine.com/images/hr-images-yes/hr-sergio-ruiz.png);
      background-repeat:no-repeat;
      background-position:center bottom;
      padding-bottom:30px;
      height:140px;
      background: CCCCCC;
      border: 5px solid grey;
      }

      jaja perdón si soy algo pesada....gracias.

      Eliminar
    7. A las dos pseudoclases que llevan un :before, añádeles:
      margin-top:5px;
      margin-right:5px;

      Eso te separará los números del borde superior y derecho respectivamente.

      Con respecto a los avatares yo los veo fuera del recuadro. Por cierto añade a .comments .comment-block (lo que me pegaste en el último comentario) un padding:10px; Creo que con eso gustarán más ;)

      Eliminar
    8. Qué significa ésto que me pusiste? "A las dos pseudoclases que llevan un :before,..."

      Te repito que no entiendo mucho del lenguaje html, estoy aprendiendo...y el blog que tengo lo hice así, de aprender, pero metí muchas veces la pata y me quería matar jajaja Entonces, donde añado eso para separar los números del borde y qué hago con los separadores de comentarios para que queden fuera del recuadro y no adentro? porque no entendí...disculpame.

      Eliminar
    9. Sería más fácil seguir este hilo en el post al que hice referencia. Alí podrías ver cual es el código y que parte lleva añadido un :before. Lo que intentaba explicar es que es dentro de eso dónde tendrías que poner esos márgenes. Por ejemplo, esto...
      .comment-thread li:before {
      content: counter(contarcomentarios,decimal);
      counter-increment: contarcomentarios;
      float: right;
      font-size: 24px;
      color: #666666;
      }

      ...pasaría a ser esto:
      .comment-thread li:before {
      margin-top:5px;
      margin-right:5px;

      content: counter(contarcomentarios,decimal);
      counter-increment: contarcomentarios;
      float: right;
      font-size: 24px;
      color: #666666;
      }

      Y con la otra clase que se llama .comment-thread li li:before, habría que hacer lo mismo.

      Sobre los avatares, te comentaba que yo los veo bien, fuera del recuadro del texto.

      Por último me permitía hacerte una sugerencia para que metiera un padding:10px; dentro de la clase .comments .comment-block para mejorar la visualización del texto.

      Eliminar
    10. Gracias!!! ya quedó mucho mejor....todavía me falta agregar lo de los comentarios anidados y que no puedo tener los comentarios en las páginas estáticas!!! me está volviendo locaaaaa!!!! jajaja saludos.

      Eliminar
    11. Estoy en ello. Te pedí una cosa en la otra entrada ;)

      Eliminar
  63. Hola! Mi primer Comentario en Tu pagina ;)

    Bueno Yo ya hice todo lo que haz Puesto, Pero No veo Resultados bueno si le quieres echar un Vistaso te dejo el Link:
    ChristianGraphicsDesigns

    Muchas Gracias Por todo!!

    ResponderEliminar
    Respuestas
    1. Ver comentario 65.1 Este sistema no vale para los nuevos comentarios que son los que tú tienes. Echa un vistazo al enlace que allí puse.

      Eliminar
    2. O.o Ok Muchas Gracias!!

      Eliminar
  64. Si quiero que mis comentarios aparescan como aqui o enciudad blogger me refiero al 66.2 ejemplo (numeracion en las respuestas y que las respuestas no las tome como comentarios) espero me puedas ayudar.

    ResponderEliminar
    Respuestas
    1. Prueba a darte una vuelta por este otro post. Cualquier cosa adicional la comentas allí, por favor.

      Eliminar
  65. Gracias por este código me funcionó perfecto.

    ResponderEliminar
  66. Que tal amigo quiero poder subcontador a los comentarios y para que los reconosca que hay que hacer mira eh agregado adicinalmente al codigo dispuesto por ti esto mira
    al script lo eh puesto de esta manera var contadorComentarios=0; var subContador=0; claro esta que con su apertura y cierre y al otro codigo le eh agregado

    subContador=subContador+1;
    mainContador=contadorComentarios;
    document.write(mainContador + "." + subContador);

    Pero no me reconoce la numeracion decimal como yo quiero que puede hacer saludos

    ResponderEliminar
    Respuestas
    1. Te contesté en el otro comentario que dejaste similar en otro post: tienes un tipo de comentarios que no reconozco.

      Eliminar