Avatar personalizado para comentarios (anidados) anónimos | Oloblogger Para los comentarios tradicionales ya teníamos sistemas para mostrar un avatar personalizado en los comentarios anónimos, pero con los nuevo...

24 de enero de 2012

Avatar personalizado para comentarios (anidados) anónimos

Para los comentarios tradicionales ya teníamos sistemas para mostrar un avatar personalizado en los comentarios anónimos, pero con los nuevos da un poco de respeto ponerse a trastear en el script. Sobre todo teniendo en cuenta que es posible que algo modifiquen en un futuro no muy lejano.

Pero vamos a explicar un par de truquillos usando CSS que no sólo nos facilitan bastante la tarea, sino que también nos permitirán volver atrás cuando queramos, borrando sólo una única línea. La misma que ahora vamos a insertar en nuestro código para arreglar esto.


En ambos casos, nuestra faena empieza por diseñar un avatar de 36x36px para utilizar en lugar del espacio en blanco que saldría si no hacemos nada. Aquí tenéis uno para las pruebas.


La primera opción es aplicar un fondo con el dibujo que queremos y que se aplicará en todos los casos. El truco está en que cuando existe avatar, este se mostrará por encima del fondo y no se apreciará que hay otra imagen debajo. Estamos hablando de CSS, así que esto habría que meterlo entre las dos etiquetas SKIN.

.comments .avatar-image-container {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgzZ-dzFmo2H8KYgAhB9U9h-V94dHduCfLMRznsIT9Ms2w6EIH0-cr693vE0UzjSgHJo7J5tPMJ6d0U2t6UU2i1fl4FlnLCe501_xOUSWNJvMpy92_2Qftlvq3G_BtC2T4cmDrgq8w1930/s1600/anonimo.jpg) no-repeat 50% 50%;
}

Este sistema sólo tiene un problema y es cuando el usuario utiliza una imagen con transparencia. En este caso, el avatar que usamos de fondo se verá a través de las zonas transparentes.


Segunda opción. Para solucionar eso echaremos mano de los selectores de atributos, que nos permiten filtrar dentro de una determinada clase, aquellos elementos con un característica peculiar.


Y esta característica en los comentarios anónimos es precisamente la imagen sin contenido que Blogger les aplica y cuya dirección es http://img1.blogblog.com/img/blank.gif. Si pincháis en el enlace veréis... nada, pues eso es lo que contiene la imagen. Bueno, en honor a la verdad es una imagen casi imperceptible de 1x1 px.

Teniendo en cuenta esto, la otra alternativa a mi parecer más completa, sería esta:

.avatar-image-container img[src$="img1.blogblog.com/img/blank.gif"] {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgzZ-dzFmo2H8KYgAhB9U9h-V94dHduCfLMRznsIT9Ms2w6EIH0-cr693vE0UzjSgHJo7J5tPMJ6d0U2t6UU2i1fl4FlnLCe501_xOUSWNJvMpy92_2Qftlvq3G_BtC2T4cmDrgq8w1930/s1600/anonimo.jpg) no-repeat 50% 50%;
}

Para los curiosos, lo que hace esto es buscar en todas las clases .avatar-image-container que haya en nuestra página y comprobar si la imagen que incluyen termina en la cadena img1.blogblog.com/img/blank.gif.

A las que cumplen con esa condición se les aplica un fondo que es el dibujo de nuestro anónimo amigo.

En este segundo sistema, el problema reside en que los navegadores más antiguos no reconocen los selectores de este tipo, pero afortunadamente, cada vez quedan menos.

¿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

