Comentarios anidados tipo bocadillo cómic | Oloblogger Siguiendo con las cosas fáciles e incluyendo una que algunos pedís más que un taxi en un desierto, hoy un simple CSS que cambia el estilo qu...

12 de enero de 2013

Comentarios anidados tipo bocadillo cómic

Siguiendo con las cosas fáciles e incluyendo una que algunos pedís más que un taxi en un desierto, hoy un simple CSS que cambia el estilo que viene de serie con los comentarios anidados de una plantilla estándar Blogger.

Con él los comentarios se quedarán como podéis ver en esta demo, aunque en realidad es el mismo estilo que actualmente utilizo en este mismo blog.

Como veis lo único que hacemos es ponerle un fondo distinto a lo que es el cuerpo principal del comentario, añadir un borde, esquinas redondeadas y añadirle un triángulo que realmente es una entidad HTML. En Nice Entity tenéis una útil guía organizada por pestañas según temática con este tipo de caracteres por si alguna vez la necesitáis.

Para usarlos en content tenéis que echar mano de la columna UNICODE. Aquí he usado el 25C4 (con una barra de escape) que aislado se vería como sigue ◄. Como realmente el navegador lo trata como "letra", se puede cambiar de tamaño y color con font-size y color sin ninguna dificultad añadida.


La segunda mitad del código lo que hace es mostrar los avatares en forma de círculo, ni más ni menos.


