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.
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', 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMADamGvkTUsL1nDDdyFXdDmVuGh7Re4g1ll9NjQ17SjnfD9zWZpYeHj9V9lxRsbEm2QgI84aYc41PfsTnLIAJ9giTOPDiyXHLdi_O8chwP64WiOHlx3kBO-cvenF6uPlxQNjsU50Fx_c/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', 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEinReDaOM7nuPLTsmUKQJyKClmKCm89KvWzrHlC2zvsj6gvacHPARvC4wl9UMCIWvQreQ7AefHLXmupN8unjmY0_sQ6Bs6DUzkuA1rX5SFKe5wYwYTAqhBqv4cBU3Bjw6EL_atdJWqVk44/s1600/blogger-user.png').ssyby('blank')
</script>
<script>
$("img[src='http://img1.blogblog.com/img/anon36.png']").attr('src', 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMADamGvkTUsL1nDDdyFXdDmVuGh7Re4g1ll9NjQ17SjnfD9zWZpYeHj9V9lxRsbEm2QgI84aYc41PfsTnLIAJ9giTOPDiyXHLdi_O8chwP64WiOHlx3kBO-cvenF6uPlxQNjsU50Fx_c/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', 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEinReDaOM7nuPLTsmUKQJyKClmKCm89KvWzrHlC2zvsj6gvacHPARvC4wl9UMCIWvQreQ7AefHLXmupN8unjmY0_sQ6Bs6DUzkuA1rX5SFKe5wYwYTAqhBqv4cBU3Bjw6EL_atdJWqVk44/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í.
 |
| https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj877n1KOYNxPTBdp8jN5dTQ9JQtUk1j0iG7PLfEE19IlOxFLGLR7OgTPDZrCbuovLQ1FB80jzTh146UyTh006YUWcMNiSWsymbYHHG_p-9wgEYdvS5XapHRYsscCC6Atve3wKU9zaAe9U/s1600/facebook.png |
 |
| https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjhiltubiFvCf0yKYMG9LCexWvjQVPQNRpyB-UVnY446QgmK0uoPdUcV3SFcq3R0T6gV6vpNdjuBmYpwWwzjQDBsnB8dZCSK2jSBdtOBRrwQl1776kts-rjVbr39tTEaZhodqKd3DR_VW4/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.
Y muchos más artículos interesantes si nos sigues en...
Hola Oloman,
ResponderEliminarMuchas 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 ;)
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.
EliminarSobre 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.
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?
ResponderEliminarYa 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~
¿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.
EliminarY sobre el icono del lápiz, aquí tienes cómo restaurar ese y los otros de edición rápida.
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?)
EliminarSobre el lápiz... ¡Bien! Ahora lo pruebo~
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?
EliminarOh, 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¡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):
Eliminar.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!
Me hace mucha gracia cuando me dais las gracias y vosotros solos habéis resuelto el problema, pero encantado de haberte sido de ayuda :)
EliminarSobre el lápiz que comentas, el sistema está explicado en este otro post.
Lo que compartió JFEDP13 me sirvió mucho gracias :D
EliminarA mi también me sirvió lo que compartió JFDP13 en el comentario número 2.5 después de tanto buscar, solucioné lo del avatar anónimo que no se veía completo. Gracias.
EliminarOh, una preguntita más (y perdón por los posts borrados xD):
ResponderEliminar¿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.
No problema. Ya han sido liquidados del todo.
EliminarSobre 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;
}
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.
EliminarLo 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.
EliminarGracias por la entrada, me sirvió mucho.
ResponderEliminarHola 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.
ResponderEliminarGracias
¿Iconos? ¿Te refieres a los avatares?
EliminarSi 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
EliminarPrueba este:
EliminarGadget configurable de últimos comentarios con avatar
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.
EliminarSi miras en mi blog, verás a lo que me refiero http://marianleemaslibros.blogspot.com/
No sé si me he explicado...
Gracias
Vale. Ahora sí, pero la culpa es mía porque leí muy rápido tu comentario :S
EliminarEste 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á.
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?
EliminarBueno, 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.
EliminarMe 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????
ResponderEliminarPues este es el único modo que conozco, pero no debería afectarte.
Eliminar¿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
Gracias!!! No me había dado cuenta que estaba esa línea. Ya está funcionando ok!!!
EliminarHola. Buena entrada. ¿Sabrás cómo hacer para que aparezcan avatares tipo wordpress?, es decir, los avatares de colores brillantes.
ResponderEliminarNo me he fijado cómo son ¿puedes pasar una captura?
EliminarHola, 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?
ResponderEliminarSaludos.
Hola. Aquí tienes una lista de clases para manejar los nuevos comentarios anidados. La tercera es la que te interesa.
EliminarMuchas gracias por la entrada! estaba buscando hace mucho algo así, me ha venido de perlas :)!
ResponderEliminarSaludos
Bocados Divinos
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
ResponderEliminarademas me encantaría que se vieran de forma circular similares a los de aquí :)
Gracias de antemano
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.
EliminarHola 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
ResponderEliminarNo 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!
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
EliminarLo conocía Bettylex, pero gracias por recordarlo y anotarlo aquí para los demás.
EliminarHola 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...
ResponderEliminarNo 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.
EliminarFallo técnico, había copiado solo medio código, ya funciona, muchisimas gracias... por todo ;)
Eliminargracias oloman!!! aplicado y funcionando en mi blog
ResponderEliminarExcelente truco ;3 como todos los que posteas, gracias ;3
ResponderEliminarHola a ver si puedes echarme una mano.
ResponderEliminarTengo 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!!!
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".
EliminarSi es así prueba a actualizar tu avatar también en OpenId.
Gracias Oloman. Lo he probado todo. En este caso comento como Wordpress.
ResponderEliminar¿Blogger no se entiende con Wordpress?
Gracias
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
EliminarSiento 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.
ResponderEliminarSí, 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.
EliminarVení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
EliminarGracias de todos modos.
¿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".
ResponderEliminarAh, 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...
ResponderEliminarHola 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
ResponderEliminarPero es que tu problema no es que no se cambien, es que no se ven siquiera.
EliminarEso 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;
}
¿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í.
EliminarLo acabo de modificar copiando y pegando lo que me dices y sigue sin cambiarse :(
EliminarRaro... ¿Puedes probar con el código que sale ahora en esta entrada? Le he quitado los saltos de línea por si fuera eso.
EliminarSigue sin funcionar, no sé a qué se deberá :(
EliminarPrueba con este otro código... pero si no funciona, ya no se me ocurre nada más :(
Eliminar<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>
Oloman:
ResponderEliminarLa 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?
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":
ResponderEliminar< 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!
*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.
EliminarGracias por la enorme ayuda!!!
EliminarEs 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"] {}
La url del medio es la que debes reemplazar por aquella que quieras usar.
EliminarPD: en relación al texto con el número de comentarios de cada entrada, se lo dejo al genio de Oloman!
Hola Cristian. Hola Álex. Me alegro de que os entendáis tan bien entre vosotros cuando me "ausento".
EliminarLo 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.
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 :)
ResponderEliminarYa he podido solucionar el problema añadiendo en su lugar correspondiente de la plantilla:
Eliminar.comments .avatar-image-container img{
background:url(URL DE LA IMAGEN DESEADA) no-repeat scroll 50% 50% !important;
Ok. Perfecto entonces
EliminarEncontré otro código pero no funciona bien, no sé si podrías analizarlo. Saludos.
ResponderEliminar<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>
No Pepe. Me pillas en un momento en el que no tengo tiempo para nada. Lo siento.
Eliminarhola que pena con ud estoy leyendo todos tus comentarios pero no doy ni una estoy intentando colocar un voki en mi blog pero no puedoooooooo cuando cree el voki sale esta direccion de url http://www.voki.com/site/pickup?scid=14065715&chsm=c47c775bdddbf8c84ddc0c8f7170baba nada que ver cuando la ingreso conmo html en el blog no sale nadaaa solo esa direcion pero el voki no sale por favor tengo que entregar eso mañana y e intentado de todo y no puedo ayuuuuuuuuudddddaaaaaaaa
ResponderEliminarLo siento, pero además de que llegué tarde, no sé qué es eso de un voki.
Eliminar