Hace ya tiempo,
Ivanna me preguntaba por un efecto que había visto en un
blog y que mostraba el
header como una sucesión de imágenes con cierto efecto de
fade. Ahora, llegó el momento de la explicación.
Se trata de un
script simple llamado
Image Cross Fader Redux que tiene dos versiones,
la más antigua es la que se veía en el ejemplo y una
más actualizada y flexible a la que basta modificarla un poco para que funcione en Blogger sin necesidad de alojar archivos.
Necesitamos entonces el
script que puede descargarse desde el sitio del desarrollador.
Como cualquier otro, lo colocamos antes de
</head>:
<script type='text/javascript'>
//<![CDATA[
... y aquí pegamos el contenido del archivo ...
//]]>
</script>
Agregamos un poco de estilo. A continuación, ponemos esto:
<style>
#imageContainer {
margin: auto;
position: relative;
}
#imageContainer {
height: VALORpx;
width: VALORpx;
}
#imageContainer img {
left:0;
position: absolute;
top:0;
}
</style>Allí, sólo cambiaremos VALOR por el ancho y alto de las imágenes que, por lógica, deben ser todas del mismo tamaño.
Por último, el HTML que agregaremos donde nos guste:
<div id="imageContainer">
<img src="URL_imagen_1" />
<img src="URL_imagen_2" />
<img src="URL_imagen_3" />
</div>
Como se ve, sólo es un DIV con un ID específico dentro del cual se colocan las etiquetas IMG de todas las imágenes que querramos mostrar.
Para aplicarlo en el header de Blogger, el proceso es el mismo, agregamos el script, el CSS y luego, sin expandir la plantilla, buscamos el header por defecto que, podemos eliminar o simplemente, ocultar para que no se muestre y de ese modo, si quisiéramos restaurarlo, bastaría hacer el proceso inverso. Eso, podemos hacerlo agregando lo siguiente en el CSS:
#header-wrapper { display: none; }Y el código HTML lo ponemos arriba de ese DIV del header:
<div id="imageContainer">
<img src="URL_imagen_1" />
.......
<img src="URL_imagen_N" />
</div>
<div id='header-wrapper'>