Lo único que necesitáis para tener este estilo en vuestros comentarios es copiar el código que viene a continuación dentro de la parte CSS de la plantilla, es decir, entre <b:skin><![CDATA[/* y ]]></b:skin>. Luego ya cambiáis los colores al gusto.

/* Estilo bocadillo comic */
.comments .comment-block {
position: relative;
margin-top: 10px;
margin-left: 60px;
padding: 10px;
color: #333333;
background: #eeeeee;
border: 4px solid #990000 !important;
border-radius:10px;
}
.comment-thread li .comment-block:before {
position: absolute;
left: -26px;
content: "\25C4";
color:#990000;
}
.comments .avatar-image-container {
width: 60px;
height: 60px;
max-height: 60px;
margin:0 0 0 -22px;
padding: 0px;
border: 4px solid #990000;
border-radius: 60px;
}
.comments .avatar-image-container img {
overflow:hidden;
width: 60px;
height: 60px;
max-width: 60px;
border:0 !important;
border-radius:60px;
}

¿Vemos otro post al azar por si le encuentras utilidad o quizás prefieres ser más metódico y suscribirte a nuestras entradas por correo? También puedes imprimir este artículo y por supuesto compartirlo en redes sociales si fue de tu agrado.

Compartir
Copy URL

Y muchos más artículos interesantes si nos sigues en...

follow us in feedly

102 comentarios :

  1. Muy buen artículo Oloman. En cuanto comentarios ahora mismo tengo puestos los de Facebook así que no sé si meter este estilo...me lo pensaré :P

    Gracias!

    ResponderEliminar
  2. Hola!!! Muy bueno, lo he aplicado a mi blog y me encanta como queda, he modificado un par de cosillas con algo de intuición porque no tengo mucha idea pero me ha gustado el resultado. Gracias por el código!!

    Saludos :)

    ResponderEliminar
  3. Muy buena entrada Olo, saludos :)

    ResponderEliminar
  4. Estuve a punto de preguntar sobre esto pero ya tengo la respuesta mil gracias :P

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

    ResponderEliminar
    Respuestas
    1. Este comentario ha sido eliminado por el autor.

      Eliminar
    2. ¿Por qué borráis preguntas y respuestas que seguramente son interesantes para todos? :(

      Eliminar
    3. Perdon Oloman lo pongo de nuevo si quieres.

      Esto es lo que puse:

      Otra cosilla me gustaria saber o donde puedo conseguir codigo para tener como tu o Karla que teneis no se si se llaman asi "Hojas de estilO" es decir que tu cuando pones codigo lo pones en plan chulo y se que usas CSS pero yo no se hacerme un estilo como ese tu saber donde conseguir o nose...

      Un saludo.

      Eliminar
    4. Disculpame tambien oloman, mira esta fue mi respuesta aunque no se si fue lo que pedia Afm

      pones esto antes de ]]&amp;gt;&amp;lt;/b:skin&amp;gt;

      .post-body pre { display:block; overflow:auto; white-space: -moz-pre-wrap; white-space: -o-pre-wrap; white-space: pre-wrap; }
      .post-body .vercodigo,
      .post-body code { display:block; overflow: hidden; width:90%; margin:22px auto; padding: 20px; text-align:left; font:1em 'courier new', courier, monospace; background: #CCCCCC;color: #000; word-wrap: break-word;
      -moz-border-radius: 0px 0px 10px 10px; -webkit-border-radius:0px 0px 10px 10px; border-radius:0px 0px 10px 10px; }
      .post-body .vercodigo:before,
      .post-body code:before { margin: -22px 0px 10px -20px; display:block; overflow: hidden; width: 120%; height: 22px; font: normal normal 1.20em Yanone Kaffeesatz; content: " CODIGO CODIGO CODIGO CODIGO CODIGO CODIGO CODIGO CODIGO CODIGO CODIGO CODIGO CODIGO CODIGO CODIGO CODIGO CODIGO CODIGO CODIGO CODIGO CODIGO CODIGO CODIGO CODIGO CODIGO CODIGO CODIGO CODIGO CODIGO CODIGO"; background: #2F4F4F; color: #fff; }
      .post-body .bpt {display:block; font-size:90%; margin-left:40px; padding: 5px; border: 1px #2F4F4F dashed;}


      luego creas una html o una entrada y colocas lo siguiente:

      &amp;lt;div class="vercodigo"&amp;gt;
      AQUI COLOCAS EL CODIGO QUE QUIERAS
      &amp;lt;/div&amp;gt;

      y eso es todo, ojala y te sirva mi respuesta, agradecimientos a oloman por brindarnos este gran blog

      Eliminar
    5. Es que me pareció interesante la pregunta y la respuesta y no entendí por qué las borrasteis. Sólo era por eso mi comentario.

      Eliminar
  6. Como podría enumerar los comentarios asi lo lo tienes tu en tu blog, gracias.

    ResponderEliminar
    Respuestas
    1. Si tienes los nuevos (anidados), la respuesta está aquí.

      Eliminar
  7. Oloman una pregunta en este sistema no se puede dejar algún escrito o cometario en la parte superior del comentador como en el blog de JMiur por ejemplo? me explico el comment-form o contenedor anterior con este sistema de anidados de blogger si no se usa el sistema que propone Felipe esa área queda debajo de el comentador lo he agregado a modo de prueba en otro blog que no está en este usuario pero espero sepa explicarme, mas fácil para entender es aquella zona donde colocabas los emoticonos en los comentarios sin tener los anidados :) ¿Ahora se puede seguir teniendo esa disposición en el mismo lugar como antes?

    ResponderEliminar
    Respuestas
    1. Y una pregunta mas ¿Crees que esto pueda verse unicamente cuando se activa el responder a una pregunta y no cada vez que haces un comentario? gracias

      Eliminar
    2. No sé si lo que dices es lo que acabo de poner. Lo voy a probar unos días y luego lo publico. Ah, y yo no uso los "comentarios de Felipe". Me hace gracia que se hayan quedado con ese nombre :)

      Sobre la segunda cuestión, el "Añadir comentario" se queda ahí porque es la forma de poder escribir uno nuevo, no anidado. Sólo se me ocurren inconvenientes si lo hacemos desaparecer.

      Eliminar
  8. Santos cielos si es eso exactamente a lo que me refería ese mensaje te ha quedado de lujo se ve muy bien en tu blog por el diseño del mismo, yo ya intente por todos los medios buscando los iframe del contenedor pero nada que me ha salido, estaré esperando la publicación

    Y es cierto causa gracia que esos comentarios se quedaran con el nombre de Felipe jaja debe de sentirse alagado al ser referencia para cualquier blogger :)

    ResponderEliminar
    Respuestas
    1. Oloman he notado que de este modo se ve bien, pero ¿que ocurre cuando lo que escribes arriba es muy amplio en contenido?

      Todo este escrito se desplazaría junto a el contenedor en cada respuesta, no está mal cuando se escriben unas pocas líneas como en tu caso, me he pasado por el blog de JMiur y note que ese espacio queda encerrado entre un div cuya clase es "comment-form" en el footer, del mismo modo que las plantillas antiguas ¿será que se puede lograr lo mismo en este sistema?

      Es decir que todo el contenido quede en el footer para evitar que se desplace y en las respuestas solo se vea el contenedor de respuesta, hago referencia a él blog de JMiur porque allí usa el sistema de Felipe y no el de blogger, pero tal vez se pueda extraer algo de allí para mejorar un poco los nativos

      Eliminar
    2. Para mí el mensaje tiene sentido "moverlo" con el formulario cuando sirve de aviso para algo relacionado con el mensaje que se puede dejar en él.

      Si no es así lo más fácil es ponerlo a continuación del formulario y así siempre estará abajo.

      Eliminar
  9. Hola! Quería implementar este código, pero va y resulta que cuando configuro los comentarios para que aparezcan debajo de la entrada, como aquí en Oloblogger, me dice que pá tu tía. Vamos, no me dice nada, pero no lo hace. ¿Qué estoy haciendo mal? ¿Es por la plantilla, que es una normal y corriente de Blogger? Gracias ;)

    ResponderEliminar
    Respuestas
    1. "Debajo de la entrada" es la opción para que salga como aquí y después hay que "Guardar configuración"

      Eliminar
    2. Muchas gracias Oloman. Eso que tú indicas es lo que hago, pero no, no funciona, es decir, no se quedan desplegados de forma fija, como aquí, sino que para verlos hay que hacer clic en "comentarios" de la entrada; en ese caso, sí que se despliegan debajo de la misma, en vez de en una ventana aparte, por ejemplo, pero no se quedan a la vista de forma fija. Bueno, lo seguiré intentando de alguna otra forma. Gracias de nuevo por tu ayuda :)

      Eliminar
    3. Tendría que ver tu blog para quizás -sólo quizás- poderte dar alguna información adicional

      Eliminar
    4. Comentario de prueba. Quiero vero como sale el tercer nivel de anidamiento de comentarios. Gracias y disculpad

      Eliminar
  10. Genial aparezco en la imagen buen post Olo.

    ResponderEliminar
    Respuestas
    1. Casualidad. Estabas por ahí cuando hice la captura. ;)

      Eliminar
    2. Un halago demasiado grande viejo, aparecer en esa captura, saludos desde Venezuela Olo...

      Eliminar
    3. Eso os pasa por comentar por aquí y cuando tengo que hacer una captura, pues salís en la "foto" ;)

      Eliminar
  11. Hola Oloman tengo una consulta: yo uso la plantilla simple de Blogger, y nunca le hice ninguna mejora a los comentarios, este diseño me gusta: antes de incluir este código, tendría que hacer algo más? por las dudas no vaya a armar un desbarajuste.. Gracias

    ResponderEliminar
    Respuestas
    1. Pues sí, tendrías que hacer algo más porque este formato está preparado para los nuevos comentarios anidados y tú tienes todavía los antiguos. En el buscador podrás encontrar cómo instalar los nuevos con la cadena "comentarios anidados"... si te atreves :D

      Eliminar
    2. pues vamos a ver qué resulta :D gracias!

      Eliminar
    3. hola Oloman, ya está, quedó muy bueno!! :) ahora, hay algo que no puedo resolver, cómo modifico el tamaño del espacio para introducir comentario? está muy ancho. gracias otra vez!!
      ah una cosa: no tomes en cuenta mis comentarios en tus otros post sobre comentarios anidados, lo fui resolviendo je je

      Eliminar
    4. .comment-form {max-width:90%; margin:0 auto 0 68px;}

      Cambia el 90% y el margen izquierdo (68px) como gustes ;)

      Eliminar
  12. Otro truco muy bueno! Gracias e saludos de Brazil.

    ResponderEliminar
    Respuestas
    1. Obrigado. Eu vi que você colocou no seu blog ;)

      Eliminar
  13. Hola Oloman,

    Yo soy totalmente ignorante a lo q se refiere a cambiar cosas en las plantillas d los blogs y he decidido cambiar cosas en mi blog y d hecho lo hice, gracias a tus explicaciones, sin embargo, estoy tratando de separa los comentarios en mi blog, la idea del bocadillo es interesante, pero me gustaría hacer la cosa mas sencilla, separarlos con una linea, he visto tu post sobre el HTML d los separadores, pero no entiendo donde debo ponerle en mi plantilla para q salga la separación entre un comentario y otro. A través d tu blog he entendido lo d CSS y me encanta lo q se puede hacer....bueno, en realidad solo quería agradecerte por las explicaciones d forma sencilla y clara q hasta una ignorante como yo las entiende, y acabé por enrollarme.....muchas gracias,
    Saludos,
    Lany

    ResponderEliminar
    Respuestas
    1. No sé si es esto lo que quieres, pero si funciona a tu gusto luego sólo tienes que cambiar lo del BORDER por las propiedades que viste en el post de los HR (separadores). Añádelo a tu CSS

      .comments .comments-content .comment-thread ol li {
      border-bottom: 1px solid blue;
      }

      Eliminar
    2. Gracias por contestarme, voy a probar, porque por lo poco que entiendo, creo q esta linea va en el final de todos los comentarios, separando la caja de los comentarios de los comentarios(no lo sé), pero lo q quiero es separar los comentarios de cada persona q escribe con una linea debajo, el caso es q tengo la fecha de los comentarios en la parte d arriba (igual q tú) y he probado con unos códigos pero no me ha funcionado. Seguiré leyendo mas cosas d tu blog para ver si me entero d mas cosas y trato d ver q es lo q hago mal....una vez más gracias....
      Lany

      Eliminar
    3. No exactamente. Ese código que te indiqué crea una línea entre cada grupo de comentarios, entendiendo como grupo lo que es un comentario y sus respuestas.

      Eliminar
  14. Hola Oloman, excelente post. Es más o menos lo que buscaba. Muchas gracias.

    Una pregunta. ¿Cómo puedo cambiar el color de "responder" que hay justo dentro del comentario. Lo digo porque al tener el mismo color que el texto, no me gusta como queda. Gracias.

    ResponderEliminar
  15. Con esta clase es con la que controlas los enlaces Responder y Eliminar de dentro de los comentarios, aunque la de Eliminar sólo la ves tú:
    .comments .comment .comment-actions a {color: XXX;}

    ResponderEliminar
  16. Hola Oloman,

    Quiero darte las gracias por la ayuda q me has dado con mi duda de la separación de los comentarios, ya lo hice, y por increíble q parezca (por mi torpeza) lo he hecho con una foto, me gusta mucho q esta ahora, y si soy sincera me gusta como va quedando mi blog poco a poco con cada post tuyo q leo y algunas conclusiones q voy tomando por mí misma, es genial...muchas gracias.
    Aprovechando, ya q no consigo encontrar en tus post, quizá porque aun no domino bien lo d buscar las cosas por sus nombres, pero me gustaría q si hay alguno post q me lo pongas aquí, y si no lo hay, se queda como sugerencia: Me gustaría transformar los gadget de lista a un menú desplegable, igual al q se puede hacer con los archivos.

    Un saludo y gracias por todo...
    Lany

    ResponderEliminar
    Respuestas
    1. Bueno, pon en el buscador "desplegable" y encontrarás algunas ideas. Por ejemplo esta.

      Eliminar
    2. Hola Oloman,

      Después d una temporada en off, vuelvo para agradecerte tus consejos, al final he visto algo sobre sumarios q se pueden crear con paginas en blanco en blogger y me gustó por lo sencillo q es...
      Gracias por la ayuda y voy a echar un vistazo en tus nuevos (para mí) post...
      Saludos,
      Lany

      Eliminar
  17. No me salen las imágenes... Por qué? Qué estaré haciendo mal?
    Saludos y gracias.

    ResponderEliminar
  18. Lo he probado en un par de blogs cuya administración comparto con unos amigos y en todos me sucedió igual: sale el circulo vacío.

    http://plumaslatinoamericanas.blogspot.com.ar/
    http://cuadernosdelaira.blogspot.com.ar/
    http://chileliterario.blogspot.com/

    ResponderEliminar
    Respuestas
    1. En Diseño > Entradas y Comentarios > Ubicación de Comentarios... ¿tienes seleccionado "Debajo de la entrada"? Me da a mí que puede ser eso.

      Eliminar
    2. Sí está y también tengo habilitadas las imágenes en el Lightbox. Las imágenes de los que comentan no me aparecen nunca.

      Eliminar
    3. Pues por favor asegúrate de que además tienes seleccionado lo de "Usuarios registrados". Los que no lo están salen con avatares estándar. De todas formas insisto en lo de "Debajo de la entrada", porque al pinchar el link para comentar se abre una ventana nueva sólo para comentarios.

      Eliminar
  19. Como modifico el ancho de las viñetas, no lo consigo, me gustaría hacerlas un poco más pequeñas.

    ResponderEliminar
    Respuestas
    1. Ponle a .comments {} un ancho fijo en píxeles o en tanto por ciento. Por ejemplo 90 u 80%

      Eliminar
  20. Gracias! Me ayudo mucho.

    ResponderEliminar
  21. Muchas gracias n_n! lo implemente en mi blog y se ve muy bonito... pero ahora tengo una duda, que ya rode y rode y no pude solucionarla X_x, quisiera que los comentarios del autor del blog se vieran en un color diferente... pero asi con este estilo, que le tengo que añadir :/ ?? Gracias n_n

    ResponderEliminar
  22. mmm si ya hice eso pero no destaca mucho xD... veo que tu color de borde es diferente a los demás... como hiciste eso? :O

    ResponderEliminar
  23. perdon por el doble post pero eso es lo que quiero hacer... veo que tus comentarios tienen un distinto color de borde y fondo... eso es lo que quiero hacer, como se hace? gracias :3

    ResponderEliminar
    Respuestas
    1. Precisamente a raíz de tu comentario me puse a investigar y esa es la prueba de que encontré un sistema que funciona :) No sólo cambié el borde sino también el fondo del bloque.

      Lo que ocurre es que no me gusta dar el código sin más y necesito dos posts preliminares para que se entienda bien lo que hice. Ya tengo preparado el primero que va de selectores CSS. Paciencia ;)

      Eliminar
  24. ahh ok!
    estare esperando n_n!! muchas gracias por la ayuda :3 ... habia preguntado en otros lados y me decian que me tenia que olvidar de los comentarios anidados... cosa que no quisiera hacer pero si no hay de otra pues lastima :C ... una vez más gracias :D n_n

    ResponderEliminar
  25. No se si sera el sitio correcto moderalo Oloman si es necesario gracias.

    Buenas Oloman necesito cambiar el color de fondo de la caja de comentarios de mi blog.
    Y si es pòsible es de las respuestas.

    Algo que seria simple no los consigo, hasta logro poner el tema de los comentarios anidado tipo comic pero el color de fondo no consigo cambiarlo.

    Ejemplo:
    http://www.subirimagenes.net/i/130609111013219443.png

    ResponderEliminar
    Respuestas
    1. El color de fondo es este que está aquí:
      #comments {
      background: #cccccc none repeat scroll top center;
      padding: 15px;
      ...

      y si no te aparece en tu código CSS, simplemente lo añades con el color que quieras.

      En este enlace tienes una lista con todos los selectores que controlan los comentarios anidados.

      Eliminar
    2. Como siempre Oloman gracias por tu tiempo,, para los que no estamos comenzando un blog gracias me sirvio de mucho espero le sirva a mas gente.

      Eliminar
  26. Hola genial blog! digno de la locura! ... pero me ha metido en un problema este post. Resulta que lo he ingresado a mi plantilla el código y ya no se puede entrar para agregar comentarios :S , supongo que algo se habrá desconfigurado. www.tu-autoayuda.blogspot.com porfa allí puedes darle click a donde dice comentarios para que se entienda mejor lo que te digo... GRACIAS ESPERO TU AYUDA!

    ResponderEliminar
  27. ( dicho sea de paso ya lo quite el código, pero ni así )

    ResponderEliminar
  28. POR FAVOR ESPERO UNA RESPUESTA

    ResponderEliminar
    Respuestas
    1. César, este código no puede afectar en modo alguno a que se vean o no los comentarios, pues para eso hace falta tocar la parte HTML y esto es sólo CSS, es decir, algo que cambia el ASPECTO, pero nada más.

      He mirado hasta dónde he podido tu código y todavía tienes esto que propuse yo, por lo que sospecho que lo que pusiste y luego quitaste fue precisamente lo que te provocó la desaparición de los comentarios. Supongo que no tendrás una copia de seguridad porque si la tienes esa sería la solución, restaurarla.

      Eliminar
  29. Si es cierto aún está , recuerdo que había quitado algo de los comentarios porque estaba duplicado un código pero luego lo agregué denuevo, que otra cosa podría a ser para que se vean los oomentarios?...

    ResponderEliminar
    Respuestas
    1. Quizás metiste el gadget que los genera entre algún condicional que hace que no se vean.

      Eliminar
  30. Ya borré el código de - Estilo bocadillo - todo el código . Y NADA :/
    Que ne recomiendas, no voy a estar así sin comentarios... porfa ayúdame!

    ResponderEliminar
    Respuestas
    1. César, pero es que ese es un problema que yo no te puedo solucionar desde aquí porque todo está como artilugio de plantilla y precisamente esa parte de los comentarios está actualmente bastante compleja con los antiguos, los anidados, los de Google... En fin, que no puedo darte otra solución mas que restaurar las plantillas de artilugios (en la pantalla de Edición HTML de plantilla).

      Pero eso te borrará algunos de los trucos que incorporaste casi con seguridad y entonces te tocará volverlos a poner. Si lo vas a hacer primero crea una copia de seguridad y así podrás recuperar lo que pierdas fijándote en el código actual que tienes.

      Eliminar
  31. Hola de nuevo, Oloman, quería consultarte algo sobre la numeración de los comentarios. Pasa que los números se quedan como ocultos detrás de la caja de comentarios. Le he quitado el color de fondo para que puedan verse un poco, pero me gustaría que se vieran del todo con o sin color de fondo en la caja de comentario. ¿Cómo podría hacer?

    ResponderEliminar
    Respuestas
    1. Los puedes mover un poco...
      En el selector .comment-thread li:before añade:
      position: relative;
      top: 10px;
      right: 10px;

      Y en el de .comment-thread li li:before también lo mismo.

      Eliminar
  32. Sr. Oloman/Oloblogger, buenas tardes, tengo la siguiente duda... como hago si quiero que el avatar del autor del comentario quede no encerrado en un circulo sino en un cuadrado con bordes redondeados? como lo hago? y que este avatar se vea un poco mas grande? ... porque trate de modificar un poco el codigo que nos puso arriba, pero no me resultó... solo logré cambiar los colores (aqui se ve como me quedó: http://elsecretodelabuenalectura.blogspot.com/2013/06/beastly.html )

    ResponderEliminar
    Respuestas
    1. Hola. Para que te queden los avatares como quieres, tienes que cambiar el valor 60px de esta línea, border-radius: 60px;, por otro más pequeño. Por ejemplo, 5px.
      Para que se vea más grande tendrías que cambiar todos los valores height y width que ves fijados también en 60px, por otro más grande. Pero ojo, que quizás se deformará mucho.

      Eliminar
  33. Hola acabo de ver que ayudas a gente a solucionar sus problemas con sus blogs. Tengo un problema y es que no puedo responder en mi blog a los comentarios que dice la gente. He revisado mi plantilla y tiene exactamente lo que dices en tu post http://www.oloblogger.com/2012/01/insertar-respuestas-replies-blogger-en.html Puedes ayudarme? muchas gracias. haces un trabajo genial con tu blog. un saludo y encantada de conocerte.

    ResponderEliminar
    Respuestas
    1. Esto me ha funcionado a mí casi siempre. Lo primero haz una copia de seguridad por si las flies y luego busca en tu plantilla este includable:
      <b:includable id='main' var='top'>

      Lo que tienes que hacer es borrarlo completo, incluidos apertura y cierre y guardar los cambios. Blogger te lo restaurará con el código actualizado.

      Eliminar
    2. Gracias por la aportación pero aún así sigue sin funcionar. Cuando pincho el botón de responder a uno de los comentarios de mi blog no me sale nada. Otra opción? Muchas gracias

      Eliminar
    3. Vale, esto hay que ir poco a poco pues tiene muchos apartados el tema de los comentarios. Ahora haz lo que se explica aquí, pero en este caso, si te sigue sin funcionar, vuelve al código anterior. Para eso guárdalo temporalmente en un bloc de notas.

      Eliminar
    4. Perfecto, ahora si que si. Muchísimas gracias por tu ayuda. Si no, habría sido imposible. Me encanta tu trabajo ayudas a mucha gente. un saludo y nos leemos.

      Eliminar
  34. hola ta muy bueno aunque no se porque el circulo de mis comentarios salen iwal, y ati te sale diferente osea blanco y al resto amarillo haber que debo cambiar si me avisas gracias saludos

    ResponderEliminar
    Respuestas
    1. Mira la página principal del blog. Hace muy poco publiqué cómo se hace eso ;)

      Eliminar
  35. Hola!!antes de nada gracias por tus tutoriales!! acabo de conocer tu blog y estoy a tope leyendo todo lo atrasado jajaja

    Como puedes ver en este post por ejemplo (click aquí) , he conseguido hacer el estilo bocadillo de comic, pero no sé por qué se me queda un rectángulo gris de fondo de mis respuestas y no veo en que parte del código puedo cambiarlo. ¿me puedes ayudar?

    Te pego el código tal como lo tengo ahora:



    /* Estilo bocadillo comic */
    .comments .comment-block {
    position: relative;
    margin-top: 10px;
    margin-left: 60px;
    padding: 10px;
    color: #000000;
    background: #FFFFFF;
    border: 2px solid #000000 !important;
    border-radius:10px;
    }
    .comment-thread li .comment-block:before {
    position: absolute;
    left: -26px;
    content: "\25C4";
    color:#000000;
    }
    .comments .avatar-image-container {
    width: 60px;
    height: 60px;
    max-height: 60px;
    margin:0 0 0 -22px;
    padding: 0px;
    border: 2px solid #000000;
    border-radius: 60px;
    }
    .comments .avatar-image-container img {
    overflow:hidden;
    width: 60px;
    height: 60px;
    max-width: 60px;
    border:0 !important;
    border-radius:60px;
    }




    Y otra dudilla, en los abatares con forma de círculo (veo que a ti también te pasa) en el lado derecho aparece un rectángulo vertical pequeñin, ¿existe alguna manera de quitarlo?

    Muchas gracias de antemano!!!
    Un saludo!!

    ResponderEliminar
  36. Uyss pues si que investigué poco jejeje ya conseguí lo del fondo gris toquiteando en Plantilla> Personalizar.

    Esto me queda pendiente:

    "Y otra dudilla, en los abatares con forma de círculo (veo que a ti también te pasa) en el lado derecho aparece un rectángulo vertical pequeñin, ¿existe alguna manera de quitarlo?"

    Gracias!!!

    ResponderEliminar
    Respuestas
    1. Pues no sé que es eso del rectángulo vertical pequeñín, porque la verdad es que yo no lo veo. Pienso que tiene que ser cosa de tu navegador, pero he probado con varios y con todos lo veo bien...

      Eliminar
    2. Uhmmm yo lo veo desde Safari y Chrome :S ¿te puedo mandar un pantallazo a algún correo electrónico?

      Gracias!

      Eliminar
    3. Mándame la dirección de la captura por aquí. Adjunta también la dirección de tu blog y una nota breve sobre el problema, que sois muchos y no me acordaré.

      Eliminar
  37. Hola Oloman, muchas gracias por tu trabajo es genial ;) He puesto este estilo en mi blog y queda de lujo, solo una duda, he conseguido juntar los comentarios porque quedaban demasiado separados, pero no consigo poner a la misma altura los avatares y me quedan demasiado bajos, ¿como puedo hacer? Gracias adelantadas :)

    ResponderEliminar
    Respuestas
    1. ¿Me pasas la dirección de un post con comentarios que lo vea? Es que en tu perfil veo varios blogs y en un primer "escaneo" no encontré ninguno con ese estilo.

      Eliminar
  38. Buenas noches, Olomán.

    Hace ahora poco más de un año te escribí un comentario en este post con la idea de ir cambiando poco a poco la plantilla de mi blog naturalezayviajes.com.

    Estoy ahora haciendo un sorteo en mi blog y acabo de recibir el comentario 201 y qué pasa? Como sabes, no se ve el comentario 201. El problema es que no puedo cargar los siguientes comentarios (digamos para enterdernos, la página 2 de los comentarios) y no sé qué hacer. Imagino que al estar tan modificada la plantilla no carga esa segunda página de comentarios. ¿Podrías iluminarme, por favor?

    Un abrazo enorme y felicidades nuevamente por tu trabajo.

    ResponderEliminar
    Respuestas
    1. Disculpa, olvidé comentarte que el post de los 201 comentarios es este: www.naturalezayviajes.com/2014/03/blog-septimo-aniversario.html

      Gracias.

      Eliminar
    2. Hola Oloman,

      Sólo comentarte que buscando en internet encontré este enlace: https://support.google.com/blogger/answer/1725597?hl=es y lo he conseguido solucionar.

      Parece ser que esto le pasa a mucha gente y de ahí que encontrase más información en la red. Lo único que he hecho es cambiar en "configuración" el feed de mi blog a "Completo". Lo tenía en "corto". desconozco si este cambio por otro lado tendrá otras consecuencias y dejará de funcionar otra cosa.

      Muchas gracias. Saludos.

      Eliminar
    3. No que va. Ese cambio no te va a afectar a nada más en el blog.
      Me viene muy bien saberlo para otros que tienen también ese problema y que no se arreglaba con otros métodos. Gracias.

      Eliminar
  39. Hola Oloman. Yo tengo los comentarios con disqus. Se puede hacer esto que explicas.

    Muchas gracias

    ResponderEliminar
  40. Respuestas
    1. No Libertad. El estilo CSS siempre es para una serie de selectores (clases, ID) determinados que van personalizados en cada plantilla y normalmente son distintos, así que no podrías usar estos de manera general.

      Disqus seguro que maneja los suyos propios y tendrías que averiguar cuales son para ajustar esto.

      Además, sospecho (no lo sé seguro) que Disqus es del lado del servidor o incluso un iframe, y en ese caso, ni averiguando qué hace cada selector, podrías cambiar su aspecto.

      Eliminar
  41. Una pregunta. Se puede poner un borde diferente al redondo en las imágenes de los comentarios. Por ejemplo: imaginemos que quiero que tenga un marco en forma de flor y luego dentro aparecería la imagen de cada persona que escribe. Se podría hacer eso? Gracias

    ResponderEliminar
    Respuestas
    1. Más o menos. Tendrías que cambiar las declaraciones de .comments .avatar-image-container y dejarlas así:
      .comments .avatar-image-container {
      overflow: visible;
      width: 60px;
      height: 60px;
      max-height: 60px;
      margin: 0 0 0 -22px;
      padding: 0px;
      border: 6px solid transparent;
      border-radius: 60px;
      background-image: url(URL_IMAGEN_FONDO);
      }

      El valor de border (6px) es el espacio que quedaría alrededor del avatar y lo puedes modificar si tu dibujo es más grande. El border-radius se puede suprimir.

      Eliminar
  42. Hola, todo me salió bien gracias a tu tutorial , pero tengo una curiosidad.

    Cómo puedo hacer para que mi respuesta a los comentarios sea diferente a las personas que que me comentan ? es decir tener diferentes fondos.

    Gracias de antemano

    ResponderEliminar
  43. Me ha funcionado de 10 y tengo que tocarle un poco las dimensiones pero tengo un problema...¿Como hago para que la para que la flechita "<" que apunta al avatar se haga mas grande... se agradece genio.

    ResponderEliminar
    Respuestas
    1. La flechita la forma esta parte:

      .comment-thread li .comment-block:before {
      position: absolute;
      left: -26px;
      content: "\25C4";
      color:#990000;
      }

      Si ahí añades un font-size con un tamaño superior al de la letra de los comentarios, entonces saldrá un triángulo más grande.

      Eliminar