Lytebox en blogger
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.
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.
0 comentarios:
Publicar un comentario
¡Gracias por comentar!