Mostrar cualquier archivo en ventanas modales (Shadowbox)

Muchos deben de conocer la Lightbox en blogger esta la vemos al darle click a una imagen la misma muestra una ventana con la imagen y el fondo oscuro y transparente,pero existe un script que hace esa misma funcion pero con mas cosas.
Este clon de la Lightbox conocido como Shadowbox nos permite, a diferencia del primero ya mencionado, abrir en ventanas modales tanto imágenes como páginas web, vídeos e incluso archivos en flash (como juegos).




Esta herramienta con un sin fin de usos y de fácil instalación con la que podrás presentar en tu blog cualquier cosa sin hacer que éste atrase el contenido del sitio al cargar el contenido.
Para su intalacion en el nuevo diseño de blogger nos dirigimos a :

Plantilla >> Edicion de Html >> Continuar


Buscamos la etiqueta </head> y justo encima añaden el siguiente scripts:

<!-- Ventana modal ShadowBox tubetrucos.com-->
<link href='http://img79.xooimage.com/files/b/f/d/ttrucoscssshadowbox-35d3f9d.css' rel='stylesheet' type='text/css'/>
<script src='http://img26.xooimage.com/files/1/1/e/shadowbox-1b8e4a9.js' type='text/javascript'/>
<script type='text/javascript'>
Shadowbox.init({
overlayColor: "#000",
overlayOpacity: "0.6",
});
</script>

Si quieren, pueden descargar el script que hace funcionar la ventana modal ( shadowbox-1b8e4a9.js ), así como las propiedades css ( shadowbox-35d3f9d.css ) y alojarlo en tu propio hosting.

Una ves colocada guardamos la plantilla.

Con eso ya tendremos implementado lo mas inportante en nuestra plantilla. Ahora solo tendrán que incluir el código necesario para mostrar cada elemento en una entrada o en un gadget html-javascript en la parte de Diseño.

Solo una imagen

<a href="URL DE LA IMAGEN" rel="shadowbox" title="TITULO"><img src="URL DE LA IMAGEN" style="height: 100px; width: 100px;" /></a>

Una galeria

<a href="URL DE LA IMAGEN 1" rel="shadowbox[blgal1]" title="TITULO"><img src="URL DE LA IMAGEN 1" style="height: 100px; width: 100px;" /></a>

<a href="URL DE LA IMAGEN 2" rel="shadowbox[blgal1]" title="TITULO"><img src="URL DE LA IMAGEN 2" style="height: 100px; width: 100px;" /></a>

<a href="URL DE LA IMAGEN 3" rel="shadowbox[blgal1]" title="TITULO"><img src="URL DE LA IMAGEN 3" style="height: 100px; width: 100px;" /></a>

<a href="URL DE LA IMAGEN 4" rel="shadowbox[blgal1]" title="TITULO"><img src="URL DE LA IMAGEN 4" style="height: 100px; width: 100px;" /></a>

Una pagina web

<a rel="shadowbox;width=750;height=550" title="TITULO" href="URL DE LA PAGINA">TITULO DEL ENLACE </a>

Para un video de you tube

<a rel="shadowbox;width=450;height=400;" title="YouTube" href="http://www.youtube.com/v/NdHsJlQ5gaE&rel=0&autoplay=1">Ver el vídeo</a>

Un archivo SWF

<a rel="shadowbox;width=400;height=300" title="SWF" href="URL DEL ARCHIVO SWF">TITULO DEL ENLACE</a>

Cuando vayas a incluir una galería en tu blog, ten en cuenta que el atributo rel="shadowbox[blgal1]" pertenece a una galería, blgal1, por lo que las nuevas imágenes que incluyas utilizando este nombre aparecerán junto a las anteriormente publicadas. Para evitarlo, edita blgal1 tantas veces como desees de manera que puedas agrupar imágenes por separado en una galería (blgal1) o en otra (blgal2).

Las cifras del vídeo de YouTube (NdHsJlQ5gaE) deben sustituirse por los carácteres que aparecen al final de la dirección del vídeo que has escogido.

En URL DEL ARCHIVO SWF incluye la dirección del archivo .swf que obtendrás al haberlo alojado en tu propio hosting.

Agrega la dirección de cualquier página web en URL DE LA PAGINA (siempre con el http://).

Como aquí no les puedo mostrar el ejemplo los invito a que visiten el blog para que vean el ejemplo de que se trata
el que tenga activado la Lightbox en el blog se le mostrara dos cierres el de la imagen y el de la Lightbox de blogger para eso deben de desactivarla ,en

Configuración › Entradas y comentarios y le preguntan mostrar imagenes en la lightbox si o no y ahí escogen guardan y ya esta desactivada .saludos.