Cambiar avatar de comentarios anónimos en Blogger (Para los comentarios anidados)

Por desgracia para muchos cambiar la imagen de los comentarios anónimos puede ser un problema, ya que el método antiguo consistía básicamente en añadir una imagen de fondo que supliera la imagen faltante, pero ahora la cosa cambió.

Blogger en sus nuevos comentarios anidados muestra una imagen (Antes no incluía y el contenedor quedaba libre para añadir una imagen mediante el atributo "background"), y como ya recalcamos anteriormente, el cuerpo de estos mensajes no puede ser editado, por lo que dicha imagen siempre estará ahí.

Ahora bien, existe un método para añadir CSS mediante selectores de atributos, que básicamente consiste en crear selectores que contengan un atributo en particular. Con esta función podemos hacer que la imagen "desaparezca" y podamos nuevamente aplicar el efecto de imagen de fondo al contenedor sin necesidad de recurrir a métodos complicados.

El tutorial:

Si deseas pasar el tutorial e ir directamente al código presiona aquí

Para poder usar estos selectores de atributos, primero es necesario conocer su síntaxis correspondiente:

selector[atributo="valor"] {/*Atributos que se asignarán al selector*/}

Entenderla puede ser complicada al inicio, pero es muy sencilla y fácil de memorizar, veamos un ejemplo particular para situarnos mejor:

<a href="http://www.ayuda-bloggers.info" target="_blank">Enlace con atributo target</a>

El enlace anterior como es posible de apreciar, incluye el atributo target="_blank" (Permite abrir enlaces en otra pestaña), para poder dar atributos a TODOS los enlaces que incluyan este atributo, bastaría con usar la síntaxis, reemplazando los selectores:

a[target="_blank"] {/*Atributos que se asignarán al selector*/}

Ahora, que damos por entendido este ejemplo, procedemos a llevar a cabo nuestro objetivo.

Aprovecharemos entonces el atributo "src" para tomar la URL de la imagen que Blogger por defecto incluye en los comentarios (La URL de este avatar es "http://img1.blogblog.com/img/anon36.png"):

.avatar-image-container img[src="http://img1.blogblog.com/img/anon36.png"] {/*Atributos que se asignarán a la imagen con la URL seleccionada*/}

Ahora para ocultar esta imagen, bastaría con establecerle la opacidad al 0% (Puedes optar por usar el atributo "visibility:hidden", pero cualquiera de las 2 opciones es buena):

.avatar-image-container img[src="http://img1.blogblog.com/img/anon36.png"] {opacity:0;}

Y ahora, para establecer una nueva imagen bastaría con tomar el contenedor y añadir la URL mediante el atributo background:

.avatar-image-container {background:url(URL-IMAGEN);}

Quedando todo el código de la siguiente forma:

.avatar-image-container img[src="http://img1.blogblog.com/img/anon36.png"] {opacity:0;} 
.avatar-image-container {background:url(URL-IMAGEN);}

Reemplaza URL-IMAGEN por la dirección de la nueva imagen.

El código debería ir antes de:

]]></b:skin>