Instala ventanas modales recomendados por Ciudad Blogger

Artículo publicado en el blog Ciudad Blogger, uno de los sitios con más información sobre tecnología Blogger Ve la entrada en su blog original.

Shadowbox es un clon de Lightbox, pero a diferencia de éste no sólo sirve para visualizar imágenes en ventanas modales,sino también páginas web, archivos en flash, galerías, mapas, y videos en varios formatos de distintos servicios.

Implementarlo es bastante sencillo, primero descarga este archivo, descomprímelo y sube los archivos a un hosting.

Luego entra en Plantilla | Edición de HTMLL y pega antes de </head> lo siguiente:

<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: "0.6",
});
< /script>

Cambia lo que está en color verde por las URL de los archivos que subiste, en el primero va la URL del achivo shadowbox.css y en el segundo la del shadowbox.js

Con esto ya tenemos todo lo necesario para que Shadowbox funcione, ahora sólo hay que poner el atributo rel="shadowbox" dentro del código del elemento, por ejemplo:

Imagen

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

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>

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>

Vimeo

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

Video Google

<a href="http://video.google.com/googleplayer.swf?docid=-1941725100819420671&autoplay=1&hl=es&fs=true" title="Video Google" rel="shadowbox;width=405;height=340">Video Google</a>

Archivo SWF

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

Página Web

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

Mapa

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

Cambia la URL de la imagen, del mapa, del archivo o de la página web, según corresponda.
En el caso de los videos sólo hay que agregar donde está en color rojo la ID del video, esa aparece al final de la dirección del video.

Como ven, en el atributo rel="shadowbox" también se han añadido unos parámetros, width=405 es el ancho del reproductor o página web y height=340 es el alto.
En el caso de las galerías de imágenes se agrega entre corchetes el nombre de la galería, por ejemplo rel="shadowbox[galeria1]"

Respecto al color de la pantalla cuando está en ventana modal puede cambiarse en el primer código que pegamos antes de </head> donde está en color azul, overlayColor es el color de la pantalla, y overlayOpacity es la intensidad de la opacidad del color, un número más bajo hace más transparente el color.

En todos los casos no se mostrará una imagen en miniatura como en mis ejemplos sino que se mostrará un enlace de texto, si quieres que también sean miniaturas en lugar del texto sólo busca la parte del código que es texto subrayado y cámbialo por este código:

<img style="width:150px; height:100px;" src="URL de la imagen" />

Ahí deberás poner la URL de la imagen que quieres que aparezca en miniatura, no es automático así que habrá que hacerlas manualmente.

Sin duda Shadowbox es un sistema de ventanas modales bastante completo en el que podremos presentar distintos archivos multimedia de forma más dinámica y elegante.

Descargar | archivos Shadowbox
Enlace | Shadowbox

Read More

Cómo instalar un carrusel de imagenes (Con Scriptaculuos)

Artículo publicado en el blog Ciudad Blogger, uno de los sitios con más información sobre tecnología Blogger Ve la entrada en su blog original.

Este es un carrusel de imágenes de Brian R. Miedlar que muestra las imágenes con un efecto de deslizamiento y regresa al inicio una vez llegado a la última imagen. Está hecho con Scriptaculous así que quienes usen jQuery ya saben que deberán aplicar un hack para que ambos scripts funcionen.

Puedes ver un ejemplo funcionando en este blog de pruebas.

Para poner este carrusel de imágenes en tu blog primero necesitas descargar este archivo, descomprimirlo, y subir los archivos a un hosting.
Luego, entra en la Edición HTML de tu plantilla y agrega antes de </head> esto:

<!-- Prototype y Scriptaculous-->
< script src='http://www.google.com/jsapi'></script>
< script>
google.load("prototype","1.7.0.0");
google.load("scriptaculous", "1.9.0");
< /script>
< !-- Prototype y Scriptaculous-->

< script language='javascript' src='URL del archivo os.js' type='text/javascript'/>
< script language='javascript' src='URL del archivo carousel.js' type='text/javascript'/>
< script language='javascript' src='URL del archivo application.js' type='text/javascript'/>

Si ya tienes Scriptaculous y Prototype no hace falta que agregues el código gris, pero el resto sí. Ahí coloca donde se indica en color rojo las URLs de los archivos que subiste previamente.

