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 :
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://).
Via : El balcon por Shadowbox
:)
:(
;)
:D
;;-)
:-/
:-O
X(
B-)
#:-S
:((
:))
=))
~X(
:-t
8-
=P~
#-o
=D7
:-SS
:-q
:-bd
En IE no funciona bien, al mostrar una url, la muestra toda en negro
ResponderEliminarHola Anónimo,hice la prueba en IE y si funciona bien si quieres dejame la url de donde lo tienes y te podre ayudar mas.
Eliminarfunciona de maravilla man
ResponderEliminarAmigo una pregunta, que funcion se le puede agregar para cuando yo cierre la venta modal, me actualizar o recargue la pagina que hay por de bajo
ResponderEliminarHola ¿como estas? muchas gracias por la información he estado intentándolo con Dailymotion y con genero.tv pero no han funcionado bien, con los demas si.
ResponderEliminar