Ofrecer la opción de comentar en ventana emergente a los lectores de un blog resultaba verdaderamente útil ya que los visitantes podían comentar tanto con el formulario incrustado bajo las entradas como con el formulario en popup.
Por otro lado -y perteneciendo a un tema completamente distinto- expliqué la manera de instalar Lytebox en el blog. Dicha aplicación consistía en un script que nos permite mostrar tanto imágenes como sitios web en vetanas modales o emergentes y, con un efecto muy elegante, hacer que el fondo del blog se oscurezca (de manera que la ventana queda resaltada).
En estos días se me ocurrieron varias ideas y una de ellas es la de unir el truco de "comentar en ventana emergente" con el de Lytebox, de manera que el resultado sea una ventana emergente elegante (usando lytebox) que abre el formulario de comentarios al hacer clic en un botón.
El lado positivo de este truco es que su instalación es realmente sencilla y el resultado muy prometedor.
Comenzaremos instalando Lytebox en el blog. Si ya lo tienes instalado no hace falta que vuelvas a hacerlo.
Busca la etiqueta </head> y añade el script que te muestro a continuación:
<!--LYTEBOX--><link href='http://sites.google.com/site/scriptsbalcon/b/bllytebox.css' media='screen' rel='stylesheet' type='text/css'/>
<script src='http://sites.google.com/site/scriptsbalcon/b/lytebox.js' type='text/javascript'/><!--LYTEBOX-->
Ahora busca esta línea:
<div class='post-footer'>
E inserta esto justo debajo:
<a expr:href='"http://www.blogger.com/comment.g?blogID=IDBLOG&amp;postID=" + data:post.id + "&isPopup=true"' onclick='javascript:window.open(this.href, "bloggerPopup", "toolbar=0,location=0,statusbar=1,menubar=0,scrollbars=yes,width=400,height=450"); return false;' rel='lyteframe' rev='width:682px; height:460px; scrolling:yes;'><img align='right' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjHRsp6lj-ACLFbzc7Dd4fff-FsdB_31T0P3XvuMhoN8lVGpdKEj2FVAoUTaAhJuqppDYE1QD-pTlZJSenqfoqYL6TYsdXRMePmr15zJTmeA6OF7Hha3TikKTUCMJ4IF3c2bHr2pOMK7QY/s320/blcomentp.png'/></a>
Seguidamente deberás hacer el paso más importante: colocar la ID de tu blog, reemplazando IDBLOG por las cifras que la componen.
¿Dónde encuentro la ID? Muy sencillo. Si te encuentras en el apartado de Diseño>Edición de HTML, bastará con observar la dirección que aparece en la barra de direcciones...
Guarda la plantilla para terminar...
Notas:
- Si deseas cambiar el botón que abre la ventana emergente con el formulario, reemplaza la línea https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjHRsp6lj-ACLFbzc7Dd4fff-FsdB_31T0P3XvuMhoN8lVGpdKEj2FVAoUTaAhJuqppDYE1QD-pTlZJSenqfoqYL6TYsdXRMePmr15zJTmeA6OF7Hha3TikKTUCMJ4IF3c2bHr2pOMK7QY/s320/blcomentp.png por la URL de tu imagen [+].
¿Problemas al comentar? Utiliza 
Hola Jaime...
En primer lugar decirte que llevo un tiempo visitándote y de no ser por la ayuda que tan desinteresadamente muestras me hubiera sido muy difícil implementar algunas de las funciones para "adecentar" el blog. Hay muchos blogs de ayuda, y, sin citar nombres que todos ya sabemos, dan por hecho que tenemos unos conocimientos cuanto menos avanzados en el tema. Por eso te agradezco si cabe más tu sencillez a la hora de explicar hasta el más mínimo detalle. Cualquier actualización que me llega a mi correo de tu blog merece muy mucho la pena sea del ámbito que sea (hasta de plantas estoy aprendiendo, fijate)...
Quisiera hacerte una consulta (si es posible). He seguido tus pasos al pie de la letra y el resultado lo veo espectacular y muy elegante. El problema que me encuentro en mi plantilla es que tengo colocado el elemento con miniaturas de posts más recientes antes de entrar en el post (después de "leer más") y por tanto queda deslucido y poco visible la pestaña de comentar en pop-up. Asimismo me ocurre con "compartir esta entrada" que me sale donde le apetece, jaja (bueno, donde le apetece no, más bien donde lo he colocado :(. Desconozco si se podría cambiar donde pone "x comentarios" por la ventana de pop-up. Si se puede hacer te agradecería muchísimo que me indicases como. No me enrollo más que esto parece una carta, gracias por todo y aplaudo tu labor.
Un abrazo
Jaime...
Postdata.- La dirección de mi blog es la que sigue:
http://felixcasanova.blogspot.com
Gracias y un saludo
Hola Jaime...
Gracias por toda la ayuda que nos prestas sobre todo a los neófitos en la materia como yo. Tendría una consulta si fueses tan amable. ¿podría colocar este botón al lado del titulo del post? El problema es que mi estructura del post es un verdadero desastre y eso me ayudaría, porque si puedes verlo, me salen las imagenes de post relacionados antes del post, y es un engorro. Te quedo muy agradecido de antemano.
HISTORIAS DE NUESTRAS HISTORIA
Un abrazo
Hola Jaime, desde ya te felicto por el alto conocimiento sobre html. Te escribo para ver si me podés ayudar con este paso. Hago todo lo que explicas en este tutorial, cuando activo el botón aparece la pantalla emergente con el recuadro en medio de la pantalla oscura, pero con una leyenda de Blogger diciendo "LO SENTIMOS PERO NO HEMOS PODIDO LLEVAR A CABO SU PETICION".
Lo raro es que utilizando lytebox en las imagenes me funciona bárbaro. Será que me falta algo de código con respecto al formulario en si?.
Te aclaro que no tengo mucho conocimiento del tema código, pero lo revisé varias veces y los pasos que seguí son exactamente lo que expusiste vos en esta página. Gracias
¡Hola Felix Casanova! Antes de responder a tu consulta quiero disculparme por haberme retrasado tanto al responder (los estudios... ;)).
Por supuesto que puedes conseguir lo que deseas. Sigue los pasos que te mostraré a continuación y en poco tiempo obtendrás tu botón bajo el título...
Diseño>Edición de HTML>expandimos artilugios
Busca la línea:
<div class="postmeta">
Ahora añade justo debajo el código que inserta tu botón:
<a expr:href='"http://www.blogger.com/comment.g?blogID=IDBLOG&amp;postID=" + data:post.id + "&isPopup=true"' onclick='javascript:window.open(this.href, "bloggerPopup", "toolbar=0,location=0,statusbar=1,menubar=0,scrollbars=yes,width=400,height=450"); return false;' rel='lyteframe' rev='width:682px; height:460px; scrolling:yes;'><img align='right' src='http://4.bp.blogspot.com/_gjBqKNTws4M/S7IPJytQz4I/AAAAAAAACNA/NOuP-jW5n2g/s320/blcomentp.png'/></a>
Por último y únicamente si lo deseas, puedes eliminar el botón que aparece al pie de las entradas, borrando el código que insertaste después de <div class='post-footer'>.
Guarda la plantilla para terminar.
Te comento que desde que desees modificar, añadir o informarte acerca de cualquier cosa puedes preguntarme sin ningún problema. Estaré encantado de ayudarte ^^. ¡Abrazos!
Ante todo quiero darte la bienvenida, Ricardo Panuccio, así como las gracias por tu agradable comentario.
En cuanto al botón de tu blog... yo diría que más que un error parece una configuración distinta relacionada con el formulario de comentarios.
Revisé el código de tu blog y, como bien dices, seguiste los pasos a la perfección.
Prueba a configurar los comentarios del blog (en Configuración>Comentarios) como te muestro en esta imagen.
Espero que eso solucione el problemilla. Si por el contrario, la ventana sigue mostrando el error, procederemos a revisar el código.
¡Un abrazo!
Jaime...
Siii, lo conseguí (bueno lo conseguiste, jaja). Eres un gran entendido y se nota que lo haces con mucho cariño y dedicación. Si tu progreso es igual en la vida en todos los aspectos no se a que cotas llegarás pero seguro que muy alto. Te quedo muy agradecido.
¡Faltaría más que te disculparas¡ Lo primero es lo primero :)
Un fuerte abrazo
Jaime...
¡uy¡ canté victoria antes de tiempo :). Al pulsar el botón se abre la ventana emergente pero da error NOT FOUND ERROR 404. De momento lo quitaré para no liarla parda, jaja.
Un fuerte abrazo
Jaime...
Estimado amigo. Ya no me sale el error porque olvidé incluir la ID, pero sin embargo al pulsar me aparece la ventana de comentarios de blogger por defecto ¿?. Gracias por todos.
Un fuerte abrazo
Estimado Jaime...
Te voy a volver loco querido amigo. Donde dije digo ahora digo diego :(.
Ya está solucionado, asi que disculpa las moletias.
Un fuerte abrazo¡
¡No hay nada que disculpar, Felix Casanova! Siempre es bueno preguntar, informárse y aprender para poder solucionar cualquier cosa. Si necesitas cualquier otra cosa o quieres personalizar algo más no dudes en avisarme ;).
¡Abrazos amigo!
Jaime, me sale esto:
"LO SENTIMOS PERO NO HEMOS PODIDO LLEVAR A CABO SU PETICION".
Leí el comentario de la respuesta y no encuentro el "postmeta" Si me dirías donde colocar ese código te agradeceria mucho.
Gracias
Luis, prueba a añadirlo antes de la etiqueta <data:post.body/> tal y como se indica en la sección notas al final de la entrada ;). Si sigue sin funcionarte avísame y encontraremos otro procedimiento.
Precioso Jaime, sencillamente precioso. Lo tengo en mis 2 blogs y queda muy bien. Buen truco bloggero.
Mola! Está muy bien esto. Ya lo he puesto en mi blog: http://iciber.blogspot.com/
¿Verdad que se produce un efecto muy profesional, Jose? Sin duda, el formulario en ventana modal permitirá que los lectores con problemas para visualizar el formulario incrustado puedan comentar tus entradas.
me a quedado muy bien en mi blog, Danke♥
¡Cuánto me alegra saberlo, Danke! Ahora a disfrutarlo.