Blogger: Mostrar ventanas modales con Shadowbox

Las ventanas modales se muestran sobre el contenido atenuando con un color oscuro el fondo del blog.

En estas ventanas podemos mostrar contenidos de diferente tipo.

Para implementarlo en Blogger nos vamos a Escritorio > Diseño > Edición de HTML y antes de </head> pegamos:

<link href='URL del archivo.css' rel='stylesheet' type='text/css'/>
<script src='URL del archivo.js' type='text/javascript'/>
<script type='text/javascript'>
Shadowbox.init({
overlayColor: "#000",
overlayOpacity: &quot;0.6&quot;,
});
</script>

Los archivos para poner en las URL lo bajamos de aquí, lo descomprimimos y subimos ambos archivos a nuestro hosting. Después ponemos los enlaces correspondientes: .css y .js.

ATRIBUTOS DEL SHADOWBOX

Dependiendo de lo que quieras mostrar utilizarás uno de estos códigos en tu enlace dentro del post:

Para imágenes:

<a href="URL de la imagen" rel="shadowbox" title="Imagen">Imagen</a>

Para videos de YouTube:

<a rel="shadowbox;width=405;height=340;" title="YouTube" href="http://www.youtube.com/v/CCwVb9Faxdc&amp;rel=0&amp;autoplay=1">YouTube</a>

Para mapas:

<a rel="shadowbox;width=425;height=350" title="Mapa" href="URL del mapa">Mapa Google</a>

Para páginas web:

<a rel="shadowbox;width=700;height=500" title="Página web" href="URL de la página">Página web</a>

Para archivos Flash SWF:

<a rel="shadowbox;width=400;height=300" title="SWF" href="URL del archivo.swf">Animación SWF</a>

Para videos de Vimeo:

<a rel="shadowbox;width=405;height=340;" title="Vimeo" href="http://vimeo.com/moogaloop.swf?clip_id=8711928&amp;autoplay=1">Vimeo</a>

Para galería de imágenes:

<a href="URL de la imagen" rel="shadowbox[galeria1]" title="Imagen">Imagen 1</a>
<a href="URL de la imagen" rel="shadowbox[galeria1]" title="Imagen">Imagen 2</a>