Ahora antes de ]]></b:skin> pega los estilos.

.carousel {
position:relative;
clear:both;
left:20px; /* Distancia desde la izquierda */
margin-top:10px;
margin-bottom:20px; /* Margen inferior */
border:2px solid #D8D8D8; /* Borde del carrusel */
background-color:#F2F2F2; /* Color de fondo */
}
.carousel .navButton {cursor:pointer; display:block; text-indent:-9999px; background-repeat:none; z-index:10;}
.carousel .container { position:absolute; overflow:hidden; }
.carousel .items { position:absolute; }

#Carousel2 {
height:88px; /* Alto del contenedor */
width:685px; /* Ancho del contenedor */
}
#Carousel2 .container {
left:26px;
top:12px;
width:630px; /* Ancho del contenedor de las imágenes */
height:100px; /* Alto del contenedor de las imágenes */
}
#Carousel2 .items { top:0; left:2px;
width:1700px; /* Ancho total de todas las minaturas */
}
#Carousel2 .item { height:70px; width:70px; float:left; clear:right; }
#Carousel2 .item .icon img { position:relative; left:0px; width:65px !important; height:65px; cursor:pointer;}
#Carousel2 .navButton { position:absolute; bottom:0px; width:24px; height:87px; }
#Carousel2 .navButton.previous { left:0px; background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZNb48FqY0hjO_u6yyQMxvbhBteiJ6Q0qfrzVDiVopSGR_C7sSp0DgAsMvJpdY4HJFj3cIfyC4hGnP-oJChudoihQADZsy6NHzxS1dVU94fCwpNRueBzwjwxK9JeqXaaQjGs4eqBnv5Ms/s87/button-left.png); }
#Carousel2 .navButton.next { right:2px; background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg401CFNHFforLginO_sG4A7QSq7MFggnHNz9TzWEiSpYCyxGFd4c4RgRSfsD4ZcUC0VlUS_WWRoUpHTHy9H-5xM4Lnl9pJuQSgm6cOfsgTkmxZqfJq5DrVMdaIr3NTSyk92kzfLd5UTnY/s87/button-right.png); }
#Carousel2 .item .key { display:none;}
#Carousel2 .item .picture { display:none;}

Después entra en Diseño | Elementos de la página | Añadir un gadget | HTML/Javascript, o si usas la nueva interfaz entra en Diseño | Añadir un gadget | HTML/Javascript, y ahí pega la estructura del carrusel:

<div id="Carousel2" class="carousel">
< div class="button navButton previous" style="display:none;">Atrás</div>
< div class="button navButton next" style="display:none;">Adelante</div>
< div class="container">
< div class="items">


< div class="item">
< div class="key caption">Thumb</div>
< div class="icon">
< a href="URL del enlace"><img width="65" height="65" src="URL de la imagen" /></a></div>
< div class="picture"></div>
< /div>


< div class="item">
< div class="key caption">Thumb</div>
< div class="icon">
< a href="URL del enlace"><img width="65" height="65" src="URL de la imagen" /></a></div>
< div class="picture"></div>
< /div>


< div class="item">
< div class="key caption">Thumb</div>
< div class="icon">
< a href="URL del enlace"><img width="65" height="65" src="URL de la imagen" /></a></div>
< div class="picture"></div>
< /div>


< div class="item">
< div class="key caption">Thumb</div>
< div class="icon">
< a href="URL del enlace"><img width="65" height="65" src="URL de la imagen" /></a></div>
< div class="picture"></div>
< /div>


< div class="item">
< div class="key caption">Thumb</div>
< div class="icon">
< a href="URL del enlace"><img width="65" height="65" src="URL de la imagen" /></a></div>
< div class="picture"></div>
< /div>


< div class="item">
< div class="key caption">Thumb</div>
< div class="icon">
< a href="URL del enlace"><img width="65" height="65" src="URL de la imagen" /></a></div>
< div class="picture"></div>
< /div>


< div class="item">
< div class="key caption">Thumb</div>
< div class="icon">
< a href="URL del enlace"><img width="65" height="65" src="URL de la imagen" /></a></div>
< div class="picture"></div>
< /div>


