JMiur [E]

Este script ya no funciona debido a los cambios realizados por Blogger.

Partiendo de un intercambio de ideas con Gem@ respecto de los posibles hacks a utilizar en la sección de comentarios del blog, aquí van dos posibilidades más.

La primera, está funcionando a manera de prueba en Gem@ Blog. Se trata de una modificación de un truco original para las viejas plantillas de Blogger y que permite colocar la imagen del perfil del comentarista siempre y cuando este tenga una cuenta y ese perfil esté habilitado.


ACTUALIZACION URGENTE:

Hace segundos, acabo de ver que Gem@ ha publicado la explicación de la primera de las explicaciones aquí mostradas así que, también pueden visitar su sitio y leer el artículo respectivo. Por lo que he visto, no hay diferencias; aunque utiliza otra versión del script, el resultado será similar.

Para implementarlo, vamos a la Plantilla / Edición HTML y marcamos la casilla Expandir elementos. Alli, debemos encontrar este código y agregar las dos líneas que se indican en negrita:
<dl id='comments-block'>
<b:loop values='data:post.comments' var='comment'>

<dt class='comment-author' expr:id='"comment-" + data:comment.id'>
<div class="commentphoto" style="float: right;"/>

<a expr:name='"comment-" + data:comment.id'/>
<b:if cond='data:comment.authorUrl'>
<a expr:href='data:comment.authorUrl' rel='nofollow'><data:comment.author/></a>
<b:else/>
<data:comment.author/>
</b:if>
<data:commentPostedByMsg/>
</dt>

<dd class='comment-body'>
<b:if cond='data:comment.isDeleted'>
<span class='deleted-comment'><data:comment.body/></span>
<b:else/>
<p><data:comment.body/></p>
</b:if>
</dd>

<dd class='comment-footer'>
<span class='comment-timestamp'>
<a expr:href='"#comment-" + data:comment.id' title='comment permalink'>
<data:comment.timestamp/>
</a>
<b:include data='comment' name='commentDeleteIcon'/>
</span>
</dd>

<div style="clear: both;"/>

</b:loop>
</dl>
Dependiendo de nuestras preferencias, podemos cambiar la alineación de las imágenes, mediante la propiedad correspondiente:

<div class='commentphoto' style='float: right;'/>

alineará la imagen del perfil a la derecha de los comentarios y:

<div class='commentphoto' style='float: left;'/>

a la izquierda.

Ahora, deberemos agregar el script, utilizando el que proveen o descargándolo y subiéndolo a un servidor propio:
<script src='http://yggomelprup.googlepages.com/blogger_comment_photos.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
addLoadEvent(function(){showCommentPhotos('commentphoto','comment-author', 1);});
//]]>
</script>
Aunque el script no necesita ser modificado, hay tres lineas que nos permiten personalizarlo:

La primera línea establece la imagen por defecto que se usará, es decir, la que veremos en el caso que el comentarista no tenga un perfil en Blogger.

Las otras dos, establecen el ancho y el alto máximo de las imágenes a ser mostradas.

BloggerProfiles.noimage = 'http://img139.imageshack.us/img139/1011/defaultavatarad7.png';
BloggerProfiles.imageWidth = 60;
BloggerProfiles.imageHeight = 75;

Es probable que, dependiendo del blog, deberemos ajustar algunas de las propiedades CSS, ya sea utilizando la clase especial de la imagen:

.commentphoto { }

o las clases generales:

.comment-author { }
#comments-block .comment-author { }

¿Dije dos posibilidades? Sí, la otra intenta responder al último comentario de Gem@, "lo ideal y rebuscado es que la foto no sea la del perfil sino otra cualquiera".

Bueno, aquí va una forma bastante sencilla pero que, obviamente, requerirá que nosotros definamos esas imágenes y a quienes corresponderá cada una de ellas. Todo esto, lo hacemos mediante JavaScript así que primero que nada, justo antes de </head>, agregamos lo siguiente:
<script type='text/javascript'>

// lista de comentaristas
var nComentarista = new Array();
nComentarista[0] = "anonimo";
nComentarista[1] = "nombre1";
nComentarista[2] = "nombre2";

