TRUCOS y
TUTORIALES
para tu blog
No, no vendemos
camisetas... aun
Camiseta Ciudad Blogger

Enmarcar y separar comentarios en Blogger

9 de febrero de 2011 | Número de comentarios397 comentarios
Los comentarios son una parte fundamental de un blog, pues en ellos se ve reflejada la opinión de los lectores respecto a una entrada o nuestro sitio, por lo tanto es importante dedicarle un poco de nuestro tiempo para hacer de esta área un espacio presentable, accesible y ordenado.

Y si de orden se trata entonces es necesario que cada comentario pueda identificarse donde empieza y dónde termina, de lo contrario se convierte en un revuelto de letras del cual el lector puede salir huyendo. Veamos pues algunas formas de darle un poco de orden para delimitar el área de cada comentario.


El primer método es el más sencillo, y se trata de poner un borde debajo de los comentarios, esto es para separar cada comentario del blog de una forma simple pero efectiva.


Para agregar este separador sencillo sólo entra en Diseño | Edición de HTML y antes de
]]></b:skin> pega lo siguiente:
#comments-block .comment-footer {
border-bottom:1px solid #240B3B; /* Borde de los comentarios */
}
.comment-timestamp { /* Fecha de los comentarios */
font-style:italic;
font-size:9px;
}
Si usas los comentarios anidados entonces agrega lo siguiente:
.comments .comment-block {
padding-bottom:10px;
border-bottom:1px solid #240B3B; /* Borde de los comentarios */
}
.comments .comments-content .datetime { /* Fecha de los comentarios */
font-style:italic;
font-size:9px;
}
Podemos hacer lo mismo pero que el separador de comentarios sea una imagen.


En ese caso el código que has de pegar es el siguiente:
#comments-block .comment-footer {
background-image:url(https://lh3.googleusercontent.com/_dsEG33PDaHw/TVHt_YdQyPI/AAAAAAAAA9E/eIHk3N7aisE/divider-andrea-baroni.gif);
background-repeat:no-repeat;
background-position:center bottom;
height:70px;
}
.comment-timestamp { /* Fecha de los comentarios */
font-style:italic;
font-size:9px;
}
Y si usas los comentarios anidados deberás usar este código:
.comments .comment-block {
background-image:url(https://lh3.googleusercontent.com/_dsEG33PDaHw/TVHt_YdQyPI/AAAAAAAAA9E/eIHk3N7aisE/divider-andrea-baroni.gif);
background-repeat:no-repeat;
background-position:center bottom;
padding-bottom:20px;
height:70px;
}
.comments .comments-content .datetime { /* Fecha de los comentarios */
font-style:italic;
font-size:9px;
}
La URL que está en color azul es la imagen que puedes cambiar por la que gustes, sólo recuerda que en el height deberás establecer la altura de la imagen más unos 20px más, por ejemplo, si el alto de la imagen es de 50px entonces el valor será de 70px
Esto es únicamente para que la imagen no se encime a la fecha de los comentarios.

Pero igual podemos darle más estilos a cada comentario, por ejemplo enmarcar los comentarios añadiendo un color de fondo y un borde (No aplica para comentarios anidados).


Para conseguir este tipo de estilo marca la casilla Expandir plantillas de artilugios ahí mismo en Diseño | Edición de HTML y busca esta línea:
<b:loop values='data:post.comments' var='comment'>
Debajo de ella agrega esto:
<div class='comentarios-cb'>
Luego busca un poco más abajo el siguiente </b:loop> que encuentres y justo arriba de él agrega esto:
</div>

Ahora antes de ]]></b:skin> pega lo siguiente:
.comentarios-cb {
background:#E6E6E6; /* Color de fondo */
border-top:1px solid #240B3B; /* Borde superior */
border-bottom:1px solid #240B3B; /* Borde inferior */
margin-bottom:20px;
}
.comment-body {
padding:10px;
color:#000; /* Color de los comentarios */
}
.comment-timestamp { /* Fecha de los comentarios */
font-style:italic;
font-size:9px;
padding-right:10px;
padding-left:10px;
}
#comments-block .comment-footer {
margin-bottom:5px;
}
#comments-block .avatar-image-container {
float:left;
position:static;
margin-right:15px;
margin-left:5px;
margin-top:5px;
}

¿Y cómo se vería con bordes redondeados?


El procedimiento es el mismo que el anterior sólo que el código que habremos de pegar antes de ]]></b:skin> será este:
.comentarios-cb {
background:#E6E6E6; /* Color de fondo */
border:1px solid #240B3B; /* Borde */
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
margin-bottom:20px;
}
.comment-body {
padding:10px;
color:#000; /* Color de los comentarios */
}
.comment-timestamp { /* Fecha de los comentarios */
font-style:italic;
font-size:9px;
padding-right:10px;
padding-left:10px;
}
#comments-block .comment-footer {
margin-bottom:5px;
}
#comments-block .avatar-image-container {
float:left;
position:static;
margin-right:15px;
margin-left:5px;
margin-top:5px;
}
(Los bordes redondeados en Internet Explorer no funcionan con CSS)

En cualquiera de los casos se puede cambiar el color de fondo, borde, etc. en las partes que tienen anotaciones en color verde.

