Instalar Light Box en Blogger

Instalar Light Box en Blogger

Un Light Box es una extensión que permite visualizar una imagen de forma mucho más elegante al presionar sobre esta, esta versión de Light Box contiene un efecto que sobrepone la imagen sobre el blog y el fondo se oscurece.

Vista previa de un Light Box:




Cómo insertar Light Box en Blogger:

Paso 1: Instalar Light Box en la plantilla:

Primero, vamos a ''Diseño/Edición HTML'' y buscamos  </head>, pegaremos el siguiente código justo encima:
<!--Light Box Ayuda Bloggers-->
<style>
#lightbox{    position: absolute;    left: 0; width: 100%; z-index: 100; text-align: center; line-height: 0;}
#lightbox img{ width: auto; height: auto;}
#lightbox a img{ border: none; }

#outerImageContainer{ position: relative; background-color: #fff; width: 250px; height: 250px; margin: 0 auto; }
#imageContainer{ padding: 10px; }

#loading{ position: absolute; top: 40%; left: 0%; height: 25%; width: 100%; text-align: center; line-height: 0; }
#hoverNav{ position: absolute; top: 0; left: 0; height: 100%; width: 100%; z-index: 10; }
#imageContainer&gt;#hoverNav{ left: 0;}
#hoverNav a{ outline: none;}

#prevLink, #nextLink{ width: 49%; height: 100%; background-image: url(data:image/gif;base64,AAAA); /* Trick IE into showing hover */ display: block; }
#prevLink { left: 0; float: left;}
#nextLink { right: 0; float: right;}
#prevLink:hover, #prevLink:visited:hover { background: url(http://lh5.ggpht.com/_u4gySN2ZgqE/SnWk89-4azI/AAAAAAAAAj8/hM0MqnVouCQ/prevlabel%5B3%5D.gif) left 15% no-repeat; }
#nextLink:hover, #nextLink:visited:hover { background: url(http://lh6.ggpht.com/_u4gySN2ZgqE/SnWk9-mNiQI/AAAAAAAAAkA/Zg1jXV9xnQM/nextlabel%5B6%5D.gif) right 15% no-repeat; }

#imageDataContainer{ font: 10px Verdana, Helvetica, sans-serif; background-color: #fff; margin: 0 auto; line-height: 1.4em; overflow: auto; width: 100%    ; }

#imageData{    padding:0 10px; color: #666; }
#imageData #imageDetails{ width: 70%; float: left; text-align: left; } 
#imageData #caption{ font-weight: bold;    }
#imageData #numberDisplay{ display: block; clear: left; padding-bottom: 1.0em;    }         
#imageData #bottomNavClose{ width: 66px; float: right;  padding-bottom: 0.7em; outline: none;}      

#overlay{ position: absolute; top: 0; left: 0; z-index: 90; width: 100%; height: 500px; background-color: #000; }
round-color: #000; }
lute; top: 0; left: 0; z-index: 90; width: 100%; height: 500px; background-color: #000; }
round-color: #000; }
</style>
<script src='http://ajax.googleapis.com/ajax/libs/prototype/1.7.0.0/prototype.js' type='text/javascript'/>
<script src='http://ajax.googleapis.com/ajax/libs/scriptaculous/1.8.3/scriptaculous.js' type='text/javascript'/>
<script src='https://sites.google.com/a/blogsydescargas.co.cc/ayudabloggers/scripts/lightbox2.js' type='text/javascript'/>
<!--Light Box Ayuda Bloggers-->

Guardamos los cambios y listo:



Paso 2: Agregar Light Box a una entrada:

Primero, deberás insertar una imagen a la entrada y luego en ''Edición de HTML'' buscarás esta sección:

Después de la url de la imagen, deberás pegar el siguiente código:
rel="lightbox"

Consideraciones:

Si quieres hacer un álbum de imágenes deberás pegar el siguiente código en cada una de las imágenes:
rel="lightbox[albumname]" title="TITULO IMAGEN"
 Reemplaza TITULO IMAGEN por el título correspondiente.

El código se deberá pegar en la misma zona.

Recuerda que ante cualquier problema con el código, puedes comentar o contactarme....
Artículo aleatorio
BuySellAds
BuySellAds
BuySellAds
BuySellAds
BuySellAds
Artículos destacados
Marca de agua en las imágenes con CSS # - Marca de agua en las imágenes con CSS
Botones para subir y bajar en Blogger # - Botones para subir y bajar en Blogger
Insertar una página externa en una entrada en Blogger # - Insertar una página externa en una entrada en Blogger
Efecto de desenfoque con CSS # - Efecto de desenfoque con CSS
Ocultar entradas con determinada etiqueta en el inicio de Blogger # - Ocultar entradas con determinada etiqueta en el inicio de Blogger