Efecto Lytebox para su Blog

Tutorial tomado de HACKTIME y GEMABLOG.
Con este JavaScript aprenderemos a mostrar diversidad de archivos en una ventana nueva, pero no del navegador, sino en el mismo blog. Para dar una apariencia más profesional.


Recuerden que antes de realizar cualquier cambio en su plantilla, deben guardar la plantilla actual con la que trabajan, en caso de que ocurra algún error en el proceso.


PASOS:

1. Abrir nuestro administrador de Blogger: www.blogger.com
2. Hacer clic en la pestaña Diseño/Edición HTML
3. Buscar CTRL + F, la siguiente parte del código: </head>
4. Antes de </head>, pegar el siguiente código:
<script src='http://www.geocities.com/vanalexa/lytebox.js' type='text/javascript'/>
<link href='http://www.geocities.com/vanalexa/lytebox.css' rel='stylesheet' type='text/css'/>

5. Guardamos la Plantilla
6. Alojar las imágenes que ocuparemos en www.photobucket.com
7. Para aplicar el efecto tendremos que colocar el siguiente código cada vez que se lo quiera utilizar:
<a href="Url-de-la-imagen" rel="lytebox" title="Título">texto o imagen</a>

En Url de la imagen, copiar la dirección donde aloja phothobucket, el Direct Link

Debemos tener en cuenta que si deseamos cambiar el texto junto a la imagen, debemos cambiar el texto que van entre comillas en TITLE, si no desean colocar ningún texto deben dejarlo en blanco, title="".


DEMO:

CÓDIGO ENLACE A IMAGEN
<a href="Url-de-la-imagen" rel="lytebox" title="Título">texto o imagen</a>





CÓDIGO GRUPO DE IMÁGENES
<a href="Url-de-la-imagen" rel="lytebox[NOMBRE]" title="Título">texto o imagen 1</a>
<a href="Url-de-la-imagen" rel="lytebox[NOMBRE]" title="Título">texto o imagen 2</a>
<a href="Url-de-la-imagen" rel="lytebox[NOMBRE]" title="Título">texto o imagen 3</a>


La diferencia en el grupo de imágenes es que se coloca el atributo rel="lytebox[NOMBRE]"
(Sustituir NOMBRE por el nombre adjudicado al grupo de imágenes) ejemplo: docentes, alumnos, aulas...

- -


CÓDIGO SLIDESHOW
<a href="Url-de-la-imagen" rel="lyteshow[NOMBRE]" title="Título">texto o imagen 1</a>
<a href="Url-de-la-imagen" rel="lyteshow[NOMBRE]" title="Título">texto o imagen 2</a>
<a href="Url-de-la-imagen" rel="lyteshow[NOMBRE]" title="Título">texto o imagen 3</a>


La diferencia para aplicarlo mediante un Slideshow es añadiendo la etiqueta rel="lyteshow[NOMBRE]". Se dbe sustituir NOMBRE por una etiqueta adjudicado al grupo de imágenes) ejemplo: docentes, alumnos, aulas...

- -

CÓDIGO PARA LLAMAR UN SITIO WEB DENTRO DEL BLOG
La posibilidad de añadir un iframe con la etiqueta rel="lyteframe" o rel="lyteframe[NOMBRE]" resulta muy útil cuando tratamos de mostrar una página si necesidad de salir del blog.
<a href="iframe-único" rel="lyteframe" title="Título">texto o imagen</a>


Al usar Lyteframe podemos añadir barra de scroll y escoger tamaño, lo haremos con la etiqueta rev
<a href="Url-de-la-pagina" rel="lyteframe" title="Título"
rev="width: 500px; height: 450px; scrolling: no;">texto o imagen</a>


  • En "Título" añadiremos el título de la imagen.

  • Donde "Url-de-la-imagen" y "Url-del-iframe" la Url correspondiente según el caso.

  • En "texto o imagen" escribiremos el texto que servirá de enlace. Si es una imagen sustituiremos "texto o imagen" por


  •  
    ir arriba