Número de comentarios arriba del post

29 de mayo de 2010 190 comentarios ,
La mayoría de las plantillas tienen el número de comentarios y su enlace en la parte del footer del post, es decir, al final de la entrada, pero igual podemos ponerlo arriba de la entrada encima de un icono para que sea más visible y atractivo para los lectores.

comment bubble

La modificación es sencilla, sólo entra en Diseño > Edición de HTML, marca la casilla Expandir plantillas de artilugios y busca esta línea:
<b:includable id='post' var='post'>

Justo debajo de esa línea pegamos esto:
<span class='post-comment-link-arriba' style='font-size:24px; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhbq0LYm8_mfmaFLk0zONHDq97mXMftXMvCQ-FfZAYgiNiwG9Y9d5YwHHMwn7DB25JcHYi0wFwehsClAJq5-AjAHoXb1__w4PcW6Auz1-RTjxDz5WEztfsTELw6QHKwC38x1Nzg0Avr2gE/s400/bubble.png) no-repeat top right; width:48px; height:48px; text-align:center; float:right; margin:5px 0 0 0; padding:5px 7px 0 5px;'>
<b:if cond='data:post.allowComments'>
<a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><b:if cond='data:post.numComments == 1'>1 <b:else/><data:post.numComments/></b:if></a>
</b:if>
</span>

Y listo, tendrás el número de comentarios arriba de la entrada.
Por supuesto puedes cambiar el icono por otro, sólo cambia lo que está en color rojo por la URL de tu icono.
Si cambias el icono deberás cambiar donde dice width (ancho) y height (alto) por las medidas del nuevo que has puesto.
El tamaño de los números se cambia donde dice font-size:24px; y la posición de los mismos en donde dice padding:5px 7px 0 5px;

ACTUALIZACIÓN (02/06/2010)
El ícono con el número de comentarios también aparecerá en las Páginas estáticas, se deseas que no aparezca ahí entonces encierra el código anterior así:
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>

...aquí va el código...

</b:if>
De ese modo sólo aparecerá en las entradas pero no se mostrará en las Páginas estáticas.

ACTUALIZACIÓN (08/06/2011)
En las plantillas hechas con el Diseñador de Plantillas de Blogger se debe quitar el float:right; del código, eso lo pondrá del lado izquierdo y quizá no se vea muy estético, pero si no se hace entonces el enlace a los comentarios no funciona.

Les dejo unos iconos que pueden usar:

Descargar | Iconos de comentarios


190 comentarios en:

