Poner una Imagen a los Comentarios Anónimos en Blogger

Después de haber visto cómo habilitar el avatares en los comentarios en blogger, hoy veremos  cómo poner una imagen en los comentarios anónimos en blogger.

Como bien sabemos los que tenemos un blog en blogger, que cuando una persona comenta en nuestro blog con perfil Anónimo y Nombre/URL nos aparece un pequeño icono de 16x16 píxeles, pero gracias al trabajo de J-Miur que nos ha resuelto estos problemillas podemos ocultar ese pequeño icono, y  mostrar una imagen que nos guste de 45x45 píxeles ya que la que se muestra por defecto en los avatares es de 35x35 píxeles, este código hará que el avatar se muestre 10 pixeles más grande.

Este truco esta basado en el código de J-Miur. Para ello tenemos que cambiar algunas líneas de códigos, así que busca el siguiente código que por defecto las propiedades CSS del avatar son la siguiente:

[+/-] Ver / Ocultar código

 También puede que  tu plantilla lleve las siguientes líneas de código:


#comments-block .avatar-image-container img {

border:1px solid #CCCCCC;

float:right;

}


[+/-] Ver / Ocultar código


#comments-block .avatar-image-container img {

border:1px solid #CCCCCC;

float:right;

}

#comments-block .avatar-image-container.avatar-stock img {

  border-width:0;

  padding:1px;

}

#comments-block .avatar-image-container {

  height:37px;

  left:-45px;

  position:absolute;

  width:37px;

}

#comments-block.avatar-comment-indent {

  margin-left:45px;

  position:relative;

}

#comments-block.avatar-comment-indent dd {

  margin-left:0;

}

iframe.avatar-hovercard-iframe {

  border:0 none;

  height:9.4em;

  margin:0.5em;

  padding:0;

  width:25em;

}


Una vez encontrado uno de los dos anteriores códigos, lo remplazamos por el siguiente código:


#comments-block.avatar-comment-indent {
  margin-left: 0;
}
#comments-block .avatar-image-container {
  float: left;
  height: 49px;
  position: static;
  width: 49px;
}
#comments-block .avatar-image-container img {
  background:#234 url(URL_de-tu-imagen.PNG) no-repeat 50% 50%;
  border: 1px solid #456;
  display: block;
  float: none;
  min-height: 45px;
  min-width: 45px;
  padding: 2px;
}
#comments-block .avatar-image-container.avatar-stock {
  background: #234 url(URL_de-tu-imagen.PNG) no-repeat 50% 50%;
  border: 1px solid #456;
}
#comments-block .avatar-image-container.avatar-stock img {
  display: none;
}
img.delayLoad {
  max-height: 45px;
  max-width: 45px;
  min-height: 45px;
  min-width: 45px;
}


Hecho lo anterior, ya tenemos el avatar habilitado para los comentarios anónimos, ahora solo cambia lo que está en rojo por la URL de tu imagen.

Si tienen algún problema háganmelo saber por medio de los comentarios.