Configuración:
.
Biología
.
Botánica
.
Tecnología
.
Sociedad
A mis trece años de edad, el día 2 de Diciembre de 2007 inicié ‘El Balcón de Jame’. Este humilde espacio, cuyo secreto siempre fue el de compartir sin recibir nada a cambio, me dio la oportunidad de conocer un mundo nuevo, un entorno en el que me sentía yo mismo.

Hoy, 17 de abril de 2011 finalizo esta etapa de mi vida con una gran sonrisa y junto al recuerdo que este blog y cada unos de vosotros me habéis concedido.

He sido bloggero.

Jaime Trujillo Escobedo.

Botón para "comentar en ventana emergente" usando Lytebox

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.


Diseño>Edición de HTML>expandimos artilugios




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='&quot;http://www.blogger.com/comment.g?blogID=IDBLOG&amp;amp;postID=&quot; + data:post.id + &quot;&amp;isPopup=true&quot;' onclick='javascript:window.open(this.href, &quot;bloggerPopup&quot;, &quot;toolbar=0,location=0,statusbar=1,menubar=0,scrollbars=yes,width=400,height=450&quot;); 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...


Trucos blogger, trucos para tu blog, ayuda blogger


Guarda la plantilla para terminar...



Notas:

- En caso de no encontrar la línea <div class='post-footer'>, busca la línea <data:post.body/> y agrega el código encima de ella.

- 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 [+].

felix dice...

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

felix dice...

Jaime...

Postdata.- La dirección de mi blog es la que sigue:
http://felixcasanova.blogspot.com

Gracias y un saludo

felix dice...

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

Ricardo Panuccio dice...

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

Jaime Trujillo Escobedo dice...

¡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='&quot;http://www.blogger.com/comment.g?blogID=IDBLOG&amp;amp;postID=&quot; + data:post.id + &quot;&amp;isPopup=true&quot;' onclick='javascript:window.open(this.href, &quot;bloggerPopup&quot;, &quot;toolbar=0,location=0,statusbar=1,menubar=0,scrollbars=yes,width=400,height=450&quot;); 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!

Jaime Trujillo Escobedo dice...

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!

felix dice...

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

felix dice...

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

felix dice...

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

felix dice...

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¡

Jaime Trujillo Escobedo dice...

¡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!

Anónimo dice...

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

Jaime Trujillo Escobedo dice...

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.

●ѕιℓνια fιℓóℓogα● dice...

Precioso Jaime, sencillamente precioso. Lo tengo en mis 2 blogs y queda muy bien. Buen truco bloggero.

Jose dice...

Mola! Está muy bien esto. Ya lo he puesto en mi blog: http://iciber.blogspot.com/

Jaime Trujillo Escobedo dice...

¿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.

Anónimo dice...

me a quedado muy bien en mi blog, Danke♥

Jaime Trujillo Escobedo dice...

¡Cuánto me alegra saberlo, Danke! Ahora a disfrutarlo.

Escribe tu comentario en la entrada...

El Balcón de Jaime fue terminado el 17 de abril de 2011. Leer despedida.

Me gustaría conocer tu opinión. El comentario será moderado y en breve se publicará.

Si deseas incluir un enlace utiliza este código:

<a href="Dirección de tu página">Titulo del enlace</a>

Para publicar un código haz uso del Conversor de entidades.

Intenta escribir sobre algo relacionado con el artículo. Si no lo haces, podría tardar en responderte.

¿Problemas al comentar? Utiliza el formulario antiguo