Blogger. Cambiar avatar anónimo y sin imagen | Oloblogger Antes de ciertos cambios que hizo Blogger en sus artilugios, era relativamente fácil cambiar mediant...

26 de agosto de 2012

Blogger. Cambiar avatar anónimo y sin imagen

Antes de ciertos cambios que hizo Blogger en sus artilugios, era relativamente fácil cambiar mediante CSS el avatar de aquellos comentaristas que lo hacían en forma anónima e incluso el de los que no tenían grabada una imagen en su perfil.

Pero actualmente no hay manera con ese estándar, así que no nos queda más remedio si queremos personalizar esos dibujitos que echar mano de JavaScript y realizar una sustitución de imágenes.

Sustituyendo el avatar anónimo

El código está obtenido de HelpBlogger y nos avisó de su existencia, amablemente, ViSo36.

Se requiere jQuery, pero el fichero correspondiente va incluido en el código, así que esto es sólo cosa de copiar y pegar. El lugar en este caso será justo antes del cierre del body, es decir, antes de </body>:


<script src='http://code.jquery.com/jquery-latest.js'/>
<script>
$("img[src='http://img1.blogblog.com/img/anon36.png']").attr('src', 'http://1.bp.blogspot.com/-Zphr2YJH_6w/T6ZZE4YeNBI/AAAAAAAACF0/Tyuj8hkOpdc/s1600/default_avatar.gif').ssyby('blank');
</script>

<script src='http://code.jquery.com/jquery-latest.js'/>
<script>
$("img[src='http://img2.blogblog.com/img/b36-rounded.png']").attr('src', 'http://1.bp.blogspot.com/-eKbzORzVaBQ/T6ZXHmdgHqI/AAAAAAAACFs/rVy3T4gxojM/s1600/blogger-user.png').ssyby('blank')
</script>

La primera mitad sustituye los avatares anónimos y para personalizar la imagen habría que cambiar la dirección en color verde por la de la imagen que deseéis.

La segunda mitad sirve para los usuarios sin imagen, que salen por defecto con el logo de Blogger e igual que antes, la personalización sería cambiando la dirección de la imagen, en ese trozo marcada en azul.

Aparte de las que se incluyen en el script, en HelpBlogger hay un par de imágenes más para el caso de usuarios anónimos y que reproduzco aquí por si las queréis cambiar sin calentaros demasiado la cabeza. Una de ellas es vieja conocida por aquí.

Avatar sin imagen
http://1.bp.blogspot.com/-p8EFlkXywyE/UDZvWTyr1bI/AAAAAAAAEU0/xL8pmKN1KOY/s1600/facebook.png
Avatar anónimo
http://2.bp.blogspot.com/-DqgqWVyFoqo/UDZvWgyHEUI/AAAAAAAAEVA/l0gn2oxxdCg/s1600/anonimo.png

¿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