" Número de comentarios arriba del post "

  1. Muy bueno Potro
    Oie potro tengo una duda aver si no la puedes aclarar en un post, es de Adsense.
    ¿Como activar Adsense para Dominios? ya que no le entiendo y sigo buscando como entenderle (ya entendi que solo es para que los comerciales no te lleve a errores o pagina no existentes)
    POtro porfavor tronco aver si nos puedes alludar como activarlo y so con eso ganas mas dinero :D

    ResponderEliminar
  2. Muy buen dato mi estimado amigo, siempre innovando y compartiendo lo mejor. Agradecimiento y felicitaciones para usted.
    Deseo también dejarte por acá la dirección de mi nuevo blog, en el cual como ya te había comentado antes decidí utilizar la plantilla que en un par de artículos anteriores nos compartías. La dirección es la siguiente:

    http://nelsondiazblog.blogspot.com/

    En la Sidebar la respectiva referencia a tu trabajo.

    Muchas gracias hermano.

    ResponderEliminar
  3. Hola ıllıllı★Criss Mitchell★ıllıllı,

    Adsense para dominios es para esto, supongamos que compras un dominio (tudominio.com) pero no tienes nada en él, ni un blog, ni una página ni nada, sólo el dominio y nada más, así que si alguien entra no habrá nada, quizá sólo un mensaje del navegador que dice que la página no existe.
    Ahí lo que muchos hacen es usar Adsense para dominios que lo que hará es hacer una página con anuncios, de modo que cuando alguien entre vea una página de anuncios con un buscador y así ganes con esos anuncios.
    Digamos que es una forma de sacarle provecho a ese dominio que posees pero que no lo tienes en uso.

    Saludos.

    ResponderEliminar
  4. Hola Nelson Diaz,

    En realidad no es una innovación, ya tiene un tiempo que ese "truquillo" se usa.
    Wow, me ha gustado mucho cómo quedó el blog, te agradezco que hayas usado la plantilla y más aun que haya dejado un espacio para enlazarme.

    ¡Un abrazo!

    ResponderEliminar
  5. Hola, muchas gracias por el icono para los mensajes. Me encantó!

    ya lo he agregado a mi blog: http://olaf1986.blogspot.com/

    Te he dejado algunos clics de agradecimiento jeje =)

    ResponderEliminar
  6. Qué bueno que te ha gustado :)
    Saludos y gracias por tu visita.

    ResponderEliminar
  7. :o Genial :D
    Gracias Potro

    ResponderEliminar
  8. Gracias, no sólo por este, sino por todos los buenos trucos. Me están ayudando mucho en la creación de mi blog.

    ResponderEliminar
  9. Qué gusto que este sitio te esté siendo de ayuda. Gracias por tu visita.

    ResponderEliminar
  10. Muchas gracias otro truco mas para mi blog

    http://brujo5-iphone.blogspot.com/

    ResponderEliminar
  11. Que bueno que lo posteaste, ya lo pondre mas tarde.

    Saludos.

    ResponderEliminar
  12. Muy bueno Potro!

    ya lo tengo en mi blog :

    http://touchinfomobile.blogspot.com/


    pero sabrías como poder cambiar los nº de color?

    Un saludo socio.

    ResponderEliminar
  13. Hola El Potro:
    Acabo de incorporarlo a nuestro blog, ha quedado muy vistoso.
    Como siempre eres un fenómeno.
    Un abrazo,

    ResponderEliminar
  14. Hola Laser,

    Los número al ser enlaces toman el color predeterminado para tus enlaces.
    Para modificar el color de los números agrega antes de ]]></b:skin> lo siguiente:

    .post-comment-link-arriba a {color:#000;}

    ResponderEliminar
  15. Hola Ricardo,

    Disculpa por haber tardado tanto en publicarlo pero tenía otros posts pendientes.
    Espero y haya sido de tu agrado.

    Saludos.

    ResponderEliminar
  16. ¿No sabes como poner mas de una url a una imagen?

    ResponderEliminar
  17. Chido potro, de casualidad no sabes como hacer un header en flash?, me gusstaria hacer uno =D

    ResponderEliminar
  18. Big Bang, supongo que te refieres a un mapeado de imágenes, aquí hay una entrada de Oloblogger que explica cómo hacerlo.

    Mets La Paz, aquí hay una entrada con la explicación de cómo ponerlo, pero sobre cómo hacer el archivo no sé, ahí ya tendrías que tener conocimientos sobre diseño flash.

    ResponderEliminar
  19. wow...que sencillo!!! Una pregunta Bro..¿que sucede con el código que ya existe en la plantilla? me refiero a que nosotros agregamos este código para que los comentarios aparezcan sobre el post, en la parte derecha. Pero ya había unas lines dedicadas a eso diciendo que los comentarios iban debajo del post (por ejemplo). ¿no es necesario quitar ese código? ¿quedan los dos códigos?

    mmmm... perdón Bro, no se si se entienda lo que digo, es difícil explicarlo.

    Un abrazo!!!

    ResponderEliminar
  20. Hola muy buenas por estos lares, espero que alguien pueda echarme un cable con un problemilla que tengo tras aplicar este tip. Resulta que todo parece funcionar perfectamente pero en mi primera entrada del blog no contabiliza más que un comentario, sin embargo cuando accedo a dicha entrada si contabiliza correctamente. Puede ser por la librería jquery que uso para un s3slide?, en fin que no se como solucionar esto, gracias de antemano y saludos.

    ResponderEliminar
  21. brother, no pasa nada si tienes los dos, de hecho la mayoría prefiere tener los dos enlaces, de cualquier modo, si no quisieras tener el otro sólo busca el código que es muy similar al que se ha agregado y elimínalo. Un abrazo!

    webmaster, hay un problema general respecto al número de comentarios que muestra con el que realmente hay. Aquí hay más información.

    ResponderEliminar
  22. Ahhhhhhhhhhhhhhhhhhhh!!! ahora entiendo! yo pensé que el código "se anulaba sólo" pero no entendía como eso podía pasar! :P perdon bro... entendí mal

    gracias por la clase!

    Un abrazo!!!!

    ResponderEliminar
  23. Igual no lo mencioné porque como te digo, la mayoría prefiere tener ambos, pero qué bueno que preguntaste, así si tienen la duda los refiero a tu comentario :D

    Un abrazo!

    ResponderEliminar
  24. Muy bueno potro lo he probado en Blog de pruebas en el mio y se ve bien.
    Bueno tipo SPAM hoy sera mi comentario vengo a invitar a todos los usuarios de CIUDAD BLOGGER visiten este nuevo proyecto, yo habro y habro blogs a lo loco verdad.
    se llama

    Letras en los Oidos es de letras de Música
    http://letrasenlosoidos.blogspot.com/

    Todos pueden entrar buscar su letra aun faltan muchisimas pero si alguien se anima a ayudarme con gusto que sera aceptado

    ResponderEliminar
  25. muy buenas potro!! veras tengo un pequeño problema con mi blog,estoy modificandole la plantilla en mi blog de prueba pero...
    me gustaria que estos 2 labels estubiesen mas juntos y no sé como =(

    http://img42.imageshack.us/img42/8123/capturaparapotroxddd.jpg

    puedes verlo desde aqui si no lo ves bien

    http://pruebastroyano.blogspot.com/

    espero haber sido claro y que me puedas ayudar =(
    un abrazo

    ResponderEliminar
  26. Alex, suerte con el proyecto.

    Troyanonano, no veo que sean los márgenes, quizá debas aumentar el ancho de una de las sidebars para que ocupe el espacio que deja vacio.

    ResponderEliminar
  27. ummm pero es que yo no quiero que ocumen mas las sidebars sino la zona de escribir... =/ como podria hacer eso?

    ResponderEliminar
  28. En el #main-wrapper { agranda el ancho (width) de ese contenedor hasta que ocupe el espacio que quieres.

    ResponderEliminar
  29. Hola de nuevo El Potro, en primer lugar gracias por tu respuesta, soy el usuario "Webmaster" que cambié mi nick, había leído ese otro post que indicabas sobre cómo blogger se come comentarios y tenías razón, se zampó un comentario de uno de mis posts. Ahora bien, tengo otra duda a ver si puedes ayudarme, el caso es que esto de los comentarios me aparece también en páginas estáticas, lo cual me gustaría cambiar, he probado con tu truco de ocultar entradas pero con mi plantilla se descuadra el sidebar... alguna sugerencia? muchas gracias por adelantado.

    ResponderEliminar
  30. Ya he actualizado la entrada para que veas cómo ocultarlo en las páginas estáticas.
    Saludos.

    ResponderEliminar
  31. Quedó perfecto! gracias otra vez!, también he aplicado el truco al botón para compartir por Twitter y Facebook (que hice siguiendo tus consejos a través del post correspondiente), ahora es el turno del botón Me gusta (también de facebook). Por cierto no sabrás de algún cuadro de búsqueda que funcione?. Saludos y gracias.

    ResponderEliminar
  32. no te entendi bien potro T___T
    no me sale para ajustar ancho ni nada,solo me sale esto en esa parte

    #main-wrapper {overflow:hidden;}

    .clear {clear:both;}

    #blog-pager-newer-link {float: left;}

    #blog-pager-older-link {float: right;}

    #blog-pager {text-align: center; margin:15px 0; }

    ResponderEliminar
  33. Jorge García, el que uso y que me parece más efectivo es el motor de búsqueda personalizada.

    Troyanonano, tienes repetido el #main-wrapper busca el segundo.

    ResponderEliminar
  34. Lo he insertado en mi blog pero por el momento no encuentra nada de lo que busco...aunque he leído más arriba que tiene que indexar así que esperaré un par de días a ver qué tal va. Saludos Potro.

    ResponderEliminar
  35. COMO HAGO PARA PONER LOS COMENTARIOS ABAJO DE LA ENTRADA ? NO SE QUE TOQUE Y SE ME CAMBIO AHORA NOSE COMO PONERLO EN SU LUGAR

    ResponderEliminar
  36. Lee esta entrada y elige la tercera opción, con eso aparecerán los comentarios debajo de cada entrada.

    ResponderEliminar
  37. Gracias Potro, eres el mejor, ya lo puse en mi Blog Reflexiones Cristianas

    Saludos!! Desde Venezuela

    ResponderEliminar
  38. Hola, es de mucha ayuda lo que publicas muchas gracias.
    Una pregunta, al darle click encima, debería abrir los comentarios? o es sólo un ícono?
    gracias
    Gaby

    ResponderEliminar
  39. También debe abrir los comentarios, no en una ventana aparte pero sí debe dirigirte a los comentarios debajo de la entrada.

    ¡Saludos!

    ResponderEliminar
  40. Gracias! lo tuve que sacar porque no abria nada :( peinso que tal vez es porque mi plantilla es de las nuevas de blogger..
    saludos
    Gaby

    ResponderEliminar
  41. Es posible, ya he estado leyendo algunos reportes de usuarios con las nuevas plantillas a los cuales les han dejado de funcionar muchas cosas :s

    En cuanto me sea posible probaré con una plantilla nueva para ver cómo se puede arreglar en caso de que sea eso.

    ¡Saludos!

    ResponderEliminar
  42. Hola Potro, disculpa, pero no entendí eso de encerrar el código para que no aparezca en las estáticas.
    Sorry
    Gaby

    ResponderEliminar
  43. Hola Gaby,

    Es que si tienes una página estática y usas el ícono de los comentarios también aparecerá en las páginas estáticas, entonces, para que ahí no aparezca tienes que usar el código que se menciona en la actualización y en donde dice ...aquí va el código... ahí pones el código que se explica en esta misma entrada.

    Saludos.

    ResponderEliminar
  44. Hola potro gracias por tu aporte, ya lo aplique, pero ahora me queda una duda el numero de comentarios siempre aparecen abajo de la entrada, como hago para ocultarlo ya que lo tendría 2 veces, agradecere tu respuesta.

    ResponderEliminar
  45. Para eliminar el enlace de comentarios debajo de las entradas expande los artilugios, busca y elimina esta parte:

    <span class='post-comment-link'>
    <b:if cond='data:blog.pageType != &quot;item&quot;'>
    <b:if cond='data:blog.pageType != &quot;static_page&quot;'>
    <b:if cond='data:post.allowComments'>
    <a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><b:if cond='data:post.numComments == 1'>1 <data:top.commentLabel/><b:else/><data:post.numComments/> <data:top.commentLabelPlural/></b:if></a>
    </b:if>
    </b:if>
    </b:if>
    </span>

    ResponderEliminar
  46. Muchisimas gracias, ya lo hice como lo indicas y funciona perfecto, siempre estoy pendiente de tus trucos jejeje, son buenisimos.

    ResponderEliminar
  47. Tenía el problema de las páginas, volví para ver si me podías ayudar y me encuentro la actualización.
    Muchas gracias por la actualización!. Ahora ya que me pongo quiero comentarte un problema con mi blog (http://carolumart.blogspot.com) y es que se ve mal en según que navegador y en otros ni se ve!, creo que debe ser un problema del editor que utilizo pero no lo sé.
    Gracias de nuevo!

    ResponderEliminar
  48. De nuevo aquí, es que me di cuenta que el numero de comentarios arriba del post no me redirige cuando hago click en el numero. Te agradeceré si me ayudas a ver que fallo pueda tener mi plantilla.
    Gracias

    ResponderEliminar
  49. En muchas plantillas sobre todo las que no son de Blogger hay mucha incompatibilidad con Internet Explorer, las cosas están encima de otras, otras debajo y otras no están, es todo un lío. Es por eso que siempre antes de elegir una plantilla y cada vez que se modifica algo hay que probarlo cómo se ve en todos los navegadores para no tener que sufrir después de muchas horas de trabajo.

    Respecto a lo otro no sé qué pueda ser, el código del número de los comentarios tiene el enlace para que dirija a ellos, quizá lo estás poniendo en alguna otra ubicación o hay algún otro elemento que "tapa" el enlace y no permite que se pueda hacer click en él.

    ResponderEliminar
  50. noo encuentro ese código potro =( (en el cual se debe escribir abajo)

    ResponderEliminar
  51. Debes expandir los artilugios para encontrarlo.

    ResponderEliminar
  52. Gracias!! Está genial!! Muy bueno tu blog!!!!! :)

    ResponderEliminar
  53. Hola muy buenas
    En primer lugar muchas gracias por la información que nos das a todos.
    En segundo lugar tengo un problema al insertar el código, pues funciona perfectamente pero a la izquierda en línea con el icono aparece de nuevo el número de comentarios.

    Puedes verlo en el blog: http://creativeunleashed.blogspot.com/

    Ayuda! GRACIAS!

    ResponderEliminar
  54. Hola Antno,

    Expande los artilugios y busca esta línea:

    <span class='numComments'>

    Borra desde esa línea hasta el siguiente </span> que encuentres, dale vista previa, si está todo bien guarda los cambios.

    ResponderEliminar
  55. Lo siento, pero eso no m funciona o algo estoy haciendo mal. En mi Html lo que puedo ver desde lo que me has marcado (Aquí no me permite copiartelo, pero m da un error).

    Gracias por tu rápida respuesta, espero haber si lo puedes solucionar.!

    ResponderEliminar
  56. Seguro estás copiando algo más o algo menos del código, es por eso que te marca error.
    Veamos otra forma de hacerlo, pega antes de ]]></b:skin> esto:

    .numComments {display:none; visibility:hidden;}

    Con eso también debe funcionar.

    ResponderEliminar
  57. Ouyea! Muchisimas gracias El Potro! Por haberte centrado en mi problema! muchisimas gracias! Felicidades por la página, muy muy buena! Gracias de nuevo!

    Mi blog es sobre diseño gráfico para quien le guste o interese esta es la dirección:

    http://creativeunleashed.blogspot.com/

    Saludos y Gracias!

    ResponderEliminar
  58. Es un placer haberte podido ayudar :)
    Saludos.

    ResponderEliminar
  59. O soy muy estup... o que? pero no entiendo la parte de encerrar el codigo X__X

    ResponderEliminar
  60. Ahhhhhhh!!! ahora si lo entendí ja! perdón pero a consulta absurda te dejes unos clic en agradecimiento. y la verdad muy bueno el blog! y muchas gracias

    ResponderEliminar
  61. Gracias, qué bueno que lo solucionaste ;)

    ResponderEliminar
  62. Hola Potro me ah gustado mucho este truqillo :) .. Gracias por compartir este tipo de información.

    Sabés todo salio bien pero ahora dentro de la imagen que coloque sale la imagen que tenia anteiormente y no se quitarsela. Mira aca mi blog oara que te des cuenta. :/

    http://capsulas-superacion.blogspot.com/s

    De ante-mano muchisimas gracias y sigue adelante mira que ayudas a muchos xd!

    ResponderEliminar
  63. como va potro?!?!? mira soy nuevo en este tema de los blogs y no entiendo mucho. Estuve viendo si podía de alguna forma poner a blogger un cuadro de comentario como los de wordpress pero no lo encontré, es eso posible??, lo que me gusta de wordpress es que para dejar el comentario tenes que dejar el nombre y el mail (obligatorio) no es como blogger que tiene que ser de una cuenta de google o anonimo. Lo que me interesa es que los comentarios salgan con un nombre y que solo yo pueda ver su mail, sin importar que sea de gmail de hotmail etc. se entiende lo que quiero hacer?? te agradecería muchísimo si me podes ayudar!! saludos
    pd: respondeme antes de tomar la piña colada jeje!!

    ResponderEliminar
  64. LnrdG, qué bueno que ya lo has resuelto :)

    fedeprueba, pues podrías usar el de Disqus.com aunque sería bueno que antes de usarlo leyeras un poco en la red sobre el tema ya que hay quienes pueden tener problemas con ello.

    gygi13, qué bueno que te ha gustado!

    ResponderEliminar
  65. Hola, necesito ayuda. En mi plantilla no aparece número de comentarios en la portada, y me interesa incorporarlo.
    Agradezco de antemano tu trabajo.

    www.dechivilcoy.com.ar

    Gracias

    Alcides

    ResponderEliminar
  66. Mira esta entrada, ahí está el código que es el link de los comentarios.

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

    ResponderEliminar
  68. Gracias por tu rápida respuesta.
    Mi plantilla no tiene post-footer
    Tampoco post-header-line

    Ni div style='clear: both; clear for photos floats
    Existe alternativa?
    Disculpa, soy novato.

    Gracias!

    Alcides

    ResponderEliminar
  69. Necesitas marcar la casilla 'Expandir plantillas de artilugios' para poder localizar cualquiera de esos códigos.

    ResponderEliminar
  70. Marqué la casilla "expandir", pero no está post-footer
    Tampoco post-header-line.
    La única línea de las mencionadas en un comentario del otro post al que me guiaste,es div style='clear: both

    Pero no continúa con clear for photos floats, como tu indicas en el otro post.
    Evidentemente la plantilla que uso está muy modificada.

    Cómo sigo?

    Alcides

    ResponderEliminar
  71. Pues nada más que lo pongas debajo de <b:includable id='post' var='post'>

    ResponderEliminar
  72. Gracias, era esto lo que necesitaba para agregar el contador y el diseño de fondo que cree! ^^

    ResponderEliminar
  73. Oye amigo y como hago para personalizar el espacio de los comentarios de las entradas?, por ejemplo:
    1.- Asignar una linea o separador entre comentarios.
    2.- Personalizar los comentarios de anonimos y otros que no tengas avatar.

    Gracias espero que me ayudes, ya que CiudadBlogger me a ayudado en mucho de la personalizacion de mi Blog.

    ResponderEliminar
  74. Para poner una línea que separe los comentarios busca esta línea y debajo de ella agrega lo que está en negrita:


    #comments-block .comment-footer {
    border-bottom: 1px solid #000000;

    Para personalizar los avatares de los anónimos, mira esta entrada de Gema:
    gemablog-.blogspot.com/2009/09/avatar-en-comentarios.html

    Saludos y muchas gracias por tu comentario. Me da gusto saber que este sitio te ha sido de ayuda ;)

    ResponderEliminar
  75. Potro, en mi plantilla el icono de los comentarios queda muy arriba... Mi problema en realidad es que los comentarios como aparecen al pie de la entrada, se superpone un poco con las reacciones. Intenté bajarlo para que no suceda esto pero no pude. ¿Podrías decirme qué hacer? (www.recomendamoslibros.com.ar)

    ResponderEliminar
  76. En la parte del código que has agregado busca este fragmento:
    margin:5px 0 0 0;

    Cambia ese 5px por otro valor más alto, por ejemplo 30px, con eso deberá correrse más abajo.

    ResponderEliminar
  77. Hola Potro. Gracias por el aporte. Yo también tengo el problema con las plantillas nuevas que señalas en el comentario #43.

    El icono me funciona perfectamente, pero no consigo crear un enlace a los comentarios (no aparece por defecto).

    Al menos me gustaría poder poner un alt en la imagen que diga "Nº de comentarios", para que no sea confuso.

    Si tuvieras alguna novedad sobre el asunto te agradeceré que me la comentes. Un saludo!

    ResponderEliminar
  78. Por desgracia no toma el atributo title y sigue sin funcionar en las plantillas nuevas. He estado probando por mucho tiempo y no he tenido éxito. El problema está en que el link se pierde cuando tiene una imagen detrás de él, pero desconozco cuál parte de esas plantillas sea la que se deba modificar para que eso no suceda.

    Siento no poder ayudarte :(
    Saludos.

    ResponderEliminar
  79. Me ha sido de gran ayuda, porque al implementar la nueva plantilla, me habían desaparecido los comentarios de la página principal y estaba como loco intentando volver a colocarlos!!!

    Gracias!!

    ResponderEliminar
  80. Oyes no aparece en mi HTML el codigo que dices

    solo me aparece

    Me puedes ayudar

    ResponderEliminar
  81. Necesitas marcar la casilla 'Expandir plantillas de artilugios' para poder localizarlo.

    ResponderEliminar
  82. Hola Me gustaría poder cambiar el color del número ¿Me puedes ayudar a que deje de ser rojo? te dejo el enlace al blog por si te sirve: La Novia Novata

    ResponderEliminar
  83. Mira el comentario #15, ahí está la explicación.

    ResponderEliminar
  84. Como podria poner a trabajar esto estilo en la plantilla simple black metal...

    gracias...

    ResponderEliminar
  85. Del mismo modo que se explica en la entrada.

    ResponderEliminar
  86. yo lo hice y me funciona pero me ditorciona la entradas en la portada....

    mirta este ejemplo de prueba:

    http://pruebas0101.blogspot.com/

    gracias...

    ResponderEliminar
  87. Lo que sucede es que en las tipo magazine el espacio de las entradas en la portada es muy reducido y se deben agregar pocos elementos.
    Lo que podrías hacer es que sólo se muestre el icono de los comentarios sólo en las entradas individuales y en la portada no, para ello encierra todo ese código entre:

    <b:if cond='data:blog.pageType == &quot;item&quot;'>

    y

    </b:if>

    ResponderEliminar
  88. ok.. ahora me quedo perfecto...

    gracias por tu aporte...

    gracias.

    ResponderEliminar
  89. Buenas noches potro, existe la posibilidad de cambiar el color del fondo?
    Gracias de antemano y un saludo

    ResponderEliminar
  90. Buenas noches Manu. El fondo es una imagen, para cambiarle el color tienes que editarla, subirla y luego remplazar la URL que está en color rojo por la tuya que modificaste.

    Saludos.

    ResponderEliminar
  91. gracias potro por tu información y tu rapidez en la respuesta. un saludo

    ResponderEliminar
  92. se podra solo cambiar el color de numero que aparece en la entradaS?

    ResponderEliminar
  93. Gracias Potro se ve excelente en mi blog.

    Saludos.

    ResponderEliminar
  94. Me gustaría poner el mensaje de 0 comentarios en la parte superior derecha del post. ¿Me podrías ayudar? de antemano, gracias.

    ResponderEliminar
  95. En esta entrada se explica cómo hacerlo. Y en esta otra se explica cómo alinearlo.

    ResponderEliminar
  96. me gustaria usarlo porque antes ya lo hise pero puse disqus como sistema de comentario y no me funciona

    ResponderEliminar
  97. Efectivamente si usas un gestor de comentarios independiente al de Blogger no podrás usarlo.

    ResponderEliminar
  98. Hola Potro! Muchisimas gracias por tu ayuda, no se que seria de mi blog sin ti! Ha sido mut facil insertarlo en el blog, ahora, no consigo modificarlo, y es k me gustaria k no estuviese tan pegado a la derecha; cambiar los margenes para darle un poco de espacio a la derecha y arriba. He intentado cambiar los numeros pero solo me cambia la posicion del texto. Espero que me puedas ayudar una vez mas!
    Muchisimas gracias por adelantado!

    ResponderEliminar
  99. Hola Madewithlof,

    La posición puedes cambiarla en esta parte:
    margin:5px 0 0 0;

    El primer dígito es el margen superior, el segundo es el derecho, el tercero es el inferior, y el último es el izquierdo. Modificando esos valores podrás situarlo a la posición que desees.

    ResponderEliminar
  100. Hola potro y como le pongo a cada comentario los numeros asi como lo tienes aqui en el blog que van en orden

    ResponderEliminar
  101. Hola Oscar, en Oloblogger hay una entrada sobre ese tema, ahí podrás encontrar la información que necesitas.

    ResponderEliminar
  102. Quedó estupendo en mi blog.
    Muchas gracias

    ResponderEliminar
  103. muy bueno el truco, pero ...¿habría alguna forma de añadir un texto como por ejemplo: deja tu comentario junto al icono?

    gracias

    ResponderEliminar
  104. Sí, aunque no queda muy bien porque se sale, quizá la mejor forma de hacerlo sea que uses una tabla HTML, y en una celda pones el código del número de comentarios, y en la celda de al lado el texto que quieres.

    ResponderEliminar
  105. Seria genial si el globo con el numero de comentarios le pudieras dar clic y vaya directo a la entrada para que comenten, si no es mucho pedir xDDD

    ResponderEliminar
  106. aa se me olvidaba tengo un gestor de comentarios diferente al de blogger y me funciono perfectamente :D

    ResponderEliminar
  107. De hecho el número debe enlazar a los comentarios, pero en las plantillas del Diseñador de plantillas es todo un circo o.O

    ResponderEliminar
  108. lo otro podria ser, hacer mas llamativa la frase que dice "x Comment" cambiarla por una imagen o algo parecido :D

    ResponderEliminar
  109. Podría ser, pero sería poco funcional.

    ResponderEliminar
  110. El problema es que también me aparece en el formulario de contactos, pero no quiero que aparezca ahí ¿qué hago?

    ResponderEliminar
  111. Para que no se muestre en las páginas independientes encierra el código entre:

    <b:if cond='data:blog.pageType != &quot;static_page&quot;'>

    y

    </b:if>

    ResponderEliminar
  112. hola potro... agregue ese truco... despues de haber leido que con las plantillas del diseñador de blogger habia que ponerlo a la derecha pero me dije: "quizas ya no se de ese problema". Pues si se dio. Me arrepenti de ese truco y solo seleccione el codigo y lo elimine, pero despues de eso el enlace que sale normalmente en el post-footer que dice "# Comentarios" DESAPARECIO... lei el comentario 46 y 47 de este post... en el 47 tu explicas que para borrar ese enlace hay que borrar este codigo (el que pusiste en ese comentario), pues usando un poco la logica, yo no lo elimine si no que lo aumente... ahora ya sale ese enlace... pero sobre el titulo del post... como hago para ponerlo como estaba en el principio (en el post-footer)... mi blog Gracias...

    ResponderEliminar
  113. Hola Xavier,

    Sólo tienes que colocar el código debajo de cualquiera de estas líneas:
    <div class='post-footer-line post-footer-line-1'>
    <div class='post-footer-line post-footer-line-2'>
    <div class='post-footer-line post-footer-line-3'>

    Saludos.

    ResponderEliminar
  114. Holii, queria pedirte otro tutorial :P es que quiero saber como se hace para poner la fecha del post y los comentarios en una imagen al lado del post. asi como en estas templates HautePress y Lummoxie. Queda super bonito y me estoy muriendo por saber como se hace, intente buscarlo pero todos los tutoriales son solo para ponerlos dentro del titulo del post. y asi queda feo. De esta manera se ve algo asi como un archivo, queda bonito y le podria poner unos corazoncitos :$
    Espero tu respuestita, besi.

    ResponderEliminar
  115. Hola liliith♥,

    Deja programo ese tutorial, no te prometo que sea pronto porque aún tengo unos pendientes con otras entradas, pero trataré de sacarlo lo más rápido posible ;)

    ResponderEliminar
  116. uuu yo tambien quiero eso que pidio lilith queda sarpaado!

    ResponderEliminar
  117. el enlace de numero de comentarios me aparece azul hasta que le hago click :(. como cambio eso?

    ResponderEliminar
  118. En el código del comentario, justo después de style='font-size:24px; agrega:
    color:#000;

    Ese es el código del color que quieras que tendrá en número de comentarios.

    ResponderEliminar
  119. mmm no, ya habia intentado eso y poniendole colores distintos y nada D:

    ResponderEliminar
  120. en el mio, el que aparece en mi perfil, tenes que hacer click en "mi pagina web" abajo de contacto.

    ResponderEliminar
  121. Prueba agregando estos estilos arriba de .numComments {
    .numComments a {color:#FFF;}

    ResponderEliminar
  122. Hola El Potro. Primero quiero comentarte que tu blog es muy bueno. He aplicado muchas de tus ideas desde cuando "tropece navegando" en busca de paginas que enseñaran a crear blogs. Y la tuya esta muy bien. Te comento que he querido aplicar este codigo en un blog que estoy empezando a montar (palabra coloquial colombiana = hacer, administrar,crear,, etc)y la imagen de fondo donde esta encuadrado el numero de comentario no aparece completa...quisiera que porfavor me ayudaras... debido a que no se mucho HTML algunas veces dudo de como proceder en cuanto a codigos...

    Apreciando tu ayuda.

    Gerson C. Suns

    ResponderEliminar
  123. Hola GCS, muchas gracias por tu comentario :)
    Por cierto que aquí en México también usamos la palabra montar, tiene varios usos, pero igual lo usamos como lo has ejemplificado.
    He entrado a tu blog para ver lo que mencionas de la imagen del comentario pero no lo vi puesto, al menos no en el blog de tu perfil. Si lo has puesto en algún otro blog deja la dirección para poder mirar el código y entender qué puede estar pasando.

    Saludos.

    ResponderEliminar
  124. Hola Potro =D!!!
    ¿Cómo puedo hacer esto pero con una imagen del autor?
    Me refiero a poner una imagen del autor de la entrada a la izquierda del título de la entrada...

    ResponderEliminar
    Respuestas
    1. Hola Amiitha, es más o menos igual que como se explica acá, sólo pega en ese mismo lugar este código:

      <div style='width:48px; height:48px; text-align:center; float:right; margin:5px 0 0 0; padding:5px 7px 0 5px;'>
      <img src="URL de la imagen del autor" />
      </div>

      Eliminar
    2. ¿Y ese código sirve para agregar otros autores? ¿O saldrá la misma imagen en todas las entradas? Explicame por favor *-*

      Eliminar
    3. Mira esta entrada, creo que es lo que estás buscando:
      http://ciudadblogger.com/2010/06/acerca-del-autor-debajo-de-cada-post.html

      Eliminar
  125. Hay alguna manera de que pueda funcionar con Disqus?

    ResponderEliminar
    Respuestas
    1. Creo que lo he encontrado:
      http://www.bloggingehow.com/2011/12/add-circular-background-design-to.html
      Es eso?

      Eliminar
    2. Eso parece, sigue los pasos y comprueba qué tal te funciona.

      Eliminar
    3. Lo he probado y funciona mira:
      www.todaymotor.blogspot.com
      Podrías hacer un tutorial para la gente que lo buscaba.
      Saludos

      Eliminar
  126. Potro, esta es la ultima! (Por el momento) XD Sabes como puedo eliminar u ocultar la palabrita "comments" que aparece en todas las entradas? Gracias

    Mi blog: http://vulvamag.blogspot.com

    ResponderEliminar
    Respuestas
    1. No veo esa palabra en tus entradas Diego, supongo que ya has sabido cómo quitarla.

      Eliminar
  127. hola Potro, quería saber a que se puede deber que ultimamente este fallando el numero de comentarios en miblog, lo tengo hace tiempo, segui este tutorial pero últimamente me esta mostrando cero comentarios cuando hay mas de 0 o menos cuando hay más, mira www.bebloggera.com

    espero me puedas ayudar para poder arreglar este asunto que viene fallando hace algunos días
    besos y gracias por todo como siempre

    ResponderEliminar
    Respuestas
    1. Hola Be Bloggera, he entrado a tu blog pero no he encontrado problema con ella. Las dos últimas entradas muestran cero comentarios porque en efecto no tienen comentarios, la tercera marca dos comentarios, he ingresado a ella y sí tiene los dos comentarios que dice en la portada :/

      Eliminar
  128. Este comentario ha sido eliminado por un administrador del blog.

    ResponderEliminar
  129. No seas pendejo potro eso no sirve a mi me sale en la pantalla principal todo mal no sirve, me haces perder mi tiempo

    ResponderEliminar
    Respuestas
    1. Nadie te hace perder el tiempo pues nadie te obliga a estar acá. Si revisas los comentarios verás que a todos les funciona salvo uno que otro problema que se resuelve con tiempo, así que deberías considerar que eres tú el que no lo está haciendo bien.
      Independientemente de eso, o moderas tu vocabulario o no regreses porque aquí a todos se les trata con respeto, por lo tanto te exigimos lo mismo.

      Eliminar
  130. Me funciona perfectamente! Hay forma de ponerlo abajo del post y no arriba? Gracias!

    ResponderEliminar
    Respuestas
    1. Sí, puedes ponerlo arriba o debajo de <div class='post-footer'>

      Eliminar
  131. Hola:
    Tengo una nueva plantilla y ya venia incluido como lo puedo quitar¿?
    Mi blog: www.pequemundossims.blogspot.com

    ResponderEliminar
    Respuestas
    1. Localiza el código y elimínalo, debe verse más o menos así:

      <b:if cond='data:post.allowComments'>
      <a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><b:if cond='data:post.numComments == 1'>1 <b:else/><data:post.numComments/></b:if></a>
      </b:if>

      Eliminar
  132. Cuando modifico el tamaño de la fuente queda igual y como ya venia incluido algo similar en la plantilla elimine los esylos que tenia pero no funciona como le haria entonces?

    ResponderEliminar
    Respuestas
    1. Habría que ver qué código estás usando para cambiar la fuente y en cuál blog lo estás haciendo.

      Eliminar
  133. MUCHAS GRACIAS POTRO, he encontrado la solucion a mi problema en este artículo.

    ResponderEliminar
  134. Hola potro esta excelente pero yo uso la caja de comentarios de disqus y cuando comentan por ahy en la nube no aparece que hallan comentado (sique en 0) sabes como hacer para unir los comentarios de disqus con este boton gracias!!

    ResponderEliminar
    Respuestas
    1. No sé decirte brahian, ese es un gestor independiente al de Blogger, no sé si haya modo de enlazar esos datos y mostrarlos.

      Eliminar
  135. ashhh que falla men... :S igual gracias me quedo con la nube :D esta muy buena

    ResponderEliminar
  136. Hola, Potro :)

    Como siempre, gracias. Había estado buscando esta forma de resaltar comentarios desde hace tiempo, ya empezaba a pensar que tebdría que poner una plantilla o algo así... La nube me gusta; creo que me quedaré con ella. Lo único es que el fondo del ícono es celeste y como que no da con los colores de mi blog, ¿podrá eso cambiarse? Quería ponerle un fondo blanco. ¿Y cambiar el diseño del número, como ponerlo el cursiva, por ejemplo? Aún no he podido ver en enlace a otros íconos que colocaste, pero a ver si le echo una mirada pronto :)

    Por cierto: yo tengo una plantilla de Diseñador de Blogger, hecha manualmente, pero el enlace funciona sin borrar lo de "float:right". Mejor, que así se ve como quería :)

    Te dejo la URL de mi blog: http://iuska.blogspot.com/

    ResponderEliminar
    Respuestas
    1. Hola Kat, el fondo celeste es parte de la imagen, si lo quieres de otro color tendrías que usar otra imagen. El diseño del número sí que lo puedes cambiar, después de font-size:24px; puedes poner algún estilo, por ejemplo:
      font-style:italic;

      ¡Saludos!

      Eliminar
  137. Hola potro, gracias por el tutorial. ¿Cómo puedo poner entonces el bocadillo a la derecha y que me funcione el link a los comentarios? Porque es como dices, mientras está el "float:right" está bien cuadrado en la página y en su sitio, pero no funciona el link. Al quitar esa parte del codigo funciona el link pero se descuadra por completo. Y me gustaría poder tener ambas cosas, a la derecha y con link.
    He probado a quitar el float y moverlo a base de margin, pero no funciona.

    Gracias

    ResponderEliminar
    Respuestas
    1. Hola Antonio, quita el script que inhabilita el botón derecho para que pueda inspeccionar la plantilla y ver si puedo resolver algo.

      Eliminar
    2. Hola, me uno a esa misma pregunta!
      He intentado muchas cosas, pero al final como dice el tocayo, o queda bonito o funciona el link, pero no las dos cosas.

      Eliminar
    3. Hola Antonio, mientras se tenga la flotación (a la derecha o izquierda) se tendrá ese problema, a no ser que tu plantilla determine otra cosa pero para ello habría que ver en cuál lo has puesto.

      Eliminar
  138. BUENOS DIAS
    YO TENGO EL PROBLEMA CONTRARIO ME SALE EL FORMULARIO DE COMENTARIOS ARRIBA Y NO LO QUIERO ALLI ,LO QUIERO ABAJO DEL POST , COMO SIEMPRE
    MUCHAS GRACIAS POR TU AYUDA

    mademoisellealex.com

    ResponderEliminar
  139. hola, el tuto esta muy interesante, pero tengo una consulta, en mi blog: androtecnology.blogspot.com no utilizo los comentarios de google si no el de intensedebate, esto me funcionaria igual con intensedebate??

    gracias de antemano!!

    ResponderEliminar
    Respuestas
    1. No que yo sepa, sólo lo he probado con los de Blogger.

      Eliminar
  140. Yo quiero borrar este contador de la cabecera porque se ve muy grande y ademas se ha desconfigurado hacia la izquierda de la cabecera del post. quisiera reeemplazarlo con el boton sencillo que tú tienes quue dice "X comentarios". Mi plantilla es la Simples 2.0. ojalá me puedas ayudar. Gracias.

    ResponderEliminar
    Respuestas
    1. Hola José, entré a tu blog pero parece que ya lo has cambiado como querías.
      Saludos.

      Eliminar
  141. Potro buen día necesito saber el código para ponerle un fondo ala numeración de los comentarios como aquí se muestra, en color blanco las letras y el fondo naranja !!! y cuando responden cambia el fondo de la misma a color azul turquesa espero me puedas apoyar

    ResponderEliminar
    Respuestas
    1. Hola Marcos, buen día. No sé qué método hayas usado para la numeración, el mío tiene los colores de este modo:

      .comments li:before {
      content: counter(contadorcomentarios,decimal);
      counter-increment: contadorcomentarios;
      float: right;
      background-color: #FF8442;
      color: #FFF;
      padding: 5px 8px;
      font-size: 20px;
      }
      .comments li li:before {
      content: counter(contadorcomentarios,decimal) "." counter(contadorsub,decimal);
      counter-increment: contadorsub;
      float: right;
      padding: 4px 6px;
      background:#64d3e5;
      color: #FFF;
      font-size: 18px;
      }

      Eliminar
    2. El primero es para los comentarios solos y el segudo es para las respuestas.

      Eliminar
  142. Hola amio como estás, me gusta mucho lamanera de ayudarnos a resolver nuestras dudas, eres un encanto, yo tengo un problema jejeje, quiero resideñar mi blog y cuando voy a hacer los cambios sencillamente no se guardan y quedan como siempre, no se que puedo hacer porque no soy nada buena con estas cosas, la verdad no se ni como logre diseñar mi blog jejej, tambien quiero poder colocar el numero de comentarios pero nunca encuentro nada en la plantilla, necesito tu ayuda urgente... besos!

    ResponderEliminar
    Respuestas
    1. Gracias por tu comentario :)
      Para encontrar códigos da click en los códigos y luego presiona las teclas CTRL + F.
      Para lo otro, ¿has probado en otro navegador, o eliminar las cookies y caché de tu navegador actual?

      Eliminar
  143. Gracias, me ha quedado genial!!!
    Doy un truco para los que tengan disqus, que me he vuelto loco pero he dado con ello.
    Hacer lo que dice el potro, tal cual, lo único que teneis que hacer (mira que era facil)
    entrar en admin de disqus, en settings y en Comment Count Link poner lo siguiente:
    Zero Comments ............. {num}
    One Comment ............... {num}
    Multiple Comments ........ {num}

    Y con eso os funcionará perfecto!!
    Gracias!!

    ResponderEliminar
  144. tengo la fecha y el titulo del post centrados, me gustaría que me aparecieran en lugar de un bocadillo, en un circulo y arriba de estas dos cosas, como podría hacerlo?

    gracias de antemano

    Un saludo,

    Pedro

    ResponderEliminar
    Respuestas
    1. Localiza esos códigos (el de fecha y título) y pon el de los comentarios arriba de ellos. Si quieres que la imagen no sea un bocadillo entonces cambia la imagen por otra que prefieras. Si quieres que esté centrado encierra el código de los comentarios entre <center> y </center>
      Saludos.

      Eliminar
  145. Hola El Potro, como estás...
    A ver si me puedes echar una mano con una duda que tengo sobre los comentarios en blogs.
    Este post que tratas intenté realizarlo pero resulta que me desplazaba los títulos más abajo, así que lo desestimé (no se si se puede hacer de otra forma).
    Mi pregunta es si sabes como puedo cambiar el texto donde pone "0 comentarios" en las entradas abajo, desearía que ese texto se viera más grande o en otro color, además de poder cambiar el "0 comentarios" por otra frase, o también poder poner una pequeña imagen personalizaba que al pulsarla dirigiera hacia los comentarios. A ver si la gente lo ve más a primera vista y se anima a comentar con más facilidad.

    Muchas gracias por todo.
    Saludos ;)

    ResponderEliminar
    Respuestas
    1. Hola Panzer Commander. Si entradas en Diseño > Entradas del blog ahí podrás cambiar la palabra "comentarios" por cualquier otra.
      El código de ese enlace es este:

      <a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'>
      <data:post.commentLabelFull/>:
      </a>

      Antes o dentro de él puedes poner el código de la imagen que quieras. Si quieres darle formato al texto la clase para ello es .comment-link

      Eliminar
    2. Hola El Potro, muchas gracias por responder tan rápido.
      Pero me es imposible hacer lo que me dices, pongo en "entradas blog" la palabra que quiero y no se cambia y si quiero poner una imagen en la plantilla html tampoco veo resultados, veo como que quiere aparecer la imagen pero no sale. (Ahora no está puesta). Quizás lo esté bloqueando algún elemento?, tipo la pestaña que pone "leer más" o la imagen que tengo de "más de 1000 imágenes". No se que puede pasar. :(

      Lo que me comentas de .comment-link hasta ahí no llego con la programación, jeje no entiendo como puedo cambiar el formato de texto, colores, etc.

      Saludos :)

      Eliminar
    3. Basicamente es algo así:

      .comment-link {
      ...aquí los estilos que quieras...
      }

      Ahí pondrías las propiedades que quieras tales como el color, tamaño de la fuente, etc.
      Lo de la imagen, no lo sé, bien podría ser que lo mencionas pero sin verlo puesto es imposible atinarle al problema.
      Para lo otro, mira aquí: Cambiar el nombre de los datos del post footer

      Eliminar
    4. Gracias El Potro, veré lo que puedo hacer.
      Saludos. ;)

      Eliminar
  146. potro como se puede hacer para meter la burbuja de comentarios dentro de las cajas de entradas resumidas estilo magazine?

    ResponderEliminar

Si tu blog contiene material protegido por derechos de autor habilita tu perfil y deja únicamente el nombre de tu blog, no dejes la dirección del mismo, de lo contrario el comentario será eliminado.

Nota: solo los miembros de este blog pueden publicar comentarios.

 
Ir Arriba Ir Abajo
I Ciudad Blogger