40 comentarios :

  1. Una pregunta Oloman¿?


    Estoy utilizando el codigo para numerar comentarios con css este, y cada vez que hay un nuevo comentario a parece el numero 1 y cuando hay replies, cambia a 1.a y asi sucesivamente, pero cuando pongo otro comentario aparece la lista así:

    1
    1.a
    1.b
    1.c

    1
    1.a
    y se repite de nuevo...

    AYUDA
    como lo soluciono...

    ResponderEliminar
    Respuestas
    1. Sergio, he mirado aquí y todo va bien. Supongo que ya está solucionado. Agradecería que me lo hicieráis saber y así no tengo que andar mirando para nada. Gracias.

      Eliminar
  2. Oloman, te doy otra regla CSS. Hay gente que comenta con este avatar, por defecto de blogger.

    La regla sería esta:

    .comment .avatar-image-container img[src="http://img2.blogblog.com/img/b16-rounded.gif"]

    ResponderEliminar
    Respuestas
    1. Es verdad. No recuerdo en qué casos sale pero es otra opción que nos permitiría sustituir también eso. Lo que ocurre es que sería algo más complicado porque esa imagen no es transparente como la otra y cuando pusiéramos un fondo como aquí se ha explicado, esa B seguiría viéndose por encima.

      Para solucionarlo se me ocurre que se podría usar un CONTENT posicionado con ABSOLUTE por encima del contenido original (el logo de Blogger).

      Gracias por el apunte que supongo sirve para todos.

      Eliminar
    2. Yo lo que he hecho es usar: visibility:hidden y solucionado.

      Eliminar
    3. Ahora me perdí. Si a esta segunda imagen le pones un hidden, no se ve nada ¿no? Ni el background ni la B ¿?

      Eliminar
    4. sí, con visivility:hidden la imagen en sí no es visible, pero ocupa espacio, así que el contenedor sí, por lo que el fondo se ve.

      Eliminar
    5. Es cierto, se me fue la perola.
      Si ocultas la imagen con visibility:hidden, no se ve el fondo de la imagen, pero si el del contenedor.

      Yo lo que haría sería poner un fondo a las imágenes normales para evitar que se vea el fondo del contenedor si son transparentes, y ocultar esas dos para que se vea el fondo del contenedor.

      Eliminar
    6. Creo que el resultado sería el mismo. Si las imágenes normales tienen un fondo, el avatar con transparencia dejaría ver detras ese fondo. No te comas el coco que el logo de Blogger no es tan grave como un hueco. De todas formas, creo que si lo que quieres es que no se vea la B, puede que ocultar esa imagen y poner un fondo al contenedor puede funcionar. Es casi lo mismo que has dicho ;)

      .avatar-image-container img[src="http://img2.blogblog.com/img/b16-rounded.gif"] {display:none;}

      .avatar-image-container {BACKGROUND}

      Eliminar
  3. Me acabo de fijar en algo olo...

    ¿Cómo has hecho para que los links de los comentarios sean interactivos al hacer clic? Los mios solo cambian de color al pasar el cursor pero si hago clic no funcionan.

    Gracias.

    ResponderEliminar
    Respuestas
    1. Usando la clase a:active
      Lo siento oloman si te quito trabajo ;)

      Eliminar
    2. es como si me hubieran hablado en chino jajaja

      ¿Que es una clase? ¿Que hago con esa clase?

      xDD

      Eliminar
    3. No problemo Emilio. Se agradece una ayuda. Lo que pasa es que no sé si es eso lo que pregunta William porque mis enlaces sólo tienen el hover. De hecho pensaba que se refería a que los enlaces de Responder no le funcionaban como les pasaba a otros, pero tampoco es eso porque en su blog pitan bien.

      ¿A qué te refieres entonces William?

      Eliminar
  4. Oloman. Hola soy Alex, y pues ya tiene mucho tiempo que he visitado este sitio, pero por lo regular no leo ninguna entrada, pero ahora que me percato, que eres un genio, te sigo en twitter y facebook, para estar al tanto.

    Felicidades con el sitio.

    ResponderEliminar
    Respuestas
    1. Bueno, gracias. Pero estoy lejos de ser un genio. Como mucho alguien muy observador, con ganas de aprender y muy cabezota cuando algo no funciona :)

      Eliminar
  5. TwT ha dejado de salir la imagen de los cometarios anónimos

    ResponderEliminar
    Respuestas
    1. Sí, este truco ya no sirve. Hace un par de días Blogger volvió a cambiar el código y ahora es más complicado cambiarlo sólo con CSS. Tanto que no he dado con la manera :s

      Eliminar
    2. TwT eso me imagine, bueno ni modo, habra que esperar :D

      Eliminar
    3. Ah vale... por eso no me funcionaba!!

      Eliminar
  6. Mirate esta blog, dicen como cambiar el icono tanto de anonimo como de blogger: (esta en ingles)

    helplogger.blogspot.com.es/2012/05/how-to-change-default-anonymous-avatar.html

    ResponderEliminar
    Respuestas
    1. Gracias. Le echo un vistazo, lo compruebo y si funciona lo publico ;)

      Eliminar
    2. Visto. Es un script y aunque hubiera preferido hacerlo con CSS, mejor en nada...

      Eliminar
  7. Hola Oloman.
    No consigo cambiar el avatar con ninguna de las dos propuestas que haces, empiezo a creer que será por alguna incompatibilidad entre líneas...
    Un saludo.

    ResponderEliminar
    Respuestas
    1. En esta ocasión no. El problema es que Blogger cambió sus códigos y este truco que era sencillo no sirve ya. Hay que usar JavaScript. Aquí se explica cómo.

      Eliminar
    2. Muchas gracias, lo pruebo y te dejo recado allí.
      Otro saludo ;)

      Eliminar
  8. y como se quitaría más o menos ese triangulito con el símbolo de admiracion molesto que sale de comentarios anónimos? ._.?

    ResponderEliminar
    Respuestas
    1. Eso no son comentarios anónimos, sino avatares cuya imagen el propietario ha borrado... intencionada o accidentalmente.

      Eliminar
  9. Oloman tengo un problemas con los Avatar, salen completo. Pero al intentar agregar el código:

    .comments .avatar-image-container {
    overflow: hidden;
    width: 48px;
    height: 48px;
    max-height: 48px;
    border: 4px solid $#000000;
    border-radius: 48px;
    }
    .comments .avatar-image-container img {
    width: 48px;
    height: 48px;
    }

    Se ven dos imágenes (casi cada una a la mitad). ¿Me puedes echar una mano si no es mucha molestia?

    El blog es el siguiente: Payoneer tu tarjeta - Ayudas, soluciones, tutoriales y más.

    Saludos y muchas gracias.

    ResponderEliminar
    Respuestas
    1. No sé. Móntalo y lo veo cuando pueda, pero desde el inspector he añadido ese código en esas clases en tu blog y se veía bien.

      Eliminar
  10. Buenos días Oloman. Tengo un blog en wordpress y cuando dejo comentarios en blogger no veo la imagen de perfil, como verás en este comentario.
    En wordpress tengo dado de alta el gravatar.
    Me gustaría poder dejar mi gravatar en los comentarios de otros blogs.
    ¿Puedes ayudarme?
    Muchas gracias por todo

    ResponderEliminar
    Respuestas
    1. Con una vez es suficiente para que vea tus comentarios. Te contesté AQUÍ

      Eliminar
  11. Oloman, una consulta: Si hay varios autores en un blog y alguien hace un comentario en una publicación de uno de ellos (que no fue el creador del blog) ¿quién recibe la notificación del comentario en su correo? ¿El que creo el blog o el autor de la publicación / entrada? Gracias por tu amable respuesta =)

    ResponderEliminar
    Respuestas
    1. Ni el autor ni el que creó el blog.
      Las notificaciones de comentarios las reciben siempre los que sean administradores del blog. Sólo ellos.

      Eliminar
    2. Otra pregunta: Si un blog tiene varios autores aparece el nombre de cada uno de ellos en sus respectivas publicaciones... ademas yo quisiera saber si al lado de sus nombres podria aparecer su avatar y que al darle click nos lleve a ver la lista de pubicaciones de este autor ¿se puede? he visto este sistema en otros blogs, pero creo que no son de Blogger.

      Eliminar
    3. Lo más fácil es que uses la opción de mostrar perfil del autor bajo las entradas que viene nativo con Blogger. Lo tienes explicado en esta entrada.

      Para lo del enlace a la lista de publicaciones de cada cuál eso ya es algo más complejo:
      Opción A (complicada): Usar JavaScript
      Opción B (más rápida y fácil: Añadir a cada entrada una etiqueta con el nombre del autor y en el perfil un enlace a esa etiqueta

      Eliminar
    4. Si, lo segundo funcionaria si solo fuera un autor, pero si son varios no se podría ya que el enlace llevaria a uno solo. A menos que lo haga dentro del post-body y ahi si pondria el autor X y su enlace a donde quisiera, pero es eso justamente lo que quiero hacer automático, sin agregarlo a cada entrada.

      OJO que lo que quiero hacer es para dos autores o mas.

      Eliminar
    5. El enlace llevaría a todas las entradas con la etiqueta=autor, es decir a "la lista de publicaciones de ese autor", que es lo que me decías al principio.

      Tendría que ser en este formato y si lo pones directamente en plantilla, te aparecerá automático para todas las entradas:

      <a expr:href='&quot;http://LOQUESEA.COM/search/label/&quot; + data:post.author'><data:post.author/></a>

      Eliminar
    6. Funciona!! solo habria que agregarle a las entradas de cada autor su nombre como etiqueta para tenerlas juntas en una categoria. Gracias!!

      Eliminar