// lista de imágenes
var nAvatar = new Array();
nAvatar[0] = new Image(16,16); nAvatar[0].src = "URL_imagen0";
nAvatar[1] = new Image(16,16); nAvatar[1].src = "URL_imagen1";
nAvatar[2] = new Image(16,16); nAvatar[2].src = "URL_imagen2";

function mostrarAVATAR(cual,quien) {
for( i=0; i&lt;nComentarista.length; i++ ) {
if(nComentarista[i] == quien) {
document.getElementById(cual).style.backgroundImage='url('+nAvatar[i].src+')';
return;
}
}
document.getElementById(cual).style.backgroundImage='url('+nAvatar[0].src+')';

}
</script>

Donde la lista de comentaristas contendrá los el nombre del autor que queremos identificar tal como aparece en Blogger (por ejemplo JMiur o Gem@). Cada uno, tendrá un número consecutivo (nComentarista[numero]) y reservaremos el número cero (nComentarista[0]) para la imagen por defecto, es decir, aquella que se mostrará cuando el comentarista no posea una imagen definida por nosotros.

La lista de imágenes está asociada con la anterior, contendrá dos partes, la primera establece el ancho y el alto de la imagen (en este ejemplo 16x16) pero puede ser cualqueir otro valor e incluso, valores diferentes entre si:

nAvatar[numero] = new Image(ancho,alto);

La segunda parte es la que contiene la dirección URL de cada una de las imágenes.

nAvatar[numero].src = "URL_imagen)";

Ahora, agregaremos alguna propiedad CSS en la clase comment-author o la crearemos si es que no existe:
<style type='text/css'>
#comments-block .comment-author {
.......
background: transparent url() no-repeat scroll 0% 50%;
padding: 10px 0 0 24px;
}
</style>
Aquí también habrá que personalizar esas propiedades para que se ajusten a nuestro blog.

Por último, buscaremos este código en la plantilla:

<dt class='comment-author' expr:id='"comment-" + data:comment.id'>

y, simplemente, agregaremos una llamada a la función del script para que esta coloque la imagen correspondiente:
<script>
mostrarAVATAR('comment-'+'<data:comment.id/>' ,'<data:comment.author/>')
</script>


<b:if cond='data:comment.authorUrl'>
<a expr:href='data:comment.authorUrl' rel='nofollow'><data:comment.author/></a>
<b:else/>
<data:comment.author/>
</b:if>

42 comentarios:

Gem@  

Buen trabajo J.Miur :)
Por lo que he entendido siguiendo estos pasos conseguimos agregar tres imágenes distintas, para autor, anónimos y comentaristas con el perfil disponible.
Sin embargo yo sigo queriendo rizar el rizo, y es añadiendo una imagen diferente a la que por defecto aparece en el perfil del autor del blog.
Otra que aparecerá por defecto en los comentarios anónimos y en la de los visitantes con el perfil disponible mostrará la propia imagen de cada uno.
He conseguido añadir una nueva imagen al autor del blog respetando la que los visitantes tienen en el perfil.
El problema es que me sigue mostrando la de mi perfil, o sea las dos.
Si consigo hacer que desaparezca ya te aviso, si tienes alguna idea de como hacerlo me avisas tu por favor ;)

Responder
Fdo. R. Baños  

Hola. Leyendo tu post sobre los comentarios en blogger, recordé que el otro día visite un blog con un detalle que llamó mi atención: resulta que en este blog para ver o escribir un comentario, uno hace clic en "comentarios" y se abre una ventanita emergente (en la parte superior izquierda de la pantalla)y desde ahí, sin abandonar la página del post que se está leyendo o sin tener que desplazarse hacia abajo, uno puede lee o escribe su comentario. Esto se me hizo muy práctico, pero... ¿Cómo se hace? ¿Podrías ayudarme para que yo pudiera implementarlo también en mi blog? La dirección de dicho blog es esta: http://bizzbirije.blogspot.com/
DE ANTEMANO TE AGRADEZCO TU AYUDA. ¡SALUDOS CORDIALES!

Responder
JMiur  