< div class="item">
< div class="key caption">Thumb</div>
< div class="icon">
< a href="URL del enlace"><img width="65" height="65" src="URL de la imagen" /></a></div>
< div class="picture"></div>
< /div>


< div class="item">
< div class="key caption">Thumb</div>
< div class="icon">
< a href="URL del enlace"><img width="65" height="65" src="URL de la imagen" /></a></div>
< div class="picture"></div>
< /div>


< div class="item">
< div class="key caption">Thumb</div>
< div class="icon">
< a href="URL del enlace"><img width="65" height="65" src="URL de la imagen" /></a></div>
< div class="picture"></div>
< /div>


< div class="item">
< div class="key caption">Thumb</div>
< div class="icon">
< a href="URL del enlace"><img width="65" height="65" src="URL de la imagen" /></a></div>
< div class="picture"></div>
< /div>


< div class="item">
< div class="key caption">Thumb</div>
< div class="icon">
< a href="URL del enlace"><img width="65" height="65" src="URL de la imagen" /></a></div>
< div class="picture"></div>
< /div>


< div class="item">
< div class="key caption">Thumb</div>
< div class="icon">
< a href="URL del enlace"><img width="65" height="65" src="URL de la imagen" /></a></div>
< div class="picture"></div>
< /div>


< div class="item">
< div class="key caption">Thumb</div>
< div class="icon">
< a href="URL del enlace"><img width="65" height="65" src="URL de la imagen" /></a></div>
< div class="picture"></div>
< /div>


< div class="item">
< div class="key caption">Thumb</div>
< div class="icon">
< a href="URL del enlace"><img width="65" height="65" src="URL de la imagen" /></a></div>
< div class="picture"></div>
< /div>


< div class="item">
< div class="key caption">Thumb</div>
< div class="icon">
< a href="URL del enlace"><img width="65" height="65" src="URL de la imagen" /></a></div>
< div class="picture"></div>
< /div>


< div class="item">
< div class="key caption">Thumb</div>
< div class="icon">
< a href="URL del enlace"><img width="65" height="65" src="URL de la imagen" /></a></div>
< div class="picture"></div>
< /div>


< div class="item">
< div class="key caption">Thumb</div>
< div class="icon">
< a href="URL del enlace"><img width="65" height="65" src="URL de la imagen" /></a></div>
< div class="picture"></div>
< /div>


< div class="item">
< div class="key caption">Thumb</div>
< div class="icon">
< a href="URL del enlace"><img width="65" height="65" src="URL de la imagen" /></a></div>
< div class="picture"></div>
< /div>



</div>
</div>
</div>

Ahí agrega las URLs de los enlaces y las URLs de las imágenes. La URL del enlace es opcional por si deseas que la imagen enlace a alguna entrada.

En el segundo código he puesto en color verde algunos estilos que puedes personalizar tales como el color del borde y el color de fondo. Las flechas son imágenes así que si quieres cambiarles su color o usar otras, tendrás que cambiar las dos URLs que se encuentran en ese código.

El tamaño.

El ancho del carrusel yo lo he puesto de 685px, así que debajo de la cabecera podría quedar muy bien. Si quieres cambiar la longitud entonces tendrás que cambiar el /* Ancho del contenedor */ (que es el tamaño de todo el carrusel), el /* Ancho del contenedor de las imágenes */ (que es el área donde se muestran las miniaturas), y el /* Ancho total de las miniaturas */ que es el ancho real que ocupan todas las miniaturas juntas.

Si agregas más imágenes o si quitas algunas, también tendrás que modificar el ancho total de las miniaturas, de lo contrario se mostrarán algunas imágenes debajo de otras.

Para añadir más imágenes agrega antes de los </div> en color azul un pedazo de código como este:

<div class="item">
< div class="key caption">Thumb</div>
< div class="icon">
< a href="URL del enlace"><img width="65" height="65" src="URL de la imagen" /></a></div>
< div class="picture"></div>
< /div>

Para alinear el gadget sólo cambia la distancia desde la izquierda (en color verde) por otro valor, uno más grande hará que se recorra hacia la derecha.

El carrusel muestra grupos de 5 imágenes en cada avance o retroceso, si deseas modificar este valor deberás editar el archivo application.js y ahí dentro buscar esta parte:

setSize: 5,

Ese 5 es el número de imágenes que se muestran en cada avance, sólo cámbialo por el que quieras.

