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.
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%;
}
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%;
}
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.
Y muchos más artículos interesantes si nos sigues en...
Una pregunta Oloman¿?
ResponderEliminarEstoy 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...
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.
EliminarOloman, te doy otra regla CSS. Hay gente que comenta con este avatar, por defecto de blogger.
ResponderEliminarLa regla sería esta:
.comment .avatar-image-container img[src="http://img2.blogblog.com/img/b16-rounded.gif"]
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.
EliminarPara 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.
Yo lo que he hecho es usar: visibility:hidden y solucionado.
EliminarAhora me perdí. Si a esta segunda imagen le pones un hidden, no se ve nada ¿no? Ni el background ni la B ¿?
Eliminarsí, 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.
EliminarEs cierto, se me fue la perola.
EliminarSi 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.
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 ;)
Eliminar.avatar-image-container img[src="http://img2.blogblog.com/img/b16-rounded.gif"] {display:none;}
.avatar-image-container {BACKGROUND}
Me acabo de fijar en algo olo...
ResponderEliminar¿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.
Usando la clase a:active
EliminarLo siento oloman si te quito trabajo ;)
es como si me hubieran hablado en chino jajaja
Eliminar¿Que es una clase? ¿Que hago con esa clase?
xDD
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.
Eliminar¿A qué te refieres entonces William?
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.
ResponderEliminarFelicidades con el sitio.
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 :)
EliminarTwT ha dejado de salir la imagen de los cometarios anónimos
ResponderEliminarSí, 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
EliminarTwT eso me imagine, bueno ni modo, habra que esperar :D
EliminarAh vale... por eso no me funcionaba!!
EliminarEso es ;)
EliminarMirate esta blog, dicen como cambiar el icono tanto de anonimo como de blogger: (esta en ingles)
ResponderEliminarhelplogger.blogspot.com.es/2012/05/how-to-change-default-anonymous-avatar.html
Gracias. Le echo un vistazo, lo compruebo y si funciona lo publico ;)
EliminarVisto. Es un script y aunque hubiera preferido hacerlo con CSS, mejor en nada...
EliminarHola Oloman.
ResponderEliminarNo 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.
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.
EliminarMuchas gracias, lo pruebo y te dejo recado allí.
EliminarOtro saludo ;)
y como se quitaría más o menos ese triangulito con el símbolo de admiracion molesto que sale de comentarios anónimos? ._.?
ResponderEliminarEso no son comentarios anónimos, sino avatares cuya imagen el propietario ha borrado... intencionada o accidentalmente.
EliminarOloman tengo un problemas con los Avatar, salen completo. Pero al intentar agregar el código:
ResponderEliminar.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.
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.
EliminarBuenos 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.
ResponderEliminarEn 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
Con una vez es suficiente para que vea tus comentarios. Te contesté AQUÍ
EliminarOloman, 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 =)
ResponderEliminarNi el autor ni el que creó el blog.
EliminarLas notificaciones de comentarios las reciben siempre los que sean administradores del blog. Sólo ellos.
Gracias!
EliminarOtra 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.
EliminarLo 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.
EliminarPara 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
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.
EliminarOJO que lo que quiero hacer es para dos autores o mas.
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.
EliminarTendría que ser en este formato y si lo pones directamente en plantilla, te aparecerá automático para todas las entradas:
<a expr:href='"http://LOQUESEA.COM/search/label/" + data:post.author'><data:post.author/></a>
Funciona!! solo habria que agregarle a las entradas de cada autor su nombre como etiqueta para tenerlas juntas en una categoria. Gracias!!
Eliminar