Fdo. R. Baños:
Eso es parte de las opciones del mismo Blogger así que es muy sencillo de hacer. Vas a CONFIGURACION y allí, en la solapa COMENTARIOS, buscas:
¿Mostrar comentarios en una ventana emergente?
y marcas SI. Luego, guardas para aplicar los cambios.

Gem@:
Me parece que estamos hablando de lo mismo, poner imágenes personales a los comentaristas.

Con la segunda posibilidad, podemos agregar cualquier cantidad de imágenes, una para cada comentarista, sea o no sea un usuario de Blogger; es como una tabla, a la persona 1 le corresponde la imagen 1, etc. Hay tantas imágenes como personas decidamos poner.

Para eso, debemos tener una lista de personas y una lista de imágenes. Ambas cosas, las debemos hacer manualmente y el código se encarga de manejarlas, buscar en esa lista y poner la imagen correspondiente.

Responder
Gem@  

Me he dado cuenta J.Miur, y perdona si no he sabido expresarme para hacerte llegar mi idea...
Tratar de añadir una imagen que corresponda con la url de cada visitante es una tarea harto complicada, imagina un blog con más de 20 ó 30 comentarios diarios y nunca son los mismos comentaristas.
Sin añadir la segunda opción conseguimos que el avatar de los comentaristas aparezca por sí solo, si el visitante cambia de avatar automáticamente se mostrará el nuevo.
Es por eso que me gusta la idea, pero también me gusta la tuya porque podemos añadir un avatar diferente al perfil al autor del blog.
Por eso es que te pregunto... partiendo de que he añadido la imagen en los comentarios con el hack de Purple Moggy ¿dónde o qué parte tengo que eliminar para suprimir el avatar de mi perfil?

Responder
JMiur  

Está absolutamente claro y concuerdo contigo, es más empecé a hacerlo y renuncié :D

Sobre tu pregunta, tengo dudas, imagino que puede hacerse pero, como está usando una función que recién coloca las imágenes cuando termina de cargarse la página la respuesta no es sencilla.

Voy a hacer pruebas y te cuento a ver si hay alguna posibilidad.

Responder
JMiur  

Creo que tengo una posible solución, te la enviaré por mail :)

Responder
Fdo. R. Baños  

¡Muchas Gracias!

Responder
Gem@  

Mail recibido.
Yo también te he mandado otro.
Gracias ;)

Responder
ChT  

¿Y entre mail y mail nosotros no nos enteramos de nada? ¿O tenéis pensado actualizar?

Saludos.

Responder
JMiur  

Si tuviera respuestas, seguro que lo haría pero, por ahora, sólo podría hablar de fracasos reiterados :$

Responder
Gem@  

No creo que sea un fracaso, más bien pienso que el objetivo era demasiado avaricioso, no he visto nada sobre el tema ¿te das cuenta? ni a Purple Moggy se le ha ocurrido.
Por mi parte lo dejaré aparcado que no olvidado ;)

Responder
JMiur  

Me da la impresión que hasta tanto Blogger no se decida a hacer públicos sus códigos, hacer algunas cosas, por más simple que parezcan, será una tarea casi imposible :D

Responder
Percy Salazar  

Listo. Gracias Jmiur.

Responder
JMiur  

Me alegro :)

Responder
Matias  

Hola Jmiur, viendo todo un poco me encontre ayer con el post de Rosa en su blog "El escaparate" el cual trata sobre los comentarios expandibles de peekaboo...

El script y las modificaciones que propone funcionan perfectamente, salvo que cuando los comentarios se despliegan, se visualizan en una forma totalmente diferente a la que vemos cuando expandimos el post completo.

En fin si te das una pasada por su blog me vas a entender mejor. La cuestion seria creo modificar el SCRIPT para forzar a conservar las mismas caracterisiticas visuales que vemos al expandir el post completamente... Si tenes alguna idea de como hacerlo te estaria recontra agradecidoo!! ;)

Responder
JMiur  

Lo había visto, Matias, no lo probé porque los problemas recientes de Blogger me han tenido demasiado ocupado pero, lo que no logré es encontrar algún lugar donde pueda verse funcionando ¿conoces alguno? Es que, en realidad, no me he dado una idea de cuál es el el efecto real.

