Utilizar Lytebox en blogger "How-To"

ACTUALIZADO entra en este enlace para una "edición" más actualizada ACTUALIZADO

Supongo que os habréis fijado en las fotos del blog, al abrirlas, se difumina el fondo adquiriendo un tono negro y se muestran en un marco blanco, dando al blog una mejor imagen. Todo gracias a Lytebox, muy parecido a lightbox pero menos pesado. Este efecto es muy sencillo de conseguir si seguís los pasos de este sencillo tutorial: Os recomiendo realizar una copia de seguridad de vuestra plantilla antes de hacer cambios por si acaso.

Vamos a "Diseño -> Edición de HTML" en nuestro blog: 

y buscamos la línea donde pone </head> (Editar -> Buscar o ctrl+F en firefox), y justo encima pegamos el siguiente código para ejecutar los scripts que Lytebox necesita y guardamos la plantilla:

 

<link href='http://dl.dropbox.com/u/14647580/lytebox/lytebox.css' media='screen' rel='stylesheet' type='text/css'/>
<script src='http://dl.dropbox.com/u/14647580/lytebox/lytebox.js' style="font-size: small;"> type='text/javascript'/>
</script>

Ahora viene lo mejor, comenzar a utilizarlo!! XD... Después de la url de la imagen se ha de añadir rel="lytebox" si queremos ver una foto nada mas, como las imágenes de mas arriba, ejemplo: 

<a href="URL de la imagen" rel="lytebox"><img src="URL de la imagen" "/></a>

Si por el contrario queréis ver una tras otra como si fuese una galería deberéis utilizar: rel="lytebox[nombre del grupo de fotos]" en cada foto, como en este post y pasar de imagen haciendo "click". Ejemplo:

<a href="URL de la imagen" rel="lytebox[nombregrupodefotos]"><img src="URL de la imagen" "/></a>

Debería quedaros algo así:

Para que pasen las fotos solas como diapositivas con posibilidad de pausa, éste es el código a añadir

<a href="URL de la imagen" rel="lyteshow[nombregrupodefotos]"><img src="URL de la imagen" "/></a>

Si queréis que se muestre un video de Youtube, deberéis hacerlo con el siguiente código, es bastante parecido al de las imágenes pero con rel="lyteframe" para la URL del video deberéis usar la que os proporciona Youtube cuando haceis "click" en insertar y para la de la imagen podéis utilizar el plugin jyoutube.

<a href="URL del video de Youtube" rel="lyteframe" rev="width: 480px; height: 360px; scrolling: no;" title="Título para el video"><img src="URL de una imagen de muestra del video" /></a>

Aquí un ejemplo con datos reales:

<a href="http://www.youtube.com/v/lZvSmsIE_Ls" rel="lyteframe" rev="width: 480px; height: 360px; scrolling: no;" title="Yak-50 May Day Aterrizaje de Emergencia"><img src="http://i1.ytimg.com/vi/lZvSmsIE_Ls/hqdefault.jpg" /></a>

Es el mismo video que esta en este enlace por si queréis ver como queda ( actualizazión: lo pasé a shadowbox, pero el funcionamiento es casi el mismo). También podéis cambiar:

<img src="URL de una imagen de muestra del video" />

por una frase o texto descriptivo del video.

Los scripts han sido subidos por mí y podéis utilizarlos si queréis (si habeis seguido el tutorial así lo haréis), pero si queréis tenerlos alojados vosotros mismos, podéis descargar lytebox de la web oficial y lo subís a algún servidor propio o gratuito como en mi caso, luego editais el archivo "lytebox.css", comprobando que apunten bien todas las rutas que salen ahí para que se muestren correctamente los botones. En el archivo "lytebox.js" arriba de todo hay muchas variables que controlan el comportamiento del script como el color del fondo y botones, opacidad, etc... Cualquier problema copiando y pegando que podáis tener, lo podéis solucionar copiando antes el código a copiar en el bloc de notas para quitarle qualquier formato que tenga el texto, y de ahí al editor de entradas de Blogger.

Espero haberme explicado bien y podáis utilizarlo,
A disfrutar!! 

ACTUALIZADO entra en este enlace para una "edición" más actualizada ACTUALIZADO