Puede que hayas visto en algún sitio web una ventana modal muy elegante e interesante, que oscurece el fondo del blog al abrir una imagen, un vídeo, una página web...
Ese efecto puede conseguirse a través de múltiples scripts (como Lightwindow o Lightbox) y en este caso conoceremos uno de ellos, Lytebox.
Ver el resultado
Diseño>Edición de HTML>expandimos artilugios
Busca la etiqueta </head> y encima pega estos scripts:
<!--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-->
Seguidamente guarda la plantilla:
Dirígete a una entrada cualquiera para incluir la primera imagen con Lytebox.
Pega este código (que es el que necesitarás usar cada vez que desees poner una imagen con este efecto):
<a href="URL DE LA IMAGEN" rel="lytebox""><img src="URL DE LA IMAGEN" /></a>
Reemplaza en ambos casos URL DE LA IMAGEN por la dirección de tu imagen [+].
Para personalizar el tamaño que ésta última mostrará en la entrada añade style="margin-right: 18px; width: 158px; height: 102px;" justo antes de <img (y edita los valores 158 -ancho- y 102 -alto-).
En caso de querer mostrar una galería de imágenes usa esto otro:
<a href="URL DE LA IMAGEN" rel="lytebox[galeria]"><img src="URL DE LA IMAGEN" "/></a>
Reemplaza, como en el anterior caso, URL DE LA IMAGEN por la dirección de tu imagen [+].
¿Ves la palabra galeria? Es el "nombre" de una galería específica y todas las imágenes que se mostrarán en ella llevarán dicho nombre.
Puedes crear otras galerías para mostrar otras imágenes cambiando galeria por galeria1 y así sucesivamente.
Si por último, te interesa mostrar un sitio web con el efecto de Lytebox usa este código:
<a href="URL DEL ENLACE" rel="lyteframe" rev="width:660px; height:360px; scrolling:no;"">TEXTO</a>
Sustituye URL DEL ENLACE por la dirección del sitio web y TEXTO por el título que llevará el enlace.
Para publicar vídeos con Lytebox...
Es probable que en lugar de utilizar lytebox con imágenes desees hacerlo con vídeos, de YouTube por ejemplo.
Si es así, atiende a estos dos pasos ya que fácilmente aprenderás el procedimiento:
1) Al querer insertar un vídeo de YouTube en nuestro sitio web, nos proporcionan un código como este:
<object width="480" height="385"><param name="movie" value="http://www.youtube.com/v/Z5_b0jC-0K4&hl=es_ES&fs=1&"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/Z5_b0jC-0K4&hl=es_ES&fs=1&" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="480" height="385"></embed></object>
Lo único que necesitaremos será la línea que ves en negrita.
2) Posteriormente utilizamos este código e incluimos la línea en su interior:
<a href="http://www.youtube.com/v/Z5_b0jC-0K4" rel="lyteframe" title="Título"rev="width: 400px; height: 300px; scrolling: no;">AQUI EL TEXTO</a>
Si te fijas bien, encontrarás la frase "AQUI EL TEXTO", que puede reemplazarse por una frase o palabra que actuará como título del enlace (y que al pulsarlo abrirá el vídeo) o por un icono o imagen (en ese caso utiliza <img src="URL DE LA IMAGEN"/>).
Notas:
Para no estar copiando los códigos que insertan las imágenes con la ventana modal o el enlace con el vídeo, haz uso de la plantilla de entrada que ofrece blogger.
El script que pegaste antes de la etiqueta </head> está alojado en Google sites.
Puedes descargar los scripts necesarios...
Bllytebox.css
Lytebox.js
Y alojarlos en un servidor propio, como puede ser Fileden, Xoo Image o el propio Google sites.
Una vez alojados simplemente debes pegarlos en su respectivo código (pueds ver las líneas que debes reemplazar marcadas en color grisáceo), con el mismo orden en el que se muestran los enlaces de descarga.
El script que pegaste antes de la etiqueta </head> está alojado en Google sites.
Puedes descargar los scripts necesarios...
Bllytebox.css
Lytebox.js
Y alojarlos en un servidor propio, como puede ser Fileden, Xoo Image o el propio Google sites.
Una vez alojados simplemente debes pegarlos en su respectivo código (pueds ver las líneas que debes reemplazar marcadas en color grisáceo), con el mismo orden en el que se muestran los enlaces de descarga.
Esto no es todo lo que se puede hacer con Lytebox pero ahora te toca investigar. Si necesitas cualquier tipo de ayuda avísame.
¿Problemas al comentar? Utiliza 
Que pasa si ya tengo codigos que ocupan la plantilla de entrada???
Abel3D, no tiene por que pasar nada. En mi plantilla de entrada tengo un total de 6 elementos (entre ellos, varios códigos) ;).
Holaaa. Tengo una dudilla, y me ha dicho un amigo asiduo, por aquí que pregunte en este blog:
Tengo un blog, y he borrado un post de él. Pero i busco ese post en google, y le doy a caché sale de nuevo. ¿No hay ninguna manera de que no salga ahí tampoco?
Saludos y felicidades por el blog.
Muchas gracias por venir, Nico García y agradécele a tu amigo la recomendación ;).
Verás, Google indexa el contenido de un blog según la "popularidad" o el contenido que éste tenga. Los artículos eliminados, indexados aún por Google acabarán desapareciendo (en el plazo de unos meses).
No existe un método para "eliminar" ese post en los resultados de dicho buscador, solo se puede esperar :S.
hola jaime, si uno coloca varias imagenes en una entrada, se debe ir haciendo lo de litebox una por una, no me queda claro lo de plantilla de entrada, es que lo trate de usar pero no paso nada, asi que no lo entiendo?????
Happycrations, en realidad lo único que necesitas introducir en el código de tus imágenes es el atributo rel="lytebox".
Puedes pegar dicho atributo en la plantilla de entrada, herramienta que lo único que hace es almacenar cualquier contenido (ya sea texto o código) que deseamos que aparezca en el cuerpo de una nueva entrada, de manera que no tendrás que estar copiando y pegando el atributo cada vez que desees asignárselo a una imagen.
Al ponerlo en la plantilla de entrada no estás activando el truco, simplemente estás "guardando" la etiqueta necesaria para después poder insertarla en el código de la imagen con facilidad.
Se debe hacer imagen por imagen pero, al tener que copiar únicamente el atributo, será todo mucho más rápido ;).
Jaime: qué parte del código agrego para poner mas de dos imagenes en la galería?
Silvia, agrega el código de la tercera "cajita", de manera que todas las imágenes de tu galería tengan el atributo rel="lytebox[galeria]" y por tanto puedan visualizarse en dicha presentación.
Problemas Jaime: no logro que me quede bien. Ahora estoy muy cansada - llegué hace 1 hora de un viaje de 20 horas en micro - y quizá estoy haciendo las cosas mal. Te tengo al tanto!
Saludos!!!
Jaime:
He intentado hacerlo con este script, pero parece que algún scrpit que tengo en mi plantilla es el problema, ya que, intenté con lightbox y tampoco me funciona, me podrías ayudar con eso?.
Aqui dejo la entrada de prueba:
http://evtod.blogspot.com/2007/04/prueba-galeria.html
hola jaime vieras que cuando lo puse en una entrada me dio este ERROR
Su HTML no es aceptable: Tag is broken: A
y no se que significa ayudaaaaaaaa
Happycrations, revisa el código de tu entrada al incluir la imagen: modifiqué unas comillas y parece ser que el error desaparece ;).
¿Cómo se puede insetar con este método un vídeo? Es decir, que se abra el video en un ventana modal. Muchas Gracias.
Hola Inés. Revisa la entrada ya que acabo de añadir el apartado explicando la manera de mostrar vídeos con lytebox.
Gracias, Jaime por tu respuesta tan rápida.
Gracias a ti, Inés, por la consulta. Si no fuera por dicha pregunta, el artículo estaría un tanto incompleto ;).
Hola Jaime, existe alguna manera de postear imágenes directo desde Blogger sin tener que subirlas a otro servidor de imágenes?, es un poco tedioso subirlas y luego pegar el código etc, etc; si se pudiera hacer directo sería genial!.
Muchas gracias por el tuto!!!
Tengo otra preguntita, la imagen mostrada por el LyteBox no es del tamaño real, siempre es más chica, cómo hacer para que la muestre del tamaño real?
Saludos!
No he podido acceder a la galería, Whisper. ¿Podrías enviarme un enlace alternativo?
Puedes hacer uso del propio blogger para alojar imágenes, Braulio Guido, pero no para aplicarles "lytebox". Es decir, puedes obtener la URL de una imagen directamente sin salir de una entrada y aplicarle en ella el código necesario para mostrarla en ventana modal.
En cuanto al tamaño, me temo que será algo complicado ya que sería necesario editar el script.
Nico García, atento a las próximas publicaciones ya que estarán relacionadas con este tema.
P.D. Si has eliminado el artículo, tardará un tiempo en desaparecer (un par de meses) pero lo hará.
Hola Jaime, el script de lytebox es una maravilla. No puedo más q felicitarte y agradecerte ya q solucionó mi blog q es una presentación continua de imágenes (de mi protfolio). Sigo acomodándolo, con muchos detalles para finalizar acabados pero ya en lo último. Te lo paso para q vayas viendo: http://boomerangdesign.blogspot.com , y desde ya serán más q bienvenidas tus sugerencias. Tu blog de ayuda es realmente genial, lamento no tener más tiempo para estudiar y probar mejor. Una consulta del momento. Necesito colgar mi CV q es un pdf y ni blogger ni picassa me lo reconocen. Dónde puedo colgarlo para conseguir linkearlo desde el blog? O q alternativa sugieres?
Vuelvo a felicitarte, espero te guste mi blog y estamos en contacto Jaime...
Un saludo!
Marina
¡Bienvenida Marina! Bueno, antes de responder a tu duda me gustaría decirte que me ha encantado tu trabajo. Eres una diseñadora muy buena.
Para alojar un archivo PDF te recomiendo que hagas uso de Google sites, herramienta que ofrece el gran buscador y que puedes acceder con tu cuenta de blogger (google).
Debes crear una nueva 'página' y posteriormente un 'archivador'. Si necesitas ayuda avísame.
Por cierto, me gustaría hacerte una pregunta...
¿Sabrías idear un logotipo para El Balcón?
Llevo tiempo probando pero no logro dar con uno que verdaderamente me guste. Tal vez tú puedas idear uno que me llame la atención...(por supuesto, si lo utilizo te enlazaré).
¡Abrazos!
Esto es algo que en realidad me encanto. Utilizo galerías de imágenes, videos y hasta el de comentario.Es una joya recontra agradecido. Saludos.
Universo Z
Universo_Z, al utilizar Lytebox en las imágenes el resultado es elegantísimo. Me alegra que te haya gustado tanto.
Nota: Evita incluir la dirección de tu blog en todos los comentarios que escribes ya que tendré que dejar de publicarlos por spam.
Hola jaime, hay alguna manera de que este script se ejecute automáticamente al visitar la página principal del blog?
Cloudx18, no comprendo tu consulta. El script se ejecuta automáticamente dado que las imágenes seleccionadas se abrirán en la ventana modal de inmediato.
Es probable que te refieras a lo explicado en esta entrada.