Ah, ¿no habla Rosa de algo de eso? Me parece recordar que mencionaba algo respecto a las diferencias.

Responder
Matias  

mmm la verdad no vi esa aclaracion de Rosa en verdad... es mas es algo que estube hablando con ella... Te dejo su blog de prueba

http://plantillasoloparapruebas.blogspot.com

Fijate tocar "Comentarios" en lo que seria el foot del post, y vas a ver como se despliegan... despues toca el titulo del post y fijate como se ven los comentarios..... Yo lo que tenia en mente era modificar el script para forzar a mantener una misma estetica... :P

Responder
JMiur  

Matias:

Ahora veo de que se trata.

En principio, para lo que quieres hacer no sería necesario modificar el script sino establecer las propiedades CSS adecuadas para el nuevo elemento, el que se ve en la página principal ya que, tal como dice Rosa, algunas propiedades son las mismas pero, por lo que veo, no todas.

Ahora bien, eso dependerá de cada plantilla. Si tienes el truco integrado a tu blog, podría verlo online y darte alguna idea de cuales son las propiedades que deberían agregarse. No es algo complejo de hacer aunque puede requerir pruebas hasta dar con las correctas.

Responder
Matias  

Hola Jmiur, gracias por tomarte la molestia...

Mira, en verdad tengo agregado el truco en un blog de pruebas (plantilla minima). Mmm solamente hice una variacion en el codigo, que fue poner lo que ella explica como "PASO 4", en la parte de los Backlinks....

Si me das masomenos una idea de como cambiar un poco lo que seria el fondo, y la ubicacion de los textos, aunque sea como haciendo de cuenta que pusieras el hack en tu plantilla, me serviria igual, ya que entenderia donde poner las propiedades css.

Bueno desde ya mil gracias!!!!

Responder
JMiur  

Matias:

Vamos a intentarlo.

En una plantilla estandard, las propiedades de la parte de comentarios que se ve en las páginas individuales tienen estas definiciones:

#comments h4
#comments-block
#comments-block .comment-author
#comments-block .comment-body
#comments-block .comment-footer
#comments-block .comment-body p

Pero, en la principal, el truco no usa esos nombres sino otros:

#comments-block .comment-author
se llama: .comment-poster
#comments-block .comment-body
se llama: .comment-body
#comments-block .comment-footer
se llama: .comment-timestamp

así que, habría que definir esas clases con las mismas propiedades que las otras.

Por ejemplo, .comment-body es el contenido de los comentarios, lo que escriben los visitantes. En la página individual, está DENTRO de otro DIV llamado #comments-block pero en la principal, ese DIV no existe así que debería agregarse la altermativa, si ahora dice:

#comments-block .comment-body {
...............
}

Por ejemplo, habría que poner:

#comments-block .comment-body, .comment-body {
...............
}

o simplemente:

.comment-body {
...............
}

o
#comments-block .comment-body, .commentelem .comment-body {
...............
}

Porque todo esta dentro de un DIV que tien por clase .commentelem o alguna otra combinación, eso es lo difícil de probar sin ver el blog online.

Responder
Tatoon  

Hola, JMiur
Antes de nada, muchísimas gracias por todos los trucos que muestras en Vagabundia. Me han sido muy útiles. ;)

Ahora viene mi duda. Este truco para Blogger, de mostrar las fotos en los comentarios ¿es compatible con el nuevo "sistema" de formulario de comentarios incrustado?

Responder
JMiur  

Sí, Tatoon, es compatible porque son independientes.

Responder
Tatoon  

Muchas gracias, ya está solucionado. ;)

Responder
LiLi mint  

JMiur:
Creo que es la primera vez que comento por aquí, así que revelo a otra seguidora de tu blog! Leyendo esto de los comentarios me acordé que en algún otro blog veía el nombre del autor que resaltaba de entre los demás comentarios porque en lugar de tener así solamente su nombre venía una imagen con el mismo. Me explico..
El nombre venía escrito en una imagen y es lo que se mostraba.. por cierto que su nombre venía de lado contrario a los demás nombres. No se si me expliqué o he confundido más esto.