71 comentarios :

  1. Hola Oloman,

    Muchas gracias por tu aportación ^^ Me hacía mucha falta aunque aún así no he conseguido que funcione, supongo que es porque instalé los comentarios anidados con la versión de Felipe (nicondroid.blogspot.com) y ahora la mayoría de cambios no me los acepta.

    Por cierto, sería genial que pudieras añadir el buscador a tu blog para que salga cuando la página está, por ejemplo, al 50% (cuando no es pantalla completa, no sé cómo explicarlo).

    Un abrazo ;)

    ResponderEliminar
    Respuestas
    1. Conozco esa versión y sí, es posible que al montar los comentarios de otra manera, las clases no coincidan y no te sirva este truco.

      Sobre mi buscador creo que sí te entiendo. Cuando la ventana es más pequeña desaparece la barra lateral izquierda y con ella el buscador. Pues sí es una cosa que algún día tengo que arreglar, pero siempre se me olvida. Gracias.

      Eliminar
  2. Lo he intentado y no me va, pero creo que es porque en mi blog no se veían de antemano el avatar de los anónimos por alguna razón. Así que supongo que para que se vean los míos customizados necesito restaurar los por defecto... ¿Cómo lo hago?

    Ya que estoy, me gustaría preguntar también como restablecer el iconito del lápiz que sale al lado del autor, que en su día lo quité y ahora no se ponerlo de nuevo. Y si se puede personalizar~

    ResponderEliminar
    Respuestas
    1. ¿Puede ser que desde tu escritorio marcaras que no se permitieran comentarios anónimos? Quizás sea tan fácil como desmarcar eso de nuevo.

      Y sobre el icono del lápiz, aquí tienes cómo restaurar ese y los otros de edición rápida.

      Eliminar
    2. No hombre, los comentarios anónimos están permitidos, simplemente no tienen ningún avatar (sin contar a veces la B de Blogger esa pequeñita). Y no sé a qué te refieres con "escritorio" =T (¿la interface de Blogger/no edición HTML?)

      Sobre el lápiz... ¡Bien! Ahora lo pruebo~

      Eliminar
    3. Oh, con lo del lápiz me refería al que aparece en los comentarios, como el tuyo (que además es personalizado). Pues eso, ¿Cómo lo hago?

      Eliminar
    4. Oh, ya se cuál era el problema. El avatar de los anónimos en mi blog era "http://img1.blogblog.com/img/blank.gif" y "http://img2.blogblog.com/img/b16-rounded.gif". O sea, que eran otras direcciones, por razones que desconozco. Ahora sí se ve mi avatar personalizado, pero muy muy pequeñito xD (como la B, 16 píxeles)...

      Eliminar
    5. ¡Bien! ¡Lo conseguí! Googleando para cambiar el tamaño de los avatares encontré el código preciso, pero no iba. Trasteando un poco conseguí que funcionara. Es este (hay que ponerlo antes del cierre de b skin):

      .comments .avatar-image-container{
      width: 35px;
      height: 35px;
      }
      .comments .avatar-image-container img{
      width: 35px;
      height: 35px;
      }


      Y ahí ponéis el tamaño que queráis.

      ...Genial genial, objetivo conseguido~
      Gracias, Oloman!

      Eliminar
    6. Me hace mucha gracia cuando me dais las gracias y vosotros solos habéis resuelto el problema, pero encantado de haberte sido de ayuda :)

      Sobre el lápiz que comentas, el sistema está explicado en este otro post.

      Eliminar
    7. Lo que compartió JFEDP13 me sirvió mucho gracias :D

      Eliminar
  3. Oh, una preguntita más (y perdón por los posts borrados xD):
    ¿Y si quiero que todos los avatares de mi blog se vean iguales? ¿Cómo hago para que también los que comenten con avatar propio tengan el que yo "les imponga"? Eso sería interesante.

    ResponderEliminar
    Respuestas
    1. No problema. Ya han sido liquidados del todo.

      Sobre lo otro de los avatares, no creo que en general sea muy práctico así que perdona por no profundizar. De todas formas y sólo por experimentar, prueba tú.

      Después del estilo correspondiente a comentarios/avatares (siempre después), inserta esto:

      .comment-block .avatar-image-container {
      background: url(DIRECCION_AVATAR_COMUN);
      }
      .comment-block .avatar-image-container img {
      display: none;
      }

      Eliminar
    2. Mmm, no sé a dónde te refieres con "después del estilo correspondiente", pero lo estado probando en varios sitios y por ahora no va. Supongo que no lo he puesto en el lugar adecuado.

      Eliminar
    3. Lo tienes que insertar en la parte de estilo CSS de la plantilla, antes del cierre del SKIN, lo más al final posible, sólo eso.

      Eliminar
  4. Gracias por la entrada, me sirvió mucho.

    ResponderEliminar
  5. Hola Ya lo he puesto en mi blog. Me gustaría saber si sería posible que los iconos se vieran también en el gadget de comentarios recientes que tengo puesta en mi sidebar izda.
    Gracias

    ResponderEliminar
    Respuestas
    1. ¿Iconos? ¿Te refieres a los avatares?

      Eliminar
    2. Si los avatares. Solo se visualizan en los comentarios, pero en el gadget de comentarios recientes que tengo puesto en la sidebar izda siguen saliendo con el avatar de blogger

      Eliminar
    3. Sí algo parecido es lo que yo tengo puesto en mi sidebar izda. Pero lo que me gustaría es que me salieran los avatares que yo he puesto para los comentaristas anónimos y los que no han puesto imagen, que se vieran igual que se ven en los comentarios. Pero en el gadget solo se visualiza el avatar de blogger.
      Si miras en mi blog, verás a lo que me refiero http://marianleemaslibros.blogspot.com/
      No sé si me he explicado...
      Gracias

      Eliminar
    4. Vale. Ahora sí, pero la culpa es mía porque leí muy rápido tu comentario :S

      Este código lo que hace es simplemente tomar la imagen que pone Blogger y sustituirla por otra distinta. Se ve que el gadget de comentarios recientes que tú tienes, utiliza otra (con otra dirección) y por eso no te funciona ahi.

      Se me ocurre que puedes probar el mismo código pero cambiando
      http://img2.blogblog.com/img/b36-rounded.png
      ...por...
      http://3.bp.blogspot.com/-AaI8-1X32ZM/TxMKLVzQ5BI/AAAAAAAABYY/QYau8ov2blE/s60/w2b_blogger_logo.png

      Esta última es la que te sale por lo que creo que funcionará.

      Eliminar
    5. Hola. Lo he probado y funciona en el gadget de comentaristas, pero entonces deja de verse el avatar que yo he puesto en los comentarios. Supongo que será porque es imposible conseguir que se vean los avatares en los dos sitios a la vez. O en los comentarios, o en el gadget de comentaristas recientes, ¿no?

      Eliminar
    6. Bueno, más o menos. Lo que no podemos es sustituir una dirección de imagen que esté en un sitio sin sustituir la que está en otro sitio y que tiene la misma dirección.

      Eliminar
  6. Me encanta este truco, pero cuando lo instalo en mi blog de asesoramientoconsorcios.blogspot.com.ar pasa que el tabview que tengo con facebook, google, archivo, etc aparece cada gadget uno abajo del otro en vez de en el formato de tabview. Cómo puedo modificar el avatar que tengo de anonimo por defecto en mi blog????

    ResponderEliminar
    Respuestas
    1. Pues este es el único modo que conozco, pero no debería afectarte.
      ¿Usas scriptaculous, jQuery u otra librería similar? Con la primera puede darte problemas pues es incompatible con jQuery. Con la segundo tendrías que quitar la primera línea para no cargarla dos veces. Eso también da problemas

      Eliminar
    2. Gracias!!! No me había dado cuenta que estaba esa línea. Ya está funcionando ok!!!

      Eliminar
  7. Hola. Buena entrada. ¿Sabrás cómo hacer para que aparezcan avatares tipo wordpress?, es decir, los avatares de colores brillantes.

    ResponderEliminar
    Respuestas
    1. No me he fijado cómo son ¿puedes pasar una captura?

      Eliminar
  8. Hola, gracias por la entrada me a servido. Tengo una duda un poco fuera de tema: estaba editando el aspecto de los comentarios en blogger y me topo con el enlace "Responder" que no me deja editarlo ¿sabrás de alguna manera de hacerlo?
    Saludos.

    ResponderEliminar
  9. Muchas gracias por la entrada! estaba buscando hace mucho algo así, me ha venido de perlas :)!

    Saludos
    Bocados Divinos

    ResponderEliminar
  10. Hola! que genial entrada, era lo que buscaba, pero tengo un problema con las imágenes de perfil en los comentarios, no se ven "centradas" mira: http://sims-soul.blogspot.com/2012/11/descripcion-y-8-imagenes-los-sims-3.html?showComment=1353549654233#c6059396211528329042
    ademas me encantaría que se vieran de forma circular similares a los de aquí :)
    Gracias de antemano

    ResponderEliminar
    Respuestas
    1. Hola. Lo de que no se ven los avatares centrados no lo entiendo. Tendrías que decirme cómo los quieres, por ejemplo con una captura, porque yo los veo bien. Para hacerlos circulares ya tendrías que pasarte por esta otra entrada.

      Eliminar
  11. Hola Oloman. Muchísimas gracias por este tutorial, me ha sido muy útil, pero creo que finalmente no lo voy a poder usar. Por lo que he podido comprobar, este script es incompatible con el de los botones deslizantes de Scriptaculous compartido aquí: http://ciudadblogger.com/2010/01/boton-de-ir-arriba-e-ir-abajo.html

    No sé si es que el de scriptaculous está obsoleto o qué, pero cuando pongo el de los avatares, deja de funcionar. La verdad es que, por una cuestión de prioridades, casi prefiero las flechitas deslizantes que los avatares. Pero si encontráis algún modo de hacerlos compatibles, por favor decídmelo. Muchas gracias otra vez!

    ResponderEliminar
    Respuestas
    1. Disculpa que te moleste otra vez, Oloman. He encontrado solución a la incompatibilidad entre Scriptaculous y jQuery. Lamento no haberlo descubierto antes y haberte molestado con esto. Por si a alguien le pasa algo parecido, para solucionarlo me ha bastado con introducir los códigos de compatibilidad expuestos aquí: http://ciudadblogger.com/2011/02/usar-jquery-y-scriptaculous-al-mismo.html

      Eliminar
    2. Lo conocía Bettylex, pero gracias por recordarlo y anotarlo aquí para los demás.

      Eliminar
  12. Hola de nuevo Olo, para finiquitar el tema de mi blog, tengo otra duda, para los comentarios utilice esto: http://www.oloblogger.com/2013/01/enlaces-bocadillo-comic.html y claro, los comentarios anónimos salen con la típica silueta sombreada e intente colocar la segunda imagen que propones en esta entrada. En la anterior versión de mi blog funcionaba perfectamente pero en esta con los enlaces bocadillo comic, al pegar el código de la imagen no sucede absolutamente nada, quedándose la silueta sombreada original... ¿a qué se puede deber?. Gracias de antemano, espero no darte la lata más veces crack, el anterior problema ya me lo has solucionado... a ver este...

    ResponderEliminar
    Respuestas
    1. No sé lo que haces exactamente porque no tienes este código en tu plantilla, pero lo que tienes que hacer es incluir el primer trozo de código de esta entrada dónde se indica. Con eso ya cambiarán las imágenes. Luego ya sustituyes las que lleva ese script por las que tú quieras.

      Eliminar
    2. Fallo técnico, había copiado solo medio código, ya funciona, muchisimas gracias... por todo ;)

      Eliminar
  13. gracias oloman!!! aplicado y funcionando en mi blog

    ResponderEliminar
  14. Excelente truco ;3 como todos los que posteas, gracias ;3

    ResponderEliminar
  15. Hola a ver si puedes echarme una mano.
    Tengo un blog en Wordpress, y como podrás ver en este comentario, cuando dejo comentarios en blogger no consigo mostrar el gravatar que ya tengo dado de alta en wordpress.
    ¿Qué tengo que hacer? Me estoy volviendo loca!!!

    ResponderEliminar
    Respuestas
    1. No sabría decirte. Entre las opciones para comentar en Blogger salen distintos tipos de identificación y el logo ese que sale en tu caso creo que es el de OpenId. Quizás es que no comentas como "WordPress".

      Si es así prueba a actualizar tu avatar también en OpenId.

      Eliminar
  16. Gracias Oloman. Lo he probado todo. En este caso comento como Wordpress.
    ¿Blogger no se entiende con Wordpress?
    Gracias

    ResponderEliminar
    Respuestas
    1. Pues nunca lo he comprobado pero por lo que te pasa a tí, parece que no. De todas formas haz lo que te dije de cambiar tu avatar en OpenId

      Eliminar
  17. Siento darte la brasa, pero al seguir los pasos que explicas en esta entrada me genera un conflicto con un reproductor Html5 que tengo en mi blog. Es decir, el asunto de los avatares funciona perfectamente, pero el reproductor desaparece. Debe de tratarse por los archivos java.

    ResponderEliminar
    Respuestas
    1. Sí, es posible que haya conflicto entre la versión jQuery que utilizas y la que usa este gadget, así que prueba eliminando la primera línea de código que es la que carga precisamente jQuery.

      Eliminar
    2. Venía a decirte que he solucionado el problema eliminando la línea en la que viene la dirección del jquery, y veo que me habías dado esa misma solución. : D
      Gracias de todos modos.

      Eliminar
  18. Hola, Oloman, aquí estamos de nuevo con mas "problemas", por cierto, ya solucione, lo de la implantación de los comentarios anidados en TiS. Ahora mi duda es la siguiente: habría alguna manera de hacer de estos dos script, solo uno.

    Un saludo y gracias de nuevo

    ResponderEliminar
    Respuestas
    1. ¿A qué dos scripts te refieres, Pedro? En esta entrada sólo hay uno y no recuerdo qué era lo otro que necesitaste entre tanta "petición".

      Eliminar
  19. Me refiero, a algo parecido a esto:

    <script>
    $("img[src='http://img1.blogblog.com/img/anon36.png']")
    .attr('src', 'http://1.bp.blogspot.com/-Zphr2YJH_6w/T6ZZE4YeNBI/AAAAAAAACF0/Tyuj8hkOpdc/s1600/default_avatar.gif')
    .ssyby('blank')
    $("img[src='http://img2.blogblog.com/img/b36-rounded.png']")
    .attr('src', 'http://1.bp.blogspot.com/-Zphr2YJH_6w/T6ZZE4YeNBI/AAAAAAAACF0/Tyuj8hkOpdc/s1600/default_avatar.gif')
    .ssyby('blank')
    </script>

    ResponderEliminar
    Respuestas
    1. Ah, claro, perdón. Pues lo cierto es que este post me queda muy lejos y no lo recuerdo con exactitud, pero me suena que cuando los ponía juntos no funcionaban (por algún extraño motivo) y por eso los dejé así. Es cuestión de probar...

      Eliminar
  20. Pues creo, que ya hice las pruebas oportunas y nada de nada, no obstante cuando tenga un rato, seguiré probando. Gracias de nuevo, si consigo algo te lo haré saber.
    Un saludo

    ResponderEliminar
  21. Hola Oloman, lo estoy aplicando pero no me funciona, no presenta ningún tipo de cambio. Copio el código tal cual justito antes de < / body > y nada... por si quieres ver: artysanas-blog.blogspot.com

    ResponderEliminar
    Respuestas
    1. Pero es que tu problema no es que no se cambien, es que no se ven siquiera.

      Eso se debe a tu formato CSS.

      En este selector, añade las dos últimas propiedades que ves, el position y el z-index:
      .comments .avatar-image-container {
      background-color: #FFF;
      border: 1px solid #88B;
      float: right;
      height: 45px;
      line-height: 45px;
      overflow: hidden;
      padding: 1px;
      text-align: center;
      width: 45px;
      position: relative;
      z-index: 1;
      }

      Eliminar
    2. ¿En serio no se ven? Pues yo los veo des de mi ordenador... ¡que raro! Gracias por responderme tan rápido los dos comentarios :) Encontré un tuto en vagabundia de comentarios anidados paso a paso y estoy podiendo modificar bastantes cosas. También miraré tu link del otro comentario. Voy a probar con lo que me dices del avatar a ver si me sale (cruzo los dedos porque llevo todo el día). ¡Mil gracias! Cualquier cosa te comento por aquí.

      Eliminar
    3. Lo acabo de modificar copiando y pegando lo que me dices y sigue sin cambiarse :(

      Eliminar
    4. Raro... ¿Puedes probar con el código que sale ahora en esta entrada? Le he quitado los saltos de línea por si fuera eso.

      Eliminar
    5. Sigue sin funcionar, no sé a qué se deberá :(

      Eliminar
    6. Prueba con este otro código... pero si no funciona, ya no se me ocurre nada más :(
      <script src='http://code.jquery.com/jquery-latest.js'></script>
      <script>//<![CDATA[
      $(document).ready(function() {
      $("img[src='http://img1.blogblog.com/img/anon36.png']").attr('src', 'http://1.bp.blogspot.com/-Zphr2YJH_6w/T6ZZE4YeNBI/AAAAAAAACF0/Tyuj8hkOpdc/s1600/default_avatar.gif').ssyby('blank');
      });
      //]]></script>
      <script>//<![CDATA[
      $(document).ready(function() {
      $("img[src='http://img2.blogblog.com/img/b36-rounded.png']").attr('src', 'http://1.bp.blogspot.com/-eKbzORzVaBQ/T6ZXHmdgHqI/AAAAAAAACFs/rVy3T4gxojM/s1600/blogger-user.png').ssyby('blank');
      });
      //]]></script>

      Eliminar
  22. Oloman:

    La imagen de comentarios la coloque directo en el css y me salió perfecto. Modifiqué su tamaño cambiando en la url "s1600" por "s50". Ahora si te fijas bien, y es un problema que también vi en tu blog, las imágenes de los comentarios anónimos se ven bien mientras que las imagenes de los comentarios de blogger con imagenes no. Supongo que es por agrandar los tamaños, hay forma de que no se vean pixeladas, borrosas?

    ResponderEliminar
  23. Para que las imágenes de los avatares se vean con buena definición, cosa que veo que le sucede a Oloman, yo añadí este código como Widget de HTML desde "Diseño":

    < script type="text/javascript">
    var img = document.getElementsByClassName("avatar-image-container");
    for(i = 0; i < img.length; i++) img[i].childNodes[0].setAttribute("src", img[i].childNodes[0].getAttribute("src").replace(/s\B\d{2,4}/,'s' + '256-c'));


    Eso sí, hace un mes que me desaparecieron las imágenes personalizadas que tenía de avatares anónimos, cuyo código saqué de esta entrada. Sin haber cambiado la plantilla, no aparece nada. Además, el texto con el número de comentarios de cada entrada aparece en la página principal, pero también desaparece una vez se entra en las páginas de entrada (otra cosa que sucedió hace más tiempo de forma misteriosa, sin haber tocado nada).

    Esta es mi dirección, a ver si a cambio de mi truquito me podéis echar una mano: www.cincuentapalabras.com

    ¡Gracias!

    ResponderEliminar
    Respuestas
    1. *En el código hay que juntar la primera "s" y falta el cierre de script, que se lo ha tragado esto al publicar el comentario.

      Eliminar
    2. Gracias por la enorme ayuda!!!

      Es mi turno: para que la imagen del avatar de comentarios anónimos vuelva a figurar debes usar este código en el CSS


      /* Imagen para comentarios anónimos */
      .avatar-image-container img[src$="img1.blogblog.com/img/blank.gif"] {background:url(http://1.bp.blogspot.com/-uwPDxOpO4Fk/VqeotK4IghI/AAAAAAAACpA/a5u-jbYcbGI/s50/avataranonimo.png) #000000 no-repeat 50% 50%;}
      .avatar-image-container img[src$="img1.blogblog.com/img/anon36.png"] {}

      Eliminar
    3. La url del medio es la que debes reemplazar por aquella que quieras usar.

      PD: en relación al texto con el número de comentarios de cada entrada, se lo dejo al genio de Oloman!

      Eliminar
    4. Hola Cristian. Hola Álex. Me alegro de que os entendáis tan bien entre vosotros cuando me "ausento".

      Lo de los comentarios lo he visto y lo que parece, por la diferencia en código entre portada y entradas, es que debes tener alguna condición en el interior de...
      span class="post-comment-link"
      ...que anula su generación, pues su contenido desaparece en las segundas.

      Eliminar
  24. Hola, Oloman. He probado a utilizar este código y he seguido tal cual las instrucciones, pero no sé por qué no se produce cambio alguno. ¿A qué se puede deber esto? ¿Hay alguna alternativa? Muchas gracias por la ayuda :)

    ResponderEliminar
    Respuestas
    1. Ya he podido solucionar el problema añadiendo en su lugar correspondiente de la plantilla:

      .comments .avatar-image-container img{
      background:url(URL DE LA IMAGEN DESEADA) no-repeat scroll 50% 50% !important;

      Eliminar
    2. Ok. Perfecto entonces

      Eliminar
  25. Encontré otro código pero no funciona bien, no sé si podrías analizarlo. Saludos.


    <script>
    //<![CDATA[
    var commentimg = document.querySelectorAll('img[src="https://img2.blogblog.com/img/b36-rounded.png"],img[src="https://img1.blogblog.com/img/anon36.png"]');
    for (i = 0; i < commentimg.length; ++i) {
    commentimg[i].src = "https://3.bp.blogspot.com/-Fxfw358qhMk/VlMckliIgvI/AAAAAAAABe0/Bxg8mlwxK9k/s1600/icon%2B36X36.png";
    }
    //]]>
    </script>

    ResponderEliminar
    Respuestas
    1. No Pepe. Me pillas en un momento en el que no tengo tiempo para nada. Lo siento.

      Eliminar