A modo de consejo: como los scripts son tres pueden ser lentos en cargar así que se recomienda alojar los scripts en la plantilla.

Y ahora sí, es todo.

Read More

Instala la galería SpaceGallery

Artículo publicado en el blog Ciudad Blogger, uno de los sitios con más información sobre tecnología Blogger Ve la entrada en su blog original.

Hay muchos tipos de galerías para imágenes que nos encontramos en la red, pero pocas veces vemos una que muestre las imágenes de una forma tan diferente como esta.

Los que usan Mac OS X seguramente encontrarán mucha similitud con TimeMachine y los que no de cualquier forma estoy seguro que disfrutarán este tipo de efectos para ver las imágenes.

Se trata de Spacegallery, una galería de imágenes hecha con jQuery en la cual las imágenes aparecen una detrás de la otra al hacer click. Puedes verlo en el ejemplo de abajo.

Para usar esta galería primero descarga este archivo, descomprímelo y sube los tres scripts a un hosting. Luego pega antes de </head> lo siguiente:

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js' type='text/javascript'/>
< script src='URL del archivo eye.js' type='text/javascript'/>
< script src='URL del archivo utils.js' type='text/javascript'/>
< script src='URL del archivo spacegallery.js' type='text/javascript'/>

< script type='text/javascript'>
//<![CDATA[
(function($){
var initLayout = function() {
var hash = window.location.hash.replace('#', '');
var currentTab = $('ul.navigationTabs a')
.bind('click', showTab)
.filter('a[rel=' + hash + ']');
if (currentTab.size() == 0) {
currentTab = $('ul.navigationTabs a:first');
}
showTab.apply(currentTab.get(0));
$('#myGallery').spacegallery({loadingClass: 'loading'});
};

var showTab = function(e) {
var tabIndex = $('ul.navigationTabs a')
.removeClass('active')
.index(this);
$(this)
.addClass('active')
.blur();
$('div.tab')
.hide()
.eq(tabIndex)
.show();
};

EYE.register(initLayout, 'init');
})(jQuery)
//]]>
< /script>

Agrega donde se indica la URL de los archivos que subiste previamente, pero es muy importante que los agregues en el orden que se indica, de lo contrario podría no funcionar.

Ahora antes de ]]></b:skin> pega esto:

#myGallery {
width: 100%;
height: 400px; /* Alto de todo el contenedor */
}
#myGallery img {
border: 2px solid #52697E; /* Borde de las imágenes */
}
a.loading {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgRRxk3__FGkyXbEavEyUSUUmpB4B644JpcCIYcUzIbfciOue7fhB2QeVB0e_4YnHHBXHeeTI09FfXrEP02hBwhyphenhyphen80Cmaa9WTZy8v8z4URsRKhoZuElbbVUMU14-obKQMI4vhww5KOiwsY/) no-repeat center;
}
.spacegallery {
position: relative;
overflow: hidden;
}
.spacegallery img {
position: absolute;
left: 50%;
}
.spacegallery a {
position: absolute;
z-index: 1000;
display: block;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

Por último entra en Diseño | Elementos de la página | Añadir gadget | HTML/Javascript y agrega esto a continuación:

<div class="spacegallery" id="myGallery">
< img src="URL de la imagen"/>

< img src="URL de la imagen"/>

< img src="URL de la imagen"/>

< img src="URL de la imagen"/>

< img src="URL de la imagen"/>

< /div>

Ahí pon las URLs de las imágenes de tu galería, tomando en cuenta que la última imagen será la primera que se mostrará.

Y así se sencillo puedes disfrutar de esta galería de imágenes en tu blog, y aunque no tiene opciones de visualización o de configuración es sin duda una galería que llamará la atención de tus lectores.

Read More

Una galería de imágenes que rotan

¡ Artículo publicado en el blog El Balcón de Jaime, que pese a ser un blog terminado, es uno de los mejores en truvos blogger. ! Ve la entrada en su blog original.

Simple galería de imágenes usando la propiedad marquee

Si quieres poner una galería de imágenes en tu blog y quieres hacerlo de forma simple y rápida este es tu truco.

> Ver Ejemplo

Tan solo necesitarás alojar tus imágenes en un espacio tal como Imageshack o Tinypic.

Una vez tengas las imágenes podremos comenzar.

Diseño>añadir gadget (elemento de página)>html-javascript

Pega este bloque:

<marquee widht="300" direction="left" style="border: 2px solid #cccccc;" onmouseover="this.scrollAmount=1" scrollamount="1" onmouseout="this.scrollAmount=2">

<img heigth="70" width="70" src="URL DE TU IMAGEN"/>

<img heigth="70" width="70" src="URL DE TU IMAGEN"/>

<img heigth="70" width="70" src="URL DE TU IMAGEN"/>

<img heigth="70" width="70" src="URL DE TU IMAGEN"/>

</marquee>

Y sustituye en cada caso, URL DE TU IMAGEN por la dirección de esta última (que previamente alojaste).

Si no sabes como obtener la URL de una imagen, lee esta entrada.

Con este código podrás añadir un total de 4 imágenes. En caso de querer añadir más, inserta esta línea tantas veces como necesites:

<img heigth="70" width="70" src="URL DE TU IMAGEN"/>

Recuerda que siempre debes agregarla antes del cierre </marquee>

Ahora vamos a hablar del tamaño. En las líneas del código econtrarás las propiedades heigth="70" y width="70", que representan la altura y anchura de la imagen, respectivamente.

Puedes ajustar el tamaño que tendrá cada imagen incrementando o disminuyendo el valor 70, situado dentro de las comillas.

En todas las líneas deberíamos tener los mismos valores (que en este caso se trata de 70 x 70) para evitar que la galería se "desarme".

La galería está enmarcada con un borde de color gris, con un grosor de 2 píxeles. Puedes editar el color, el estilo y el grosor en esta línea:

border: 2px solid #cccccc;

Para obtener el código de cualquier color utiliza la tabla de colores.

Para cambiar el estilo del borde (que en este caso es solid) mira esta entrada.

Finalmente guarda el gadget.

Read More

Como instalar una galería de imágenes o links en el blog

¡ Artículo publicado en el blog El Balcón de Jaime, que pese a ser un blog terminado, es uno de los mejores en truvos blogger. ! Ve la entrada en su blog original.

Links o imágenes con efecto "deslizante" usando JQuery

Previamente aprendimos a poner links en cualquier parte del blog con efecto "deslizante" utilizando JQuery ^[+].

Dicho truco (cuyo ejemplo puede verse en este blog) se aplicaba a los enlaces en los gadgets que describíesemos en el script, escribiendo su título.

Utilizando este otro método podrás poner tanto enlaces como imágenes con efecto deslizante y de una forma mucho más sencilla.

Diseño>Edición HTML>expandimos artilugios

Busca la etiqueta </head> y encima agrega este script:

<script src='http://code.jquery.com/jquery-latest.js' type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function() {
$(&#39;a.deslizante&#39;).hover(function() {
$(this).animate({ paddingLeft: &#40;20px&#40; },410);
}, function() {
$(this).animate({ paddingLeft: 0 }, 300);
});
});
</script>

Seguidamente guarda la plantilla:




Ahora dirígete a una entrada cualquiera en la que desees poner un enlace o una imagen con el efecto deslizante.

Para poner un link utiliza esta línea:

<a href="URL DE LA PAGINA" class="deslizante">TITULO</a>

Y reemplaza URL DE LA PAGINA por la dirección de tu blog o web, así como TITULO por el texto que llevará el enlace.

Para poner una imagen utiliza esta otra línea:

<a href="URL DE LA PAGINA" class="deslizante"><img src="URL DE LA IMAGEN"/></a>

Y reemplaza URL DE LA PAGINA por la dirección de tu blog o web, así como URL DE LA IMAGEN por la dirección de la imagen o el icono ^[+].

Nota:

Para que no tengas que copiar las líneas de código cada vez que desees hacer uso del efecto puedes utilizar la plantilla de entrada que ofrece blogger ^[+].

Read More

Crea una galería para portada o artículos con Lytebox

¡ Artículo publicado en el blog El Balcón de Jaime, que pese a ser un blog terminado, es uno de los mejores en truvos blogger. ! Ve la entrada en su blog original.

Lytebox en blogger

Puede que hayas visto en algún sitio web una ventana modal muy elegante e interesante, que oscurece el fondo del blog al abrir una imagen, un vídeo, una página web...

Ese efecto puede conseguirse a través de múltiples scripts (como Lightwindow o Lightbox) y en este caso conoceremos uno de ellos, Lytebox.

Ver el resultado

Diseño>Edición de HTML>expandimos artilugios

Busca la etiqueta </head> y encima pega estos scripts:

<!--LYTEBOX--><link href='http://sites.google.com/site/scriptsbalcon/b/bllytebox.css' media='screen' rel='stylesheet' type='text/css'/>
<script src='http://sites.google.com/site/scriptsbalcon/b/lytebox.js' type='text/javascript'/><!--LYTEBOX-->

Seguidamente guarda la plantilla:




Dirígete a una entrada cualquiera para incluir la primera imagen con Lytebox.

Pega este código (que es el que necesitarás usar cada vez que desees poner una imagen con este efecto):

<a href="URL DE LA IMAGEN" rel="lytebox""><img src="URL DE LA IMAGEN" /></a>

Reemplaza en ambos casos URL DE LA IMAGEN por la dirección de tu imagen ^[+].

Para personalizar el tamaño que ésta última mostrará en la entrada añade style="margin-right: 18px; width: 158px; height: 102px;" justo antes de <img (y edita los valores 158 -ancho- y 102 -alto-).

En caso de querer mostrar una galería de imágenes usa esto otro:

<a href="URL DE LA IMAGEN" rel="lytebox[galeria]"><img src="URL DE LA IMAGEN" "/></a>

Reemplaza, como en el anterior caso, URL DE LA IMAGEN por la dirección de tu imagen ^[+].

¿Ves la palabra galeria? Es el "nombre" de una galería específica y todas las imágenes que se mostrarán en ella llevarán dicho nombre.

Puedes crear otras galerías para mostrar otras imágenes cambiando galeria por galeria1 y así sucesivamente.

Si por último, te interesa mostrar un sitio web con el efecto de Lytebox usa este código:

<a href="URL DEL ENLACE" rel="lyteframe" rev="width:660px; height:360px; scrolling:no;"">TEXTO</a>

Sustituye URL DEL ENLACE por la dirección del sitio web y TEXTO por el título que llevará el enlace.


Para publicar vídeos con Lytebox...

Es probable que en lugar de utilizar lytebox con imágenes desees hacerlo con vídeos, de YouTube por ejemplo.

Si es así, atiende a estos dos pasos ya que fácilmente aprenderás el procedimiento:

1) Al querer insertar un vídeo de YouTube en nuestro sitio web, nos proporcionan un código como este:

<object width="480" height="385"><param name="movie" value="http://www.youtube.com/v/Z5_b0jC-0K4&hl=es_ES&fs=1&"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/Z5_b0jC-0K4&hl=es_ES&fs=1&" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="480" height="385"></embed></object>

Lo único que necesitaremos será la línea que ves en negrita.

2) Posteriormente utilizamos este código e incluimos la línea en su interior:

<a href="http://www.youtube.com/v/Z5_b0jC-0K4" rel="lyteframe" title="Título"rev="width: 400px; height: 300px; scrolling: no;">AQUI EL TEXTO</a>

Si te fijas bien, encontrarás la frase "AQUI EL TEXTO", que puede reemplazarse por una frase o palabra que actuará como título del enlace (y que al pulsarlo abrirá el vídeo) o por un icono o imagen (en ese caso utiliza <img src="URL DE LA IMAGEN"/>).

Notas:

Para no estar copiando los códigos que insertan las imágenes con la ventana modal o el enlace con el vídeo, haz uso de la plantilla de entrada que ofrece blogger.

El script que pegaste antes de la etiqueta </head> está alojado en Google sites.

Puedes descargar los scripts necesarios...

Bllytebox.css

Lytebox.js

Y alojarlos en un servidor propio, como puede ser Fileden, Xoo Image o el propio Google sites.

Una vez alojados simplemente debes pegarlos en su respectivo código (pueds ver las líneas que debes reemplazar marcadas en color grisáceo), con el mismo orden en el que se muestran los enlaces de descarga.

Esto no es todo lo que se puede hacer con Lytebox pero ahora te toca investigar. Si necesitas cualquier tipo de ayuda avísame.

Read More