Si es posible podrías ayudarme con eso? trataré de buscar ese blog para hacer la idea más clara.

Gracias y de nuevo, Que bueno esta tu blog!

Responder
JMiur  

Saludos, LiLi mint :)

En términos generales, eso puede hacerse. Hay una idea de eso en ESTE POST.

Allí, sólo se habla de una imagen pero, podría ser cualquier otro cosa aunque los detalles dependerán mucho de lo quieras hacer y de la plantilla que estés usando.

Lamentablemente, no tengo un ejemplo para mostrarte pero cualquier cosa, me envias un mail.

Responder
LiLi mint  

Claro! que no se en que momento se me pasó ese post! ya está todo claro, muchísimas gracias! en breve estaré metiendo mano en la plantilla, a ver que tal va.

Gracias de nuevo, y ya estaré poniendo más atención.

Grandes saludos!!

Responder
JMiur  

Me alegro que sirviera, Lili :)

Responder
Tejer Bien  

"Ahora, deberemos agregar el script" y ahí me perdí... perdón soy medio queso con el html.

puse las dos primeras líneas en negrita dentro del código de mi plantilla. Pero mi imágen de perfil no sale en mis comentarios, pensé que solo se agregaba el script si quería personalizar las imágenes de los visitantes. Yo solo quiero mi imagen en mis comentarios.

Responder
JMiur  

Si es para eso, este script no tendrá sentido ya que lo que hace es mostrar la imagen de TODOS los comentaristas.

Responder
Tejer Bien  

como descargo el script? ya mas o menos entendí todo, lo único que no se esto de descargar el script y subirlo. (perdón por lo pesada).

Responder
JMiur  

El scrip del que habla el truco de Gem@ y comentado aquí es este:
http://yggomelprup.googlepages.com/blogger_comment_photos.js

Click allí o botón derecho y guardar enlace.

Responder
Tejer Bien  

ah! buenísimo, gracias por la paciencia.

Responder
ErYc  

Hola .. Taba Tratando De Hacer Los Pasos .. Hasta q dice "Ahora agregamos el Script" .. y donde lo ponemos??

Perdon pero no tengo la mas remota idea de donde meterlo .. agradeceria la respuesta!

PD: Muy Groso Tu Blog

Responder
JMiur  

Depende del script a lque te refieras. Me da la impresión que el que dices es el que se coloca inmediatamente debajo del otro código.

Responder
Anónimo  

Donde debo colora estas 3 lineas?

BloggerProfiles.noimage = 'http://img139.imageshack.us/img139/1011/defaultavatarad7.png';
BloggerProfiles.imageWidth = 60;
BloggerProfiles.imageHeight = 75;

Quiero cambiar la imagen en el caso que el comentarista no tenga un perfil.

Responder
JMiur  

Antes de </head>, entre etiquetas script:

<script>
AQUI LO COLOCAS
</script>

Responder
Viperhoot  

Genial!!! trataré de implementarlo en mi blog, si hay dudas por aqui regreso ;)

Responder
Sérgio Estrella  

Aparently this hack doesn't work anymore...

Responder
Tigremen  

No me funciona JMiur, en algo me estoy equivocando seguro estoy de eso.
Yo tengo las imagenes asi como tu, una imagen para mi, otra para anonimos y por ultimo una para los que tienen cuenta.
Agregue el Script antes de /head
Coloque el style

y busque la parte dt class.... en mi caso me aparece dt expr:class='..... y coloque el codigo para llamar el script.
Al final no me sale la imagen que le quiero asignar a un usuario que esta registrado.

Por donde estara mi error?

Gracias como siempre man.

Responder
JMiur  

Pués es algo que online no puede verse.

Responder
ΜigueŁ jίмenez™  

creo que el script ha sido borrado de la pagina, será posible colocarlo de otra forma?

Responder
JMiur  

Este modelo de script esá desactualizado y ha dejado de funcionar, aparentemente, debido al cambio en la forma de acceder a los perfiles.

Responder
 
CERRAR