Lo que nos enseña MamaNunes en su última entrada, es la forma de agregar un enlace para "Responder comentarios".
Es muy simple de implementar y al aplicarlo, dispondremos de ese enlace en cada comentario realizado. Al hacer click, se abrirá el formulario de comentarios en una ventana pop-up y, de manera automática, el formulario ya tendrá incluido un enlace al comentario original y el nombre del comentarista; algo similar a lo que se muestra en Twitter; veremos entonces, que ya está escrito algo así:
Es muy simple de implementar y al aplicarlo, dispondremos de ese enlace en cada comentario realizado. Al hacer click, se abrirá el formulario de comentarios en una ventana pop-up y, de manera automática, el formulario ya tendrá incluido un enlace al comentario original y el nombre del comentarista; algo similar a lo que se muestra en Twitter; veremos entonces, que ya está escrito algo así:
Para que esto funcione, debemos colocar lo siguiente:
<span class='comment-reply'> <a expr:href='"https://www.blogger.com/comment.g?blogID=NUESTRO_ID&postID=" + data:post.id + "&isPopup=true&postBody=%40%3C%61%20%68%72%65%66%3D%22%23" + data:comment.anchorName + "%22%3E" + data:comment.author + "%3C%2F%61%3E#form"' onclick='javascript:window.open(this.href, "bloggerPopup", "toolbar=0,location=0,statusbar=1,menubar=0,scrollbars=yes,width=400,height=450"); return false;'>[Reply to comment]</a> </span>
Allí, deberíamos colocar NUESTRO_ID que podemos ver en la misma ventana de la plantilla y que es un número (más información).
El otro dato que podemos modificar es el texto a mostrar que en el ejemplo es [Reply to comment] pero puede ser cualquier otro o incluso una imagen.
El tema es ¿dónde ponemos eso? y ahí hay muchas alternativas que dependerán de la plantilla. Por ejemplo, podría ponerse al lado del nombre del comentarista:
El otro dato que podemos modificar es el texto a mostrar que en el ejemplo es [Reply to comment] pero puede ser cualquier otro o incluso una imagen.
El tema es ¿dónde ponemos eso? y ahí hay muchas alternativas que dependerán de la plantilla. Por ejemplo, podría ponerse al lado del nombre del comentarista:
<data:comment.author/>
o en el footer de cada comentario:
<dd class='comment-footer'> PUEDE AGREGARSE ACÁ <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> PUEDE AGREGARSE ACÁ </dd>
Es verdad que el código parece extrañísimo pero, no lo es tanto, simplemente envia ese texto extra en la URL que abre la ventana de comentarios y lo hace codificándolo (encode y decode) de tal manera que:
%40%3C%61%20%68%72%65%66%3D%22%23 es el equivalente de @<a href="# data:comment.anchorName es la URL del comentario a responder %22%3E es el equivalente de "> data:comment.authores el nombre del comentarista a quien se responde y %3C%2F%61%3E es el equivalente de </a>
Como detalle adicional, el SPAN donde está el enlace tiene una clase CSS así que es posible agregarla a nuestros estilos y darle propiedades:
.comment-reply {}
.comment-reply a {}
.comment-reply a:hover {}En el blog de MamaNunes puede verse el resultado comcreto 
83 comentarios:
Me encantó, lo pruebo de las dos maneras, veremos qué sale de mi tarea.
Que tengas un día bonito :)
Esos mismos parámetros sirven también para Lytebox o serían distintos??
Ahh maestro! ahora quedo complecto :)
Traté de implementar en mi blog el "LightWindow", pero Blogger envía este mensaje de error.
Mensagem de erro em XML: Open quote is expected for attribute "{1}" associated with an element type "class".
¿Qué debo hacer? :$
Graciela: Es sencillo de agregar, no vas a tener inconvenientes.
Gem@: Habrá que probar; me parece que, en ese script, lo que habría que cambair es la variable que crea el enlace final, podría ser algo así:
var enlacePopup = "<a rel=\"lyteframe\" href=\"" + nuevoEnlace + "\" rev=\"width:480px;height:600px;scrolling:no;\" ">TEXTO ENLACE</a>";
MamaNunes: Sí, acabo de mirar y veo que en la transcripción saloió un error. Ya está corregido. Fíjate que en el enlace del script, hay unos < y > que deberían ser < y > . Esta vez, espero haberlos escrito bien :D
@JMiur Probando probando :)
@Graciela Probando probando 1 2 3 4 ¡ME OYE!!! :D
Sí, parece funcionar :D
Whoaaa me fascina esto del Reply
una duda como hacer ese tipo de ventanas popup
@Graciela Se oye muy bien :D
@JMiur
Funciona bien, lo he puesto en mi blog pero he puesto una imagen en lugar de el texto y ha quedado de maravilla, gracias JMiur.
PDT: ya tenia tiempo que no usaba ningún tipo que habias puesto pero con este si te volaste la barda ademas que incita a que los lectores comenten mas.
@JMiur
Probando para no ser menos... :) Pero la ventana que se abrió primero se expandió a página completa :O
Es así como funciona?
@JMiur
Mmm... que raro, ahora no se agrandó, pero la primera vez hasta me sacó del blog :o
@Gem@ hasta sale mi voz guau
@JMiur
Curioso. Hice el intento con el comment-iframe pero no resuló. de cualquier manera ya lo puse en mi blog. Saludos!
Yo siempre pidiendo mucho :D Sería bueno que el reply sea inmediato, osea, no en lightwindow, sino en el mismo formulario incrustado. Pruebo y te digo... a ver que me sale.
bueno eres sequisimo , soy nuevo en esto como consijo que la gente visite mi blog??
Alex: USando LightWindow como dice el post.
k_nelita: Eso te pudo ocurrir si por cualquier motivo, no se cargó el script.
egoloco: No creo que sea posible modificar el IFRAME y por eso no se actualiza.
roke: con tiempo, con paciencia, con suerte, con contenido ...
Lo implemente y me parece un buen aditamento. Pero cuando uno responde no deberia salir nuevamente el - responder - sino esperar que la persona replique o haya un nuevo commentario
Esos son detalles casi imposibles, deberían quedar los datos guardados en alguna parte, poder ser leido y verificados, etc, etc.
@JMiur probaré como dices cuando esté en mi computadora :)
@Gem@ Si no es ese por ahí anda. Prueba y cualquier cosa me avisas; es medio complicado porque las comillas son difíciles de armar pero, todo es cuestión de ir probando :)
Muchas gracias, lo implemente en mi blog y funciona perfecto! :D
Le puse el lightwindow y no me sale, me sale en una ventana aparte =/ que es lo que me faltara?
Ya me quedo (: quedo bastante bien, Gracias =D
Que buena idea, es muy útil, ya lo he aplicado.
El tema lightwindow esta excelente le dá un toque estilístico a una opción fácil de utilizar.
Ahora, yo uso Lytebox, como preguntó Gem@, y le has respondido a lo que no he entendido de como aplicar,
¿ Me puedes ayudar ?
Un saludo,
Usando Lytebox, tienes que seguir el mismo procedimiento que para Lightwindow y luego probar ese cambio sugerido; cambiar la línea de la variable:
var enlacePopup
por la que ves en el comentario. No lo he probado.
Hola Jmiur ¿Se Puede Usar Una Imagen en Vez de "[Reply to comment]"?
Espero Pacientemente tu Respuesta;)
Jejeje ya no Importa, Ya lo Resolvi, Igualmente Gracias;):D
No sé si esto puede interesarle a alguien más, pero por las dudas lo comparto.
Hasta que uno se da cuenta de cómo funciona la cosa, puede no ser muy intuitiva la imagen de la arroba seguida del nombre de usuario que enlaza al comentario que se está respondiendo. Incluso podría confundir a alguno (servidor) ese nombre debajo del nombre del autor que responde, sin más excepto por la arroba. Por supuesto, cada comentarista podría sustituirla por el texto que desee, incluyendo ninguno (en este caso, quedaría el nombre del comentarista comentado, pero con un link a lo que dijo, a modo de encabezado: Fulano: Creo que bla bla bla...). Aunque el que comenta también podría reemplazar un texto que nosotros predeterminemos, puede ser útil siquiera sugerir uno descriptivo, que automáticamente se genere en el editor como ahora la arroba. Yo elegí que diga: "En referencia al comentario de Fulano:", siempre con "Fulano" enlazando a su comentario.
Para hacerlo, basta reemplazar en el código a pegar el ASCII hexadecimal 40, que es la arroba, por lo que deseemos, y/o poner después del ASCII hexadecimal 3E -que es el signo mayor que, que cierra el tag- un signo de puntuación, si gustamos (en mi caso, los dos puntos).
En mi plantilla, por ejemplo, esa parte del código quedó así:
...postID=" + data:post.id + "&isPopup=true&postBody=En referencia al comentario de %3C%61%20%68%72%65%66%3D%22%23" + data:comment.anchorName + "%22%3E" + data:comment.author + "%3C%2F%61%3E:#form"' onclick='javascript:window.open(this.href, "bloggerPopup", "toolbar=0,location=0,statusbar=1,menubar=0,scrollbars=yes,...
Saludos.
hola, tengo un problemilla muy gordo, nose si me sucede a mi o tambien a otros, si te das cuenta en mi web al momento de querer agregar un comentario el formulario me aparece bien pero cuando esta terminando de cargar la pagina le da como un flash a toda la web y el formulario del comentario desaparece, tengo que darle un F5 para que vuelva a cargar y aparesca, esto me sucede con Mozilla Firefox y IE tambien creo, sabes a que se debe este poblema? tngo un script que esta cargando antes o que solucion le puedo dar? muchas gracias
Puede ser cualquier cosa, probablemente, algún widget que intefiera o un script; no es algo que pueda verse online. Deberías probar en un blog auxiliar e ir agregándolos de a uno hasta dar con el que provoca el problema.
No me funciona, lo intento aplicar en el footer de comentario, en el blog de pruebas (http://etbpruebas.blogspot.com/)
En mi plantilla no aparece la linea de codigo:
<dd class='comment-footer'>
La mas cercana es:
<dd class='comment-footer collapseable'>
Pero lo pego debajo de esa y no aparece. ¿Donde debo pegarlo?
En el código fuente de tu blog principal se ve la etiqueta y en el de pruebas, como no usas el esquema clásico de las plantilals de Blogger, el footer de cada comentario está en esta otra:
<p class='comment-meta'>
como hago para incluir el texto que al pasar el cursor diga "responder a este comentario y como agrego una imagen en su lugar??
saludos
El texto ese se agrega en el qtributo title del enlace:
<a title='el texto' .....
La imagenm reemplazando el texto [Reply to comment] por una etiqueta de imagen:
<img src='uRL_imagen' />
muchas gracias por tu respuesta!
saludos
C.M
Muy bueno lo estaba por incluir pero penseeee.... Y no podria directamente citar los comentarios como lo hace esta pagina: http://www.taringa.net/
Como podria lograrlo??
Saludos!!!
No sé a qué cosa te refieres.
@JMiur ¿Dónde puedo sustituir la @ por algo distinta?
Imagino que si:
%40%3C%61%20%68%72%65%66%3D%22%23
es el equivalente de @<a href="#
lo que debería cambiarse es %40 por el código hexadecimal equivalente del carácter a utilizar ¿Será así? No lo he probado pero parecería razonable.
La idea era añadir una imagen sustituyendo el hexadecimal :S
Ahora entiendo. Eso seria posible pero no es fácil, habrái que buscar la forma de crear un script que cambaira la arroba (o el carácter que se elija) por una imagen; algo similar a eso que alguna vez usamos cuando se cambiaba un nombre por un logo ... es para pensar.
Vale, pues pensamos otro día y en otro momento jajajaja de lo contrario el trabajo se amontona.
No tiene la mayor importancia era por probar :)
Lo pondré en la lista de pendientes :-D
Pues realmente Magnifico me gusto mucho esta idea! :)
pues igual me gustaria agregarle dos puntos (:) despues del autor
osea algo asi..
@Ejemplo:
sera posible? :S
Saludos! muchas gracias
Usando %3A para codificar los dos puntos. Si al final dice:
%3C%2F%61%3E que es el equivalente de </a>
debería decir:
%3A%3C%2F%61%3E que es el equivalente de :</a>
excelente! ^^ Muchas Gracias
Es perfecto y genialmente explicado. Muchas gracias!
Pero tengo una duda, lo he aplicado en mi web, con imagen y eso, y al darle a responder en vez de abrirme una ventana de pop-up para contestar me redirige a esa ventana para contestar. Cosa que es una faena xq luego hay q volver atrás y demás. ¿Como puedo hacer que me salga en popup? o ¿porque no me funciona? No se si m he explicado bien...
Bueno muchas gracias por tu atención y por tener una web tan genial!;)
Si tienes habilitada la opción de Blogger de abrir comentarios en un pop-up se abrirá de ese mod. Si no la tienes (que es mi caso), se requiere utilizar alguna clase de script adicional que cree ventanas modales.
Eso es l oque dice el post cuando habla del ejemplo aplicado acá utilizando LightWindow aunque puede usarse cualquier otro script que haga esas cosas.
JMiur No entendi la ultima parte, donde debo pegar el codigo para personalizar el estilo, no me sale y el nombre de los comentaristas casi no se lee porque sale del mismo color de fondo :S help
El estilo lo debes poner con el resto del CSS, por ejemplo, justo antes de </b:skin> y allí colocas los colores o cualquier otro detalle. Por ejemplo:
.comment-reply {}
.comment-reply a { color: red !important; }
.comment-reply a:hover { color: green !important; }
JMiur Pues no, no funciona, a ver, en esta pàgina, la tuya, cuando usamos el reply el nombre del comentarista aparece en un tono azulado, como el fon es oscuro se lee perfecto, en mi caso el fondo de mis comentarios es celeste a diferencia de los comentarios de los demàs que es normalmente blanco, al ser celeste el fondo cuando uso el reply no se lee el nombre del comentarista porque aparece en el mismo color, este truco no funciona, ya probè varias veces y no ha caso, no impacta, alguna idea de que estoy haciendo mal? tu has podido cambiarlo?
Perfecto. Eso ya es lo mismo. No se trata de cómo personalizar el botón sino eso que se verá luego cuando se publique el comentario.
Por defecto, el color de los enlaces es el mismo en ambos casos y en tu blog no está contemplada una diferencia entre lso comentarios de los visitantes que están sobre un fondo blanco y los tuyos que están sobre un fondo celeste.
Seguramente, como hasta ahora nunca habçias agregado un enlace en un comentario, ´no lo habías notado pero, es fácil de solucionar, simplemente le agregamos la regal de estilo corresponediente:
.blog-author-comment a { .... y aqui colocas el color ..... }
JMiur Pues ahora lo que modifique con el còdigo que me has pasado es el color con el escribo mis comentarios, pero el nombre del comentarista al que respondo sigue igual, celeste...
Vale , me he equivocado y te he puesto mi duda en el post de floatbox :S
Mi pregunta era si es posible hacerlo con floatbox, y si es asi, cómo??
Muchas gracias! (y lo sent por el otro comentario...)
Marflo:
Creo que te has olvidado colocar un punto y coma luego del color y por eso no se ve blanco. Dice color:#FFFFFF y debería decir:
color:#FFFFFF;
Bro:
Pués lo he contestado allá pero lo repito. Imagino ue podría usarse pero no es un script que haya utilizado.
Gracias!!!
Vou colocar amanhã no meu blog, hoje estou com sono...já é muito tarde hehehe (apesar de estar super bem explicado o seu tutorial)
Mais uma vez,obrigado!
Suerte, Gizaa Veiga :D
@JMiur
Obrigado!
Mas...hehehe
No meu blog está abrindo em outra página...porém,vou continuar tentando...
bjão
Wooowww!!!
Consegui!!!! :)
Fui seguindo todos os seus posts até chegar onde vc postou os .js do lightWindow...hehehe
Super obrigado! Vou criar um post falando sobre o Vagabundia!
bjão
Me alegra que todo saliera bien :D
me gusttaria eliminar es un borde que sale en la imagen en buscado en el codigo y no veo nada que diga borde, pero a lo que parece ese borde tiene que ver con el link que lleva el nombre del usuario que responde los msj, puedes ayudarme con ese borde..este es el blog http://prueba2056.blogspot.com/
No veo dónde está eso pero, en todo caso, si es un enlace con una imagen y se ve un borde (que es lo que ocurrirá siempre por defecto), puede eliminarse agregando esta regla de estilo:
a img {border:none;}
Prover el codigo a img {border:none;} colocandolo en algunos sitio que creia que pertenicia el borde y nada mira la entrada donde puedes ver, el borde lo tiene la imagen que dice responder..http://prueba2056.blogspot.com/2008/12/ricky-martin-empezar-grabar-nuevo-disco.html#comments
En tu plantilla está definida esta regla:
a img {
margin:5px;
padding:0;
}
y es allí donde debes colocar la propiedad:
a img {
border:none;
margin:5px;
padding:0;
}
gracias ya el problema esta resuelto, lo que me confunde es que creia que eso debia estar en la seccion de comentarios..
Por lo general es bueno que ninguna imagen que sea un enlace tenga un borde y si uno quiere agregarlo, lo hace de manera específica; caso contrario, hay que irlos eliminado uno por uno; por eso, suele ponerse border="0".
Tener una regla general, evita eso.
Pero, si sólo quieres que sea esa imagen, basta limitar la regla eliminado lo anterior y poniendo esto:
.comment-reply a img {border:none;}
En cuyo caso, todas las imagenes tendran borde menos esas y aquellas que indiques manualmente.
No entiendo. Por más que pruebo, miro, toco, vuelvo a probar, no consigo que aparezca. Parece como si hubiera algo que interfiriera, pero no sé lo que és:(( Además parece fácil! Agradeceria tu ayuda Jmiur.
Gracias de antemano.
Saludos!
Debería ver si tienes un ejemplo aplicado en alguna parte para intentar responderte.
Gracias JMiur me vino de maravilla le da un toque muy especial a mi blog!
Saludos
Intente ponerlos, pero cuando se habre la ventana pop up, me da error 404 u_u.. donde dice se pùede colocar aqui dos veces ¿hay qye colocarla dos veces? porque eso lo intente.
El error se produce porque la sintaxis es errónea o bien el ID que colcoas es incorecto. Habría que verlo para darte una respuesta.
Funsiona! ahora solo me hace falta saber como ponerle una imagen xD.
@JMiur
Hola!!!! Lo he puesto en mi blog y me encanta ^^!! así es mas rápido responder a todo el mundo ;) Gracias!!!!
Tengo una duda... habría alguna manera de poder responder a varias personas a la vez en el mismo comentario por no tener que hacer un comentario por cada respuesta??
Un saludo
La verdad, no sabría decirte con exactitud pero, lo veo bastante complicado de hacer.
Hola tio , porque no me sale al aplicarlo con LightWindow, esto lo tengo para abrir galerias de imágenes y me funciona muy bien pero cuand oagrego este codigo con mi ID y todo como lo indicas no sale de momento e puesto el otro pero no me gusta mucho y como tengo agregado LightWindow quiero poner el repley con ese efecto ayudame por favor te dejo el enlace de mi blog saludo.
http://carlangas24game.blogspot.com/
No sabría decirte cuñal puede ser el error porque no sé qué código has colocado. Probablemente, simplemente sea un error de sintaxis pero, es imposible saberlo sin ver.
JMiur entonces te mando mi plantilla para que lo veas por email ? confirmamelo por favor gracias.
carlangas24game@hotmail.com
Sólo es preciso ver el código de esa parte.
JMiur ERROR MÍO , revisando bien e tenido un grabe error lo que yo tengo agregado es lightbox y no LightWindow e revisado los mensajes y @gema propone hacerlo con lightbox entonces pregunto como cambio eso para ponerlo , me ayudas por favor ? me dices el codigo ?
PD: Te mande un correo antes de darme cuenta a tu gmail lo siento espero respuesta gracias.
Si se trata de lightbox, no es posible hacerlo ya que es un script que sólo sirve para mostrar imágenes.
JMiur gracias por responder , entonces LightWindow es el que me permitiria hacer ese efecto en reply a los comentarios verdad ? bueno e intentado poner LightWindow y no puedo es más no me sale el efecto con las imágenes ,luego intentaré hacerlo aunque eso me suponga cambiarlo por el que tengo puesto ahora ( lightbox ) es una pena pero si logras algún truco parecido en los comentarios me avisais gracias por todo saludo.
Puede ser este script o cualquier otro que permita mostrar páginas webs en ventanas modales, hay varios que lo hacen.
No es que el formulario tenga problemas sino que los comentarios están cerrados.