La /* Fecha de los comentarios */ puede cambiarse de formato en Configuración | Comentarios | Formato de hora de los comentarios.
Pero de igual modo podemos ocultarla, sólo basta con agregar debajo de .comment-timestamp { esto:
display:none;
Sólo ten en cuenta que si ocultas la fecha también se ocultará el icono para eliminar los comentarios.

En estos dos últimos estilos se especifica el área donde se cambia el color de los comentarios, ahí se pueden añadir otros estilos como el tamaño de la letra, tipo de fuente, etc.
En el caso de los dos primeros métodos sólo basta con agregar a ese código este otro fragmento para darle formato al texto de los comentarios:
.comment-body {
color:#000; /* Color de los comentarios */
}

Haciendo algunas de estas modificaciones los comentarios se verán más ordenados y serán más fáciles de identificar y leer por los lectores.

397 comentarios :

  1. Hola Potro, muchas gracias por este tuto, creo que me inclinaré por los de bordes redondeados, un abrazo

    ResponderEliminar
  2. Muy bueno, yo utlicé el primero, que es sencillito, pero muy chulo.

    Gracias Potro

    ResponderEliminar
  3. Por cierto ¿como puedo instalar un contador de entradas, días y comentarios como tu tienes?

    Saludos y perdona por las molestias

    ResponderEliminar
  4. wenaa :D

    excelente buscava esto, muchas gracias potro saludos

    ResponderEliminar
  5. MaG@S RaDioMuSiC, excelente elección :)


    Marina Salas Blog, en esta entrada está la información.

    ResponderEliminar
  6. uf al fin, estaba loco tratando de separarlos con una imagen y pormas intentos q habia hecho no lo conseguia y nuevamente aqui lo encuentro con la explicacion mas sencilla y efectiva
    mil gracias!

    ResponderEliminar
  7. MCarlitooH2, gracias a ti weon, por estar siempre :)


    Admin, igual me pasa a veces que le doy muchas vueltas a algo que al final termina siendo muy sencillo :)

    ResponderEliminar
  8. esta bien para cambiar un poco los comentarios que trae por defecto blogger que son un poco simples

    ResponderEliminar
  9. Qué genial!! adoré el de la vaquita de San Antonio! jejeje me parece que pondré ese a ver cómo queda. Gracias como siempre!!

    ResponderEliminar
  10. queda genial la idea de poner una imagen separando los comentario....muchísimas gracias por compartir tanta información útil para todos los bloggers...
    Un abrazo

    ResponderEliminar
  11. Potro, toqué hace un tiempo el html de este blog http://desesperatecats.blogspot.com/ y aunque marqué que al final de la entrada salgan los iconos para compartir, sencillamente no se ponen. ¿Cómo arreglo esta chapuza? Y sino, ¿qué entradas para meter los enlaces para compartir tiene por ahí?

    Gracias de antemano, como siempre.

    ResponderEliminar
  12. PeliculasTube, bastante simples, pero con un poco de CSS se puede mejorar :)

    Pabela, no las conocía por ese nombre, aquí en México les llamamos catarinas :) pero sí, están muy lindas!

    ResponderEliminar
  13. Anakonda61, gracias a ti por tu visita!

    Dreko LockerzLatinos, what? :P

    martinyfelix, mira en esta entrada que explica cómo ponerlo.

    ResponderEliminar
  14. Muy buena entrada, aunque cambio los colores de fondo y borde pero no se entera. A ver que me puedes contar de eso.

    ResponderEliminar
  15. Hola Potro no había pensado en esto pero me parece una exelente idea como todas las que nos compartes, voy a probar con la segunda opción y te cuento como me quedó. un abrazo =)

    ResponderEliminar
  16. gracias potro y puedo sustituir el "dijo.." por una imagen?

    ResponderEliminar
  17. Hola de nuevo amigo potro muy buenos tus ayudas me encanta tu web.

    pero tengo una pregunta que no ba con el tema de este post pues me gusraia que me ayudaras en

    como le cambio el tamaño de los titulos de los post e buscado y no e dado como = si puedes el tipo de letra

    Gracias por la ayuda...

    ResponderEliminar
  18. pos_ch, podría ser la plantilla, ¿en cuál blog lo pusiste y cuál método has usado?

    Silvia , ya me contarás cómo te fue ;)

    ResponderEliminar
  19. nEjO, claro, en esta entrada puedes ver cómo cambiar el "dijo..." de los comentarios, ya sea por otro texto o por una imagen.

    ResponderEliminar
  20. Beneco, usualmente es de esta forma:

    h3.post-title {
    font-size: 14px;
    }

    ResponderEliminar
  21. Andá que bueno, lo acabo de poner en mi blog.. y queda perfecto, le da un toque diferente... y como tu dices, más ordenado.
    Así da gusto :D

    Gracias.

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

    ResponderEliminar
  23. Hola, Potro!!! Excelente, ké bueno ke por fin hiciste un post sobre esto, tú me ayudaste a hacer esta misma división de mis comentarios hace como un año o algo así, hasta ahora solo los tenía con la línea simple, pero creo ke probaré esta vez con una imagen (me gustó la catarina =P) para darle otra fachada al blog.

    Mil gracias como siempre por compartir!
    Besote =)

    ResponderEliminar
  24. Hola Potro, muy buen post. Tengo un problema, resulta que desaparecieron los seguidores.

    Solo estaba poniendo el "Ir arriba, Ir abajo" y despues me di cuenta de que los seguidores ya no estaban. ya trate de quitarlos y ponerlos y no se ven. Espero que me puedas ayudar. Muy buen blog.

    http://rockclasico1.blogspot.com

    ResponderEliminar
  25. Muy buena entrada. La usaría si tuviera alguien que las comentara pero en fin. Me gustaría poner el botón "Me gusta" justo donde lo tienes ahora. ¿Como lo puedo hacer?

    ResponderEliminar
  26. nenna, estoy seguro que a tus lectores les dará más gusto ;)

    Gracias Angel, saludos.

    Merlina, la verdad es que no sé porqué lo retrase demasiado porque igual tuve que explicarlo a algunos a través de comentarios pero ya era necesario hacer una entrada dedicada al tema. Gracias por el beso, otro para ti!

    ResponderEliminar
  27. Emilio, el efecto deslizante que usan las flechas requieren de Scriptaculous el cual hace que desaparezcan los seguidores. Mira esta entrada de Vagabundia que soluciona el problema:
    http://vagabundia.blogspot.com/2010/03/problemas-con-seguidores-usando.html


    Indeziisoow, sólo lo he puesto en el post-footer del blog.

    ResponderEliminar
  28. La plantilla es de blogger, el estilo del comentario es el de los globos, lo raro es que puse el fondo blanco y el borde negro y se ven los comentarios separados por una linea de punto pero con el fondo de color de la entrada.

    ResponderEliminar
  29. Saludos Potro…

    Soy seguidor constante de tu sitio y me parece de los mejores en el área de administración de blog. Cuando creé mi blog, esta fue mi referencia principal. Creo que te escribí en otra ocasión felicitándote por este sitio.

    Ahora te escribo por un consejo:

    Desde el día de hoy a la hora de hacer un comentario en una entrada, me salen unas extrañas letras en ruso, que por mas que las elimino, me vuelven a salir, dejando como resultado un espacio muy poco estético en el comentario una vez publicado. Por lo que he leído por ahí es un spam. Y al entrar al formato htlm encuentro ese spam, pero lo borro y lo borro, y siempre me sale otro.

    Este es mi blog: http://ateismoparacristianos.blogspot.com/

    He buscado en la red y hay poca información.

    ¿Que me recomiendas? ya que no sé si los comentaristas se encontraran también con este problema.

    Te agradezco de antemano tus sugerencias.

    Noé

    ResponderEliminar
  30. pos_ch, recuerda que para aplicar ese estilo primero debes agregar lo que se indica en el estilo anterior, es decir, expandir los artilugios, buscar la línea que se indica y pegar el código. Ya después se agregan los estilos que van antes de ]]></b:skin>

    El método debe funcionar pues al menos en la plantilla Picture Window que es la que usas actualmente lo acabo de probar y funciona sin problemas.

    ResponderEliminar
  31. hola potro sabes como acer esto para el blog mira esta imagen para saver lo k te digo http://oi51.tinypic.com/k1utsk.jpg
    es un cosa de youtube

    ResponderEliminar
  32. Noé Molina,

    Muy probablemente se trata de un virus pero no en el blog, sino en tu equipo.
    Acabo de dejar un comentario de prueba (en el índice de artículos) y no presentó algún caracter extraño ni al redactarlo, ni en la vista previa del comentario, ni en su publicación, lo que indica que no se trata de un problema con el blog.

    Aunque sí debo mencionarte que el gadget de contadores que usas (feedjit.com) ha sido reportado numerosas veces por Google como un gadget que aloja adware y malware en los equipos de los usuarios por lo que muchos blogs han sido eliminados al usar estos gadgets.

    La recomendación es que uses un antivirus que solucione el problema con los caracteres, y que consideres eliminar ese gadget que te mencioné.

    Saludos y gracias por tu comentario.

    ResponderEliminar
  33. vale, ahora reviso todo eso que me has dicho a ver si le pongo solución

    ResponderEliminar
  34. Que nadie me pregunte como lo he hecho porque no tengo ni idea pero al final he conseguido el resultado que quería, ahora solo me queda saber porque no me sale en avatar. Al estilo con globo se le podría añadir un imagen como una tijera sobre la línea inferior como en uno de los ejemplos?

    ResponderEliminar
  35. Pokelevel, uno tal cual no, pero quizá te sirva este enlace:
    http://www.google.com/support/forum/p/youtube/thread?tid=76e9dd439cd1e0e8&hl=es


    pos_ch, agrega también el código para el separador de imagen y tendrás ambos estilos en los comentarios.

    ResponderEliminar
  36. ultima pregunta potro como creas tus platillas potro por k el arsister ne me gusta

    ResponderEliminar


  37. Gracias por el consejo Potro...

    Lo llevaré a cabo inmediatamente...

    Te deseo lo mejor para ti y tus proyectos.

    ResponderEliminar
  38. Hola mi amigo "El Potro" .. Estaba esperando con mucho anhelo este aporte pero lamentablemente no me sirvió ..

    Ingrese el primer código para poner bordes o imágenes y ahora me aparece el cuadro de Facebook en la zona de comentarios.

    Borre el código e ingresé el tercer código con los bordes redondeados y no ahi ningún cambio en el fondo, texto nada...

    Ahora de ves en cuando aparece el cuadro de Facebook en la zona de comentarios..

    http://www.zuski.com/images/62159187741260291642.jpg

    Como puedes ver en la imagen mi comentario es diferente pero si alguna persona quiere ingresar un comentario aparece el cuadro de Facebook y los comentarios de las otras personas no tienen ningún cambio...

    Gracias por tu ayuda...!!!

    ResponderEliminar
  39. Potro, me ha encantado, muy práctico, y sobre todo sencillo de instalar para mí, ya sabes, aunque tengo muy pocos comentarios me gusta que no se revoloteen entre ellos mismos...:)
    Muchísimas gracias. Un beso enorme

    ResponderEliminar
  40. Hola.
    En el Like-Box de mi facebook que tengo en mi blog no aparecen todos los fans que son, solo aparece 83 y en estos momentos hay 90, no se por qué se bloquea en el 83 fans. Y en la página de facebook en el muro también aparecen 83 fans cuando tiene que aparecer 90 en estos momentos. Al lado del muro, en el menú, aparece Wall Paper que es la aplicación de rssgraffiti y cuando se le da click ahí a veces o la mayoría de las veces si aparecen todos los seguidores que son. ¿sabes por qué ocurre esto o qué puedo hacer para solucionarlo?
    La aplicacíón Rssgraffiti últimamente no actualiza el contenido de lo que se publica en el blog, ¿esto tiene algo que ver?
    Muchas gracias, saludos.

    ResponderEliminar
  41. Pokelevel, puedes hacerlo desde el mismo Blogger, limpiando una plantilla y en base a ella la vas modificando.

    ResponderEliminar
  42. BDJMarcelo,

    Sin duda debe tratarse de otro problema pues los dos primeros métodos son simples estilos CSS que sólo afectan el área de los comentarios, por lo que nada de la sidebar se debe ver involucrado; incluso ya tienes una separación en los comentarios lo que confirma que se trata de otro problema, quizá necesites revisar de nuevo cómo lo has colocado revisando que no elimines nada por error.

    Y en el caso de los otros métodos si sólo se ve afectado el cambio en tus comentarios nuevamente es porque el código está mal colocado, o quizá la plantilla ya tiene otras modificaciones en esa área.
    Intenta hacerlo de nuevo, si continua el problema dime cuál es la plantilla que usas para que haga una prueba en ella.

    ResponderEliminar
  43. Hola Potro. Muchas gracias. Si me funciono conla opcion que me dijiste. Gracias y Suerte.

    http://rockclasico1.blogspot.com

    ResponderEliminar
  44. Sofía Serra Giráldez, bastante práctico y sencillo de aplicar. Un beso grande para ti :)


    MENTE NATURAL DE MODA, probablemente se trate de un problema con tu cuenta de Facebook o mejor dicho, de un problema de Facebook. Ya he escuchado últimamente que hay quienes no les aparecen las estadísticas de Facebook o el enlace para recomendar la página.

    ResponderEliminar
  45. Gracias por todo y a seguir trabajando para que tengamos unos blogs muy guapos.

    ResponderEliminar
  46. Hola, Potro! Gusto en saludarte.
    Aunque de vez en cuando me doy siempre mi vueltecita por la ciudad, hacía rato que no dejaba comentarios (creo que desde el año pasado).
    Me gustó este post y me parece muy útil. Ya yo tenía implementado el truco que nos enseñaste hace tiempo, de los comentarios del autor en color diferente y también con el número de cada comentario.
    Pero de todas maneras, cuando hay varios comentarios seguidos, no se apreciaba la división entre ellos. Ahora le agregueé la línea más sencilla y me quedó muy bonito. Gracias.
    Y a propósito, quedó muy bien el nuevo "look" de tu página. Primero, que ahora la página carga más rápido, pues antes ya se estaba volviendo algo pesada y tardaba más.
    Además, así más sencilla y con los nuevos colores tiene un entorno más amigable, (visualmente hablando), y no se presta a confusión, con tantas cosas por todos lados.
    Te felicito.
    Saludos!

    ResponderEliminar
  47. Hola Vicky,

    Qué alegría tener noticias tuyas, ya empezaba a creer que habías olvidado la Ciudad :)

    Tienes toda la razón, aun cuando se tengan diferenciados los comentarios del autor muchas veces se necesita que todos los comentarios estén debidamente divididos entre sí.

    Me da gusto que la nueva imagen del blog haya sido de tu agrado, y a decir verdad justo eso buscaba, que la interfaz fuera más amigable para la navegación y por supuesto acelerar el tiempo de carga.

    Gracias por tu visita!

    ResponderEliminar
  48. Hola mia amigo "El Potro" ....!!

    GRACIAS x tu ayuda al parecer fue un error mío ya pude ingresar correctamente los códigos para los comentarios.

    Pero no entiendo de el por que aparece el cuadro del Facebook en ocasiones el la parte inferior de los comentarios...

    X fa ayúdame con este problemita gracias..!!

    http://www.zuski.com/images/13270840991281800868.jpg

    ResponderEliminar
  49. Hola Potro . . . Espero Puedas Ayudarme
    No me Aparecen las Imagenes de los Avatares
    En los Comentarios como en en Este Blog
    Antes Tenia una Imagen Para Mis Comentarios
    Y Otra Distinta Para los Comentarios Anonimos
    No se que He Borrado . . . Pero Ahora ya bo Estan
    Agradezco de Antemano tu Ayuda
    Un Saludo . . . Gracias

    ResponderEliminar
  50. BDJMarcelo, no lo sé, las cuatro veces que he entrado a tu blog y miro la entrada que pones de ejemplo veo todo en su lugar.


    Bricolaje Informatico, entra en Configuración > Comentarios, y donde dice '¿Mostrar imágenes de perfil en los comentarios?' cerciórate que esté marcado en Sí.

    ResponderEliminar
  51. Hola Potro . . . Ya He Mirado Eso
    La Verdad es que ya he Repasado Todo
    Y no Encuentro el Fallo . . .
    Antes si Funcionaban
    No se Cual es el Problema

    ResponderEliminar
  52. Hola Potro . . . Lo he Solucionado
    Pero Solo en Parte
    Este es el Codigo que Utilizo

    <b:if cond='data:comment.author == data:post.author'>

    <div class='author_message-box' expr:id='data:comment.anchorName'>

    <div class='message-lbc'/><div class='message-ltc'/>

    <div class='message-entry'>

    <div class='message-by'>

    <b:if cond='data:comment.authorUrl'>

    <!-- autor reconocido -->

    <b:if cond='data:comment.author == "Bricolaje Informatico"'>

    <!-- mis propios comentarios -->

    <img class='comenta-avatar' src='https://lh4.googleusercontent.com/_I0uiE6K-4Gc/TLRmTUGGzbI/AAAAAAAAAzA/qaWyRV02wvY/La%20Ultima%20Soluci%C3%B3n.jpg'/>

    <b:else/>

    <!-- comentarios de los visitantes -->

    <img class='comenta-avatar' src='https://lh4.googleusercontent.com/_I0uiE6K-4Gc/TVBO7W6qgmI/AAAAAAAABSc/M4bl4tIP4YE/Wallpapers.jpg'/>

    </b:if>

    <a expr:href='data:comment.authorUrl' rel='nofollow'>

    <data:comment.author/>

    </a>

    <b:else/>

    <!-- comentarios anónimos -->

    <img class='comenta-avatar' src='https://lh3.googleusercontent.com/_I0uiE6K-4Gc/TLRmb9Bf24I/AAAAAAAAAzQ/iAi0F1ggaI4/Servicio%20Tecnico.jpg'/>

    <data:comment.author/>

    </b:if>

    Pero la Foto en los Comentarios Anonimos no me Aparece
    Puedes Detectar Algun Fallo
    No se si Puedo Poner la Direccoion de mi Blog
    http://www.sharkgalicia.com/
    Te Agradeceria Me Echaras un Cable
    Un Saludo . . . Gracias

    ResponderEliminar
  53. Buenisimo Potro me gusto el tercero y lo agregue enseguida. Gracias

    ResponderEliminar
  54. Potro, ya he conseguido ponerlo. ¡Muchísimas gracias, eres genial!

    ResponderEliminar
  55. Hola potro.. a mi no me salen el redondito que fue el que coloque

    ResponderEliminar
  56. Bricolaje Informatico, el código está bien, el problema es que habías borrado la imagen de comentaristas anónimos desde Picasa y eso ha hecho que desaparezcan las fotos de quienes habían comentado con es imagen. No hay modo de recuperarla, por eso no se debe borrar las imágenes sin estar seguros que no haya alguna entrada o truco que lo estén usando.

    Leonardo, seguro que te ha quedado muy bien ;)

    martinyfelix, qué bueno que ya está resuelto entonces :)

    Sofi_winchester, ¿en cuál blog lo has puesto?

    ResponderEliminar
  57. Hola Potro . . . Ya Restaure las Imagenes en Picassa
    Sin Embargo Sigue sin Aparecer La Imagen en los Comentarios Anonimos . . .
    Que mas Puedo Hacer , Estoy un Poco Perdido
    Un Saludo . . . Gracias

    ResponderEliminar
  58. Es en este jeje
    http://seriesupernaturalfan.blogspot.com/
    y asi me sale el comentario
    http://seriesupernaturalfan.blogspot.com/2011/02/jared-doblara-al-ingles-la-primera.html#comments

    ResponderEliminar
  59. Bricolaje Informatico, aunque restaures las imágenes ya no se podrán ver porque la nueva imagen tiene otra URL distinta a la anterior.
    Lo que sucede es que casa comentario se asocia a una URL única que contiene datos tales como el autor, fecha, hora y avatar, y estos datos no se pueden re-escribir. Es por eso que los comentarios que tenían ese avatar ya no mostrarán más el avatar porque fue eliminado y la URL de imagen que tenían ya no existe. Sólo los comentarios nuevos tendrán la nueva imagen que acabas de subir.


    Sofi_winchester , lo acabo de probar en esa plantilla y funciona bien, sólo recuerda que no basta sólo con pegar el código antes de ]]></b:skin> sino que también debes agregar los códigos del método anterior que se encuentran expandiendo los artilugios.

    ResponderEliminar
  60. He seguido las instrucciones para enmarcar los comentarios, no encontré ]]> para finalizar. No he podido hacerlo.

    ResponderEliminar
  61. Usa las teclas CTRL + F para localizarlo más fácil.
    Está cerca de la etiqueta </head>

    ResponderEliminar
  62. Hola Potro . . . Entiendo Todo lo que me Dices
    Sim Embargo Esto no Funciona . . .
    "Sólo los comentarios nuevos tendrán la nueva imagen que acabas de subir"
    He Borrado Todos los Comentarios del Blog
    En los Nuevos Comentarios Aparece la Imagen
    Solo en Mis Propios Comentarios
    Pero en los Comentarios Anónimos No
    Y no se Cual es el Problema
    No Caigo de la Burra

    ResponderEliminar
  63. Sin duda debe tratarse de un problema con la URL de la imagen, quizá hay algún caracter que está faltando pues si el código lo tienes aun como el ejemplo del comentario atrás entonces no parece ser un error en el código.

    Verifica que la URL funciona bien, esto lo puedes hacer pegando la URL en la barra de direcciones de tu navegador para que veas si abre bien o no.
    También agrega la URL entre comillas dobles en lugar de comillas simples.

    Si tampoco funciona así entonces pide asesoría en la entrada donde viste ese truco, quizá ahí hayes con facilidad la respuesta al problema.

    Saludos.

    ResponderEliminar
  64. Hola Potro . . . He Repasado Todo lo que me has Indicado
    Las URL Funcionan Correctamente
    He Puesto Dobles Comillas
    Lo de Pedir Ayuda esta Dificil . . .
    Ya que el Blog Donde Saque Esto Ya no Existe
    Lo que me Parece Raro es que en mis Comentarios
    Si que Aparece la Imagen . . .

    Utilizo Este Codigo por que Mi Blog
    No Muestra los Avatares Asi Como en Este
    El Avatar de Cada Usuario que Hace un Comentario

    Cuando Tengas un Minuto Libre
    En tu Apretada Agenda . . .
    Haz un Post para los que no nos Aparece
    La Imagen del Avatar en los Comentarios

    Yo ya he Probado de Todo sin Resultados Positivos

    Ya no me Enrrollo mas ...
    Gracias por la Atencion Prestada
    Y por el Tiempo que te he Robado

    Seguire Insistiendo . . . Algun Dia lo Conseguire
    Un Saludo . . . Gracias

    ResponderEliminar
  65. ¿Ya probaste con esta explicación de Chica Blogger?
    http://chicablogger.com/blogger-permite-que-muestres-tu-avatar-en-los-comentarios/

    Prueba con ello, sino te funciona dime de dónde has descargado la plantilla que usas para probar el código de los avatares.
    Saludos.

    ResponderEliminar
  66. Tengo Puesto Este Codigo en la Plantilla
    A Mi no me Funciona . . .
    Estos son los Enlaces de la Plantilla
    Este es el Sitio Oficial
    Pero Tiena las Imagenes Caidas
    http://btemplates.com/2008/blogger-template-jeans-2c/

    Puedes Utilizar Esta Otra que si Esta Funcionando
    http://www.bloggertemplatesfree.com/download-jeans-2c-blogger-template/

    Espero con Impaciencia tu Respuesta
    Gracias por la Tu Atencion y Ayuda . . . Saludos

    ResponderEliminar
  67. Qué lío con esa plantilla Bricolaje :/
    Sin duda es muy bonito el diseño pero la estructura de los códigos es todo un desastre, incompletos y mal distribuidos.
    Espero que no pretendas hacerle muchas modificaciones pues tiene bastantes limitantes.

    Bueno, después de un par de horas hallé el modo de echar a andar los avatares, pero te comento que estos estarán arriba del nombre del autor ya que como te dije la estructura de esa plantilla no da para mucho.

    Activa los avatares como te mencionaba en el comentario #52.
    Luego busca este código y agrega lo que está en negrita:

    <div class='alt message-box' expr:id='data:comment.anchorName'>
    <div class='message-lbc'/><div class='message-ltc'/>
    <div class='message-entry'>
    <div class='message-by'>

    <b:if cond='data:blog.enabledCommentProfileImages'>
    <data:comment.authorAvatarImage/>
    </b:if>


    Con eso ya deberán aparecer los avatares.

    ResponderEliminar
  68. Hola, quise poner una imagen para separar los comentarios pero por alguna razón no me aparece, ya intenté con todos los códigos que muestras y blogger no me muetra ninguna modificacion, sigue con el disenio estandar. Y no se que hacer ^_^Uu

    Gracias por el tiempo, saludos!

    ResponderEliminar
  69. Hola Łĭłĭŧћ,

    Al parecer has puesto el código después de ]]></b:skin> y debe ser ANTES de ]]></b:skin>
    De igual manera la URL de la imagen que has puesto no te servirá pues esa es para mostrar la imagen dentro de Imageshak.
    En su lugar usa esta URL:
    http://img641.imageshack.us/img641/2540/comentmariposacopia.png

    Saludos.

    ResponderEliminar
  70. oh gracias!
    disculpa tantas molestas :P

    ResponderEliminar
  71. Disculpa el doble post, pero no... ya lo intente' de nuevo y nada. soy un fraude para esto XD creo que desistire' por el momento antes de que comience a tirar de mi cabello por la frustracion, ni pude separar los comentarios de forma bonita y tampoco consegui' cambiar el icono de blogger jejeje.

    De nuevo gracias por tomarte el tiemo

    Saludos

    ResponderEliminar
  72. Pues no vi que tuvieras el código puesto, sólo una parte del código y estaba nuevamente después de ]]></b:skin> y no antes de.

    Quizá mañana con más calma quieras intentarlo de nuevo ;)

    ResponderEliminar
  73. no, ya me rindo con eso. mejor lo dejo asi antes de que termine arruinando todo. segun yo ya borre' todo el codigo que habia puesto antes de ]]></s:kin ya intente ponerlo despues de, de hecho ya pasie' el codigo por toda la plantilla XD pero no consegui nada, ya mejor que se quede tan y como esta' igual gracias n_n

    ResponderEliminar
  74. ¡Adorable!, nunca dejas de aportar ni el detalle más singular ¿cómo lo logras?.

    ResponderEliminar
  75. A decir verdad no soy sólo yo, sino mas bien son las inquietudes de los demás lectores que me piden estos detalles, y que al final parece que sirve a muchos la información :)

    ResponderEliminar
  76. Hola.

    Perdona que la pregunta se salga un poco del tema pero como veo que controlas esto de los comentarios en los blogs me tomo la libertad de consultarte. ;-)

    En primer lugar gracias por el truquillo de la rayita, me ha funcionado a la primera y los comentarios se leen mucho más claros. ;-)

    Ahora la consulta, acabo de preparar un nuevo blog con Blogger y la plantilla inicial (de Blogger) ordenaba los comentarios de antiguo (arriba) a nuevo (abajo). Perfecto es lo normal y lo que quiero. Pero en algún momento algo se ha roto y ahora los comentarios se ordenan de nuevo (arriba) a antiguo (abajo), haciendo muy incómoda la lectura.

    ¿Sabes como puede cambiarse el orden en el que se ordenan los comentarios?

    Muchas gracias por tu tiempo.

    Un cordial saludo.

    *los comentarios en cuestión están en: http://asoproinvi.blogspot.com/2011/02/entrada-de-prueba-numero-01.html#comments

    ResponderEliminar
  77. Hola Luis Alf,

    Los comentarios en tu blog los veo bien, es decir, el primero que se muestra (arriba) es el más antiguo y fue hecho a las 09:48, luego el más reciente queda abajo y fue hecho a las 09:55
    Esa es la forma normal con la que se acomodan los comentarios, si alguien hace otro comentario quedará más abajo por ser el más reciente.

    Saludos y enhorabuena por tu nuevo blog!

    ResponderEliminar
  78. Muchas gracias!

    Sí, la cosa es que finalmente lo arreglé.
    Desinstalé la plantilla, instalé otra y luego volví a instalar la inicial.
    Por arte de magía se arregló.

    Muchas gracias de nuevo por tu tiempo e interés. ;-)

    ResponderEliminar
  79. Hola potro, por acá molestando nuevamente, quisiera saber si le puedo cambiar a mi blog el sistema de comentarios, es decir que cuando alguien quiera comentar mis post sólo deban escribir el nombre y una cuenta de correo, de ser posible le agradecería su colaboración y muchas gracias de antemano.

    ResponderEliminar
  80. Hola Carlos,

    Blogger sólo tiene las opciones de comentar como Anónimo, con Nombre y URL, con OpenID, y con las cuentas de Google.
    Cualquiera de estas opciones están disponibles en Configuración > Comentarios.

    Saludos.

    ResponderEliminar
  81. Yo tambien me estoy peleando con lo de la imagen de mi avatar en los comentarios. Para comentar no me sale pero para seguir blogs si.
    Ahora lo del post #68 no he podido hacerlo porque no aparece esa linea. Tenia ya activados los avatares en los comentarios y no se que más. El código en negrita del comentario #70 ya lo tenia puesto y he puesto dos imágenes de mi avatar que eran las que borré. A ver si podemos rescatarlas.

    ResponderEliminar
  82. En tu plantilla no debe ser necesario agregar ningún código extra para los avatares pues las plantillas nuevas ya lo tienen incluido y de hecho sí aparecen en tu blog, el problema es que tu avatar es el que no se ve.
    Eso pudo ser causado porque eliminaste tu foto en el álbum de Picasa y como Blogger ya no encuentra la imagen no la muestra.
    No hay manera de recuperar una imagen borrada, sólo puedes subir una nueva y los comentarios nuevos ya deberán tener la imagen que subiste pero sólo en los comentarios nuevos, en los antiguos seguirá sin verse.

    ResponderEliminar
  83. Otro nuevo detalle que marca la diferencia.
    Comentarios ordenados y con el borde redondito.
    Todo un lujo y como siempre facilísimo de hacer gracias a tus explicaciones.

    De nuevo mil gracias :D

    ResponderEliminar
  84. Ya está todo arreglado, pues vaya lio con el avatar, lo borré porque veia que en albunesweb picasa me aparecia triplicado y el que estaba en una carpeta que no me cuadraba que era donde sube todas las imagenes lo borré. Que susto jejeje

    ResponderEliminar
  85. Me gustaba el cartel que estoy buscando esto por un rato, pero nadie aquí en Brasil había hecho este post. Gracias! Ahora yo soy su seguidor.

    ResponderEliminar
  86. pos_ch, esa carpeta a todos nos parece extraña, igual a mí me lo parecía cuando la descubrí e incluso también borré las fotos que pensé que estaban repetidas y ahí fue donde aprendí de mi error. Pero bueno, ahora ya sabemos que ahí se guardan todas las fotos y que no están repetidas sino que una es para el perfil de Blogger, otra para el perfil en los seguidores y otra parece ser para el perfil en los comentarios ¡Vaya lío!

    ResponderEliminar
  87. Gracias 1001 Faces, saludos hasta Brasil y bienvenido a Ciudad Blogger!

    ResponderEliminar
  88. Potro..

    1 pregunta...

    Como puedo agregar esta caja de comentarios en un determinado boton del menu...

    por favor visita mi blog para que me brindes una ayuda.

    http://huanucoestacambiando.blogspot.com/

    en el boton participa del cambio.

    Como puedo poner en ese boton(participa del cambio) la caja de comentarios.

    Agradezco tu respuesta.

    Gracias

    ResponderEliminar
  89. Edita la página, abajo verás que hay un link que dice 'Opciones de entrada', haz click ahí y donde dice 'Comentarios de los lectores' marca la casilla 'Permitir'.

    ResponderEliminar
  90. Hola El Potro, ya estoy aquí molestándote de nuevo jeje

    Es una duda más o menos relacionada con esto, con los comentarios...

    Cómo puedo hacer para que en el footer dónde pondría "Publicado por..." y la hora ponga como tú, entradas relacionadas?

    ResponderEliminar
  91. No es ninguna molestia ;)
    En esta entrada se explica cómo poner las entradas relacionadas.

    ResponderEliminar
  92. Saludos Potro:

    Añadi a mi blog el de líneas curviadas. Y me quedo súper bien. Necesito saber si me puedes ayudar a enumerar los comentarios como tu lo tienes aquí... y además si puedo añadir una imagen para las personas que comentan "Anónimo" y eso. Gracias de antemano por la ayuda.

    Felicidades por tu blog.

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

    ResponderEliminar
  93. Hola TVboricua.USA,

    Para agregar una imagen a los comentaristas Anónimos agrega esta parte en tu plantilla:

    #comments-block .avatar-image-container.avatar-stock {
    background: #3B5998 url(URL de la imagen) no-repeat 50% 50%;
    }

    Para numerar los comentarios mira esta entrada de Oloblogger:
    http://oloblogger.blogspot.com/2010/03/numerar-comentarios-en-blogger.html

    ¡Saludos!

    ResponderEliminar
  94. Bueno Potro...:

    Ya añadí la imagen y las numeraciones. Al principio creí que bregar con códigos html era súper complicado pero ya veo que no. Eh, me gustaría que entrarás al blog para que me digas si quedó bien y eso.. Tú sabes más que yo jejeje. Para no hacer SPAM sabes como acceder desde el perfil.

    Ah, y estoy navegando por tu "Mapa del Sitio" y haciendo un montón de trucos. Mil Gracias de verdad. Saludos desde Puerto Rico.

    ResponderEliminar
  95. Te está quedando todo muy bien :)
    Qué bueno que estés encontrando útil la información que hay aquí.
    ¡Saludos hasta Puerto Rico!

    ResponderEliminar
  96. Hola Potro

    Saludos

    estoy casi loco con las imagenes en los comentarios, ¿como puedo hacer para colocar una imagen cuando quien hace los comentarios es "Anonimo" y esta me salga bien alineada a la izquierda?.

    Tambien quisira cambiar la imagen de blogger que me sale cuando quien comenta está logeado pero no tiene imagen de perfil?...

    Te agradezco, pues he itentado varias cosas pero no funcionan ...

    Muchas gracias

    ResponderEliminar
  97. Hola Agua y SIG,

    Para agregar una imagen a los comentaristas Anónimos y sin foto agrega esta parte en tu plantilla:

    #comments-block .avatar-image-container.avatar-stock {
    background: #3B5998 url(URL de la imagen de Anónimos) no-repeat 50% 50%;
    }
    #comments-block .avatar-image-container img {
    background:#333 url(URL de la imagen de fondo) no-repeat 50% 50%;
    }

    ¡Saludos!

    ResponderEliminar
  98. Saludos Potro nuevamente...

    Añadi el marco curviado a los comentarios, la númeración de comentarios de la entrada de Oloblorrer que me brindaste y lo de la imagen para los comentaristas anónimos.

    Pero, ahora el gadget de seguidores no se ve... Osea sale el gadget pero vacío sin las imagenes de los seguidores. Me podrías ayudar...

    http://tvboricuausa.blogspot.com

    Gracias de antemano... por este Gran Cuidad.

    ResponderEliminar
  99. Eso no es por los cambios que mencionas sino porque añadiste Scriptaculous para algún otro truco y Scriptaculous tiene ese problema con la lista de seguidores.
    Mira esta entrada para solucionarlo.

    ResponderEliminar
  100. Hola, gracias por la info, pero me encantaría saber como reubicar la fecha en los comentarios, es decir hacer que la fecha aparezca por ejemplo abajo a la derecha y darle color.
    Mis comentarios se numeran y tienen un identificador, ¿se puede hacer eso con la fecha también? como se ve acá en los comentarios de tu blog.
    abusando de tu confianza y aprovechando el espacio, me podrías decir como hago para modificar los colores de las letras del gadget seguir, ya que al desmarcar la casilla "Utilizar estilos predeterminados de plantilla" para cambiar los colores, guardo los cambios pero todo sigue igual y reaparece la casilla marcada.
    Gracias por la ayuda que me puedas brindar.

    ResponderEliminar
  101. Hola, Potro!!!

    ¿Cómo estás?? Tengo una dudilla, ¿Tienes algún post donde enseñes la manera de poner calificaciones a los comentarios? Kisiera poder añadir a mi blog pulgares para calificar cada comentario, como en youtube y otros. Si aún no lo tienes, creo ke ya te di tema para otro post =P, ojalá puedas ayudarme.
    Perdón por la molestia y te mando mega besote =)

    ResponderEliminar
  102. Hola Thor,

    Debajo de:
    .comment-timestamp {

    Agrega esto:
    color: #00FF00;
    text-align: right;

    El gadget de seguidores sólo puede personalizarse de esa forma, en realidad es lo único que se puede personalizar pues no tiene mayores opciones.

    ResponderEliminar
  103. Hola Merlina,

    No es ninguna molestia, pero en Blogger no hay esa opción para valorar los comentarios. Eso ya sería algo que directamente Blogger tendría que implementar para que sea posible para todos.

    ¡Gracias por el mega besote!
    :D

    ResponderEliminar
  104. bueno...pues siguiendo tus paso me he preparado un dibujillo pa separar los comentarios de mi blog, queda guapisimo la verdad, gracias crack, sigo por aqui a ver que "tuneo" ahora jejeje

    ResponderEliminar
  105. Ni modo, =( Muchas gracias por responder!! Besito =)

    ResponderEliminar
  106. Josico, claro que sí, puedes tomar de aquí todo lo que necesites ;)

    ResponderEliminar
  107. ¡Hola!
    Enhorabuena por el sitio y por el truco, funciona muy bien.
    He estado mirando si a alguien le ocurre lo mismo, pero creo que no, así que mejor pregunto.
    He probado el truco y me gusta mucho cómo queda con la imagen, pero aparece también una línea (igual que la línea de los separadores), y queda recargado. ¿Hay alguna manera de que no aparezca?
    La dirección: http://progresseninadequadament.blogspot.com
    Muchas gracias de antemano =)

    ResponderEliminar
  108. Hola Míryam,

    Lo que sucede es que tu plantilla ya tiene separadores definidos en los comentarios. Para quitarlos busca esta parte en tu plantilla y elimina lo que está en negrita:

    #comments .comment-author {
    padding-top: 1.5em;

    border-top: 1px solid $(body.rule.color);
    background-position: 0 1.5em;
    }

    ¡Saludos!

    ResponderEliminar
  109. Efectivamente, era eso. Ya aparece tal como quería. ¡Muchísimas gracias!
    Nos leemos :)

    Un saludo

    ResponderEliminar
  110. Buen dia Potro
    Aqui Ricardo do top501.blogspot.com
    Estoy confeccionando una web y tengo un gran problema quando quiero incluir textos como archivos .GIF o .JPEG, no me salen nítidos y brillantes ni bien definidos.
    Puedes decirme con que programa puedo hacer estos textos, por favor?
    Estoy usando Photoshop pero no me salen bien

    Un abrazo

    ResponderEliminar
  111. Buen día TOP 501,

    No sé mucho de diseño, pero cuando yo hago textos en Photoshop los guardo en formato PNG, ese formato conserva más nitides en los textos.

    ResponderEliminar
  112. Gracias Potro
    Voy a probar y te digo el resultado

    Abrazos

    ResponderEliminar
  113. potro la imagen que puse no funciona, lo hice tal y como tu lo describes, quien sabe que podrá estar fallando!.... la imagen es de mi blog solo que le copie la url y la inserte en al campo que decias!...

    ResponderEliminar
  114. mira esta es la imagen que puse y no me funcionó, será por lo que es .png????

    http://2.bp.blogspot.com/-m5DCiKOUsqc/Tajl7wDFYoI/AAAAAAAAAes/dyrD8T1OlH0/s1600/linea.png

    ResponderEliminar
  115. Lo que pasa es que al poner el código has eliminado una llave de cierre del código que estaba arriba.

    Tienes el código de esta forma:

    .post-title {
    margin: 0;
    padding: 10px;
    text-align: center;
    background-color: transparent;
    font-size: 125%;
    font-weight: bold;
    line-height: 1.1em;
    #comments-block .comment-footer {
    background-image:url(http://2.bp.blogspot.com/-m5DCiKOUsqc/Tajl7wDFYoI/AAAAAAAAAes/dyrD8T1OlH0/s1600/linea.png);
    background-repeat:no-repeat;
    background-position:center bottom;
    height:70px;
    }

    Y debe ser así:
    .post-title {
    margin: 0;
    padding: 10px;
    text-align: center;
    background-color: transparent;
    font-size: 125%;
    font-weight: bold;
    line-height: 1.1em;
    }

    #comments-block .comment-footer {
    background-image:url(http://2.bp.blogspot.com/-m5DCiKOUsqc/Tajl7wDFYoI/AAAAAAAAAes/dyrD8T1OlH0/s1600/linea.png);
    background-repeat:no-repeat;
    background-position:center bottom;
    height:70px;
    }

    ResponderEliminar
  116. Guauuuu quien lo hiba a creer !! jejeje gracias Potro, sos mi heroe!!!!... Me sirvio de Muchooo... Gracias.. por cierto soy el mismo Aquarella solo que cambie mi imagen jijii ;) abrasos!...

    ResponderEliminar
  117. Vale, entonces damos por solucionado el problema ;)

    ResponderEliminar
  118. Hola Potro, ¿como te va?. Ojalá me puedas ayudar, resulta que los comentarios en mi blog aparecen montados sobre "Quizas tambien le interese", el artilugio de Link Within, ya lo he instalado dos veces y siempre me ocurre lo mismo.
    Te agradezco mucho tu ayuda, este es mi blog

    http://asomadaenlaventana.blogspot.com

    ResponderEliminar
  119. Hola maria candel,

    Entré a tu blog y lo veo todo en orden, supongo que ya lo has resuelto :)
    ¡Saludos!

    ResponderEliminar
  120. Hola Potro,gracias por entrar en el blog.

    No se si es desde mi equipo solamente, pero cuando le das a otra entrada, de las que se anuncian en"Quizás tambien le interese" es cuando se ven los comentarios montados sobre las imagenes. Te agradezco si me puedes sacar de la duda.
    Saludos y gracias otra vez.

    ResponderEliminar
  121. Gracias por la aclaración, lo que sucede es que había entrado desde Google Chrome y lo vi todo bien, así que ahora entré desde Chrome, Opera, Safari, Firefox e Internet Explorer y en todos se ve bien menos en Internet Explorer que supongo que es el navegador que usas.
    ¿Recuerdas si hiciste alguna modificación en el blog antes de que eso sucediera?

    ResponderEliminar
  122. Si, efectivamente Potro, es Internet Explorer el que uso y la ultima modificación que hice fue la instalación de Link Within, y a raiz de eso se generó el problema.
    ¿Será que no lo instalé bien? ¿tienes alguna recomendación para esto?
    Muchas gracias por tu ayuda.
    http://asomadaenlaventana.blogspot.com

    ResponderEliminar
  123. Pues no sé como lo hayas instalado, usualmente sólo se agrega el código en un gadget y luego ese gadget se arrastra debajo de las entradas. Yo lo acabo de probar igual en una plantilla como la que usas y no tuve problemas en Internet Explorer, por eso preguntaba si había algún otro cambio que hayas hecho en esa área.

    ResponderEliminar
  124. Muchas gracias por tu ayuda!!! Kedó a la primera y te cuento ke sí keda el conteo normal, no empieza de cero!!

    Hoy tengo otra duda y me da pena pornerte a trabajar pero ya lo intenté todo y no me sale =( En esta plantilla me aparece la hora sin el icono de eliminar justo debajo del nick, algo le moví porke sí me aparecía el íconito y ya no =( además de ke no me keda el código de tu post "Comentarios del autor en color diferente", ya lo puse y no me sale como kiero =S aaaay perdón por molestarte pero realmente necesito de tu asesoría!!

    ResponderEliminar
  125. Ash... sí me vas a entender si no te doy completo el dato =S. La hora aparece bajo el nick y kiero ke aparezca abajo del texto como en tus comentarios =P . La plantilla ya tiene el código del post de Comentarios.... pero aun asi no pasa nada. es por eso ke te pido ayuda =D

    ResponderEliminar
  126. Hola Merlina,

    Sobre los comentarios del autor con color diferente no sabría decirte pues no conozco esa plantilla y por lo que he visto es muy distinta en estructura a las plantillas 'estándar'.
    Para recuperar el icono para borrar y mover la fecha de los comentarios expande los artilugios y busca este código:

    <div class='comment-meta'><a expr:href='data:comment.url' title='comment permalink'>
    <data:comment.timestamp/>
    </a>
    <b:include data='comment' name='commentDeleteIcon'/></div>

    Córtalo y ponlo justo debajo de este código:
    <b:if cond='data:comment.isDeleted'>
    <span class='deleted-comment'><data:comment.body/></span>
    <b:else/>
    <p>
    <data:comment.body/>
    <span class='interaction-iframe-guide'/>
    </p>

    Pero ojo, ambos códigos aparecen dos veces, en ambos códigos debes hacer lo mismo. Es decir, busca el primer código y pégalo donde te he indicado, luego busca un poco más abajo de nuevo el primer código y de nuevo lo pegas un poco más abajo de otro que hay cerca de él.

    ¡Saludos!

    ResponderEliminar
  127. Hola Potro, puse el último de los modelos y no se pone el fondo :/.

    ResponderEliminar
  128. Posiblemente es la plantilla que usas, estos métodos están basados para plantillas oficiales de Blogger, cualquier otra personalizada puede contener diferentes códigos.

    ResponderEliminar
  129. Hola Potro!!
    Esto erajusto loque buscaba,
    yalo puse enlos comentarios de mi blog
    y me gusta mcho el resultado.
    Otra pregunta, para poner una línea divisoria entre los post y la sidebar, como lo haría?
    Saludos
    MªJosé

    ResponderEliminar
  130. Hola MariajoyAndrea, ¿en cuál blog quieres hacerlo?

    ResponderEliminar
  131. gracias por tus aportaciones,son muy valiosas
    saludos

    ResponderEliminar
  132. Hola el potro!!
    Ya te escribí en esta entrada pero ahora no veo el comentario.
    Puse los separodoes en los comentarios y han desaparacido del blog, me imagino que habrá sido por los problemas de ayer con bloguer.
    También quería poner una línea para dividir los post de la sidebar, podría hacerlo?
    Mi blog http://nancyesunica.blospot.com/
    Gracias
    Saludos
    MªJosé

    ResponderEliminar
  133. Debe ser por los problemas que tuvo Blogger, así que habrá que ponerlo de nuevo.
    Para poner un borde en esa área busca esta línea:
    .main-inner .fauxcolumn-right-outer {

    Debajo de ella agrega esto:
    border-left:1px solid #000;
    padding-left:10px;

    Saludos.

    ResponderEliminar
  134. Gracias Potro eres un crack ,me ha quedado muy bien aunque me gustaría cerrar abajo con una línea horizontal (no sé si me explico)
    y también me gustaría saber si puedo cambiar el color de fondo de la sidebar.
    Muchísimas gracias, tu blog me está ayudando mucho.
    Saludos.
    MªJosé

    ResponderEliminar
  135. Probablemente agregando esto debajo de lo que añadiste funcione:
    border-bottom:1px solid #000;
    Sobre el color de fondo no lo sé, me parece que cuando se crea la plantilla en el Diseñador de plantillas se puede hacer eso.

    Saludos!

    ResponderEliminar
  136. Lo he probado y funciona perfectamente,
    esa línea cierra lo que es la sidebar,
    puede agregarse algún código para que cierre también el post, es decir una línea horizantal desde el post hasta la sidebar.
    Mil gracias.

    ResponderEliminar
  137. No sé qué tan bien quede pero prueba poniendo debajo de esta línea:
    .main-inner .fauxcolumn-center-outer {

    Esto:
    border-top:1px solid #000;

    ResponderEliminar
  138. Querido Potro,
    Ya ando de nuevo por aquí, antes de meterme en un lío te pregunto.
    Yo quisiera que la imagen estuviera más pegada, o más centrada con respecto a quien la ha escrito,
    El texto justificado porque el comentario me parece que queda un poco de pena.
    La fecha a la derecha
    Y cambiar un poco lo de la zona de número de comentarios para que se vea dónde empiezan....
    Y es que en la plantilla tengo mil sitios donde pone comment y no sé si añadir este consejo tuyo o tengo que retocar lo que ya está, así que de momento, sólo he incluido una imagen separadora.
    Gracias, como siempre y un abrazo enorme

    ResponderEliminar
  139. Ay, mi Potro, que me he metido en otro lío,
    Ahora se me descuadra el formulario para dejar comentarios al meter esta imagen ¿?
    Más besitos

    ResponderEliminar
  140. Bueno,
    Ya arreglé el formulario....mil perdones....pero lo demás, lo dejo en pié.
    Bss a montones

    ResponderEliminar
  141. Hola Patricia,

    La imagen del separador puede ponerse ya sea a la izquierda, al centro (como está ahora) o a la derecha, si quieres que esté más cerca del nombre del autor puedes ponerla a la izquierda, sólo cambia esto:
    background-position:center bottom;

    Por esto:
    background-position:left bottom;

    Para que la fecha del comentario esté a la derecha entonces debajo de esta línea:
    .comment-timestamp { /* Fecha de los comentarios */

    Agrega esto:
    float:right;

    Y para que los comentarios esté justificados agrega debajo de:
    .comment-body {

    Esto:
    text-align:justify;

    ¡Besos!

    ResponderEliminar
  142. Muchiiiiiiisisisimas gracias, mi querido Potro,
    Como ves voy mejorando, lo cual hace peligrar tu existencia porque se me ocurren aún cosas más dislocadas.
    No me refería a la imagen que separa un comentario de otro, me refería a la foto que nos identifica, yo creo que queda un poco separada de más.
    Otra cosa, ¿Puedo cambiar la fecha de color?. Lo pongo pero debe ser que no es el sitio correcto porque no me hace ni caso.
    Y, se me ha ocurrido otra idea, ¿Habría la posibilidad de que saliera el comentario y debajo la respuesta, sin necesidad de que fuera en orden a fecha?, y todo esto, cada conjunto de comentarios, dentro de un marco?.
    Ya, ya, te estoy viendo....en bendita hora, pero tu eres el maestro....Y sin ti, la nada
    Un abrazo enorme

    ResponderEliminar
  143. Jajaja, eso es bueno, que mejores y a la vez eso te lleve a querer hacer cosas más complejas.
    Sin embargo por el momento lo de el orden de los comentarios no creo que sea posible, al menos no hasta que Blogger habilité alguna configuración para mostrarlos de esta forma pues hasta ahora todos los blogs (incluyendo WordPress) acomodan los comentarios no por grupo sino por fecha de publicación.

    El color de la fecha debería ponerse debajo de esta línea:
    .comment-timestamp {

    Ahí agrega:
    color:#000;

    Si eso no resultara entonces arriba de esa primera línea agrega esto:
    .comment-timestamp a {color:#000;}

    En cuanto a la distancia del avatar con el contenido de los comentarios sí se puede reducir. Sólo busca este código:

    .comment-author {
    background:url("#") no-repeat 2px .35em;
    margin:.5em 0 0;
    padding-top:0;
    padding-right:0;
    padding-bottom:0;
    padding-left:20px;
    font-weight:bold;
    }
    .comment-body {
    margin:0;
    padding-top:0;
    padding-right:0;
    padding-bottom:0;
    padding-left:20px;
    text-align:justify;
    }

    Ambas líneas en negrita son la distancia que debes modificar, quizá con 10px quede bien pero ya tú podrás modificarlo a tu gusto ;)

    ¡Besos!

    ResponderEliminar
  144. Nuevamente Gracias, Potro por toda la ayuda recibida, mis páginas no serían lo que hoy son sin tu ayuda, gracias, gracias, gracias. Tumbas de Famosos

    ResponderEliminar
  145. hey potro y es posible eliminar la papelera que aparece? para eliminar los comentarios?

    saludos

    ResponderEliminar
  146. Julia Letrán, al contrario, gracias a ti por tu visita y tu amable comentario!

    MCarlitooH2, sí es posible pero también se ocultaría la fecha de los comentarios ya que comparten el mismo código. Si quieres hacerlo agrega debajo de .comment-timestamp { esto:
    display:none;

    ResponderEliminar
  147. aah, ok entiendo mejor lo dejare asi, prefiero conservar la fecha.

    saludos y gracias de todas formas

    ResponderEliminar
  148. Otra peguntita más: Viste las fotos que podes poner a los costados del blog, en mi caso a la derecha, están muy separadas {una abajo de la otra}¿como hago para ponerlas más juntas?

    Un beso & gracias.

    ResponderEliminar
  149. Es la separación normal de los gadgets. Puedes subir un poco el segundo gadget si lo deseas, sólo agrega ante de ]]></b:skin> esto:

    #Image2 {margin-top:-20px;}

    ResponderEliminar
  150. Me encantó, muchísimas gracias :).

    ResponderEliminar
  151. Hola Potro! Qué genial haber llegado a tu blog! Mirá, estoy tratando de poner la imagen (barra separadora) pero me queda al final y encima del cuadro donde están hechos los comentarios de prueba. No consigo colocarlos entre cada uno. Bueno, espero puedas ayudarme cuando tengas un tiempito. Te agradezco mucho! Reién estoy comenzando a armar el blog y sé que con tu ayuda como con la de otros blogs amigos tuyos me van a ayudar a que quede atractivo. Gracias por ayudar y explicar a quienes recién comenzamos. Un abrazo!

    ResponderEliminar
  152. Hola TDAH Campana, ¿en dónde lo has puesto para que pueda echarle un vistazo?

    ResponderEliminar
  153. Excelente!!, mil gracias Potro, ahi la llevo jejeje XD

    Salu2!

    ResponderEliminar
  154. Gracias por tu visita y comentario!

    ResponderEliminar
  155. buenas potro, yo de nuevo, estoy mejorando poco a poco el blog, me decante por el estlo de ondo gris sin bordes pero al hacer todosl os pasos al final me da error como diciendo que no puedo poner un 0 S: perdon por las molestias jeje

    ResponderEliminar
  156. Hola, ¿cómo es el código que estás poniendo?

    ResponderEliminar
  157. ya está! esque como puse el primero k tu tenias antes no me dejaba, siempre lo quitaba he intentaba poner en otro en vezde guardar antes hehe muchas gracias potro, ahora a rediseñar un poco

    ResponderEliminar
  158. Hola Potro, nuevamente soy yo por aqui con un pequeño inconveniente, hice lo de los comentarios, pero fijese que la imagen o avatar se me fue a la derecha y esto impide que el numero no se vea. Como hago para que esa imagen del comentario se vaya a la izquierda. Gracias

    ResponderEliminar
  159. Hablo de la imagen o avatar de quien comenta, no la del icono superior.

    MI BLOG

    ResponderEliminar
  160. Hola Gilberto,

    Puede ser porque esa plantilla tiene especificado que el avatar aparezca en del lado derecho. Podría solucionarse eliminando esta parte:

    .avatar-image-container{background:url(http://4.bp.blogspot.com/_4HKUHirY_2U/TLlJUqSaolI/AAAAAAAAEq4/qpgAHAOe9x0/s1600/comment-avatar.jpg);width:32px;height:32px;float:right;margin:5px 10px 5px 5px;border:1px solid #ddd;}

    Aparece dos veces, ambas se debe eliminar.
    Saludos.

    ResponderEliminar
  161. Gracias Potro, la imagen se coloco al lado izquierdo, pero el nombre de la persona quedo debajo de la imagen, como hago para que el nombre se coloque al lado de la imagen. Saludos

    MI BLOG

    ResponderEliminar
  162. disculpa, y como hago para colocar la fuente que tienes en tus numeros y ese grosor.

    ResponderEliminar
  163. Cambia esta línea:
    .avatar-image-container img{width:32px;height:32px;}

    Por esta:
    .avatar-image-container img{width:32px;height:32px;float:left; padding-right:10px;}

    El grosor del texto se agrega así en el área que deseas:
    font-weight:bold;

    Saludos.

    ResponderEliminar
  164. Gracias Potro por su apoyo y felices vacaciones.

    ResponderEliminar
  165. Hola!
    He probado a poner el 2º estilo. He seguido los pasos pero no me aparece, ¿que puedo hacer?
    Gracias de antemano

    ResponderEliminar
  166. Hola Lovix, ¿en cuál blog lo has puesto?

    ResponderEliminar
  167. Lo puse en este: http://winx-lovely.blogspot.com/

    ResponderEliminar
  168. Cuando has puesto el código has eliminado la llave de cierre del código que estaba antes, es por eso que no se aplican los cambios:
    http://ciudadblogger.com/2011/07/errores-comunes-al-poner-los-codigos.html

    ResponderEliminar
  169. Hola El Potro, quería poner el último estilo (el del recuadro) en mi blog "El Lado Oscuro" pero no he sido capaz. He copiado los pasos de arriba y luego el código de abajo (como especificas arriba), al darle en Vista Previa para ver como ha quedado me sale este mensaje:

    No se ha podido analizar su plantilla, porque no está bien formada. Asegúrese de que todos los elementos XML se han cerrado correctamente.
    Mensaje de error de XML: The element type "b:loop" must be terminated by the matching end-tag "".
    Error 500

    No entiendo mucho de esto y bueno, no sé cual es el fallo. Mi plantilla es una de las normales de blogger. Un saludo y gracias por tantos tutoriales, son una maravilla.

    ResponderEliminar
  170. Hola Esthervampire,

    Ese mensaje indica que una parte del código (la que se agrega al expandir los artilugios) no ha sido colocado correctamente.
    Revisa de nuevo que estén los códigos que se mencionan y que lo pongas justo en el lugar indicado.

    Saludos!

    ResponderEliminar
  171. Gracias por este tutorial, eres muy amable al compartir tu conocimiento. Muy buena explicación.

    ResponderEliminar
  172. Gracias Liliana, te agradezco tu comentario.

    ResponderEliminar
  173. Hola potro, genial el codigo , solo tengo un problemita, se me salen del margen los comentarios, a ver si me puedes ayudar, este es el blog de pruebas con los comentarios
    Gracias

    http://dolceviaje.blogspot.com/2011/03/machu-picchu.html

    ResponderEliminar
  174. Hola admin,

    De entrada hay unos códigos que pusiste mal, los pusiste antes de <div id='head'> y por eso se ven arriba del blog.
    Esos ponlos antes de ]]></b:skin> con eso se deberá arreglar.

    ResponderEliminar
  175. 10 puntos potro!!!!!!
    era eso
    Gracias genio!!!!

    ResponderEliminar
  176. Que tal potro me podrías ayudar, quise poner la opción 3 de los comentarios pero me aparecen las imágenes de perfil 2 veces, como hago para quitar esto? Te dejo la dirección de mi blog de pruebas

    http://pruebasblogasotras.blogspot.com

    Gracias.

    ResponderEliminar
  177. Probablemente repetiste algún código. Verifica que no tengas dos veces esta línea, si la tienes elimina una de ellas:
    <data:comment.authorAvatarImage/>

    ResponderEliminar
  178. Esto tambien quedó, a mi humilde modo de ver, de película, así que un millón de gracias....

    ResponderEliminar
  179. Hola Potro, sólo comentaba para agradecerte por la ayuda prestada con mi blog, asimismo gracias a este post y los comentarios he podido solucionar la visualización de los avatares en los comentarios (en chicablogger).

    Aunque no he podido colocar una imagen en los comentarios anónimos (mi plantilla no tiene esos códigos) :(

    Saludos.

    ResponderEliminar
  180. Hola nuevamente Potro, me acabo de dar cuenta de otro importante detalle: ahora los emoticones dejaron de funcionar, por medio del formulario de contacto te diré los detalles.

    Saludos.

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

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

    ResponderEliminar
  183. Los comentarios de blogger siempre me han resultado complejos. Ahora bien, para eso te tenemos a ti ¿no? jajaja

    Vamos a ver. Echa un vistazo a mis comentarios:

    http://www.elultimoduelo.com/

    Si te fijas, el nombre del que comenta está enmarcado en un fondo marron claro. ¿Cómo lo quito? Lo quiero transparente como el oxigeno.

    Gracias potro.

    ResponderEliminar
  184. Listo, trasteando lo solucioné. Pero me sigue quedando una duda.

    Si te fijas mis comentarios están "movidos" hacia la derecha. Me gustaría ponerlos como los tuyos ocupando todo el ancho del cuerpo de la entrada.

    ¿es posible?

    Gracia potro.

    ResponderEliminar
  185. Hola Marcelo Camacho,

    Recuerda que el formulario de contacto es para temas que aún no han sido publicados en el blog, o para otro tipo de situaciones; para problemas con una entrada publicada debe hacerse por este mismo medio.

    Para ponerle una imagen a los comentaristas anónimos sólo tienes que poner antes de ]]></b:skin> esto:

    #comments-block .avatar-image-container.avatar-stock {
    background: url(URL de la imagen) no-repeat 50% 50%;
    }

    Sobre los emoticones no sé qué modificaciones hayas hecho. Deja un comentario en esa entrada explicando qué fue lo último que hiciste antes de que surgiera el problema.

    Saludos.

    ResponderEliminar
  186. Hola Mayte,

    Si usas una plantilla del Diseñador y quieres eliminar el separador de comentarios que ya trae la plantilla entonces busca este código y elimina lo que está en negrita:

    #comments .comment-author {
    padding-top: 1.5em;

    border-top: 1px solid $(body.rule.color);
    background-position: 0 1.5em;
    }

    ResponderEliminar
  187. Hola William,

    Agrega en los estilos este código:

    #comments-block.avatar-comment-indent {
    margin-left: 0 !important;
    }

    Con eso deberá eliminarse ese margen de la izquierda.
    Saludos.

    ResponderEliminar
  188. Buenas Potro, todo solucionado... muchas veces la solución es más simple de lo que parece y está en nuestras narices, tan sólo es cuestión de analizar detalladamente.

    Gracias nuevamente, saludos amigo!

    ResponderEliminar
  189. Eres un genio!

    Gracias Potro, siempre solucionando mi incultura de código jajaja

    Un fuerte abrazo.

    ResponderEliminar
  190. Marcelo Camacho, tienes toda la razón :) saludos!

    William Manney, otro abrazo para ti.

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

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

    ResponderEliminar

Los comentarios están siendo moderados y serán publicados una vez que hayan sido revisados por un administrador.
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.

 
Ir Arriba Ir Abajo
¿Te gusta Ciudad Blogger?