Rotando imagenes en la cabecera

Hace unos días veíamos la forma de instalar en el blog un widget rotador de imágenes, desde esa publicación son varias las personas que me han preguntado si el mismo widget podría usarse en la cabecera (header) del blog.

Lo he estado probando y el resultado podéis verlo en este blog de pruebas.

[1] Como en la entrada anterior, el primer paso sería disponer de la url de las imágenes que vamos a utilizar y que tendrán todas ellas las mismas medidas.
Estaría bien que estas medidas (al menos su ancho) fuesen las mismas que las que estén aplicadas en vuestra cabecera, aunque no es imprescindible.

[2] A continuación tenemos que descargar el archivo javascript a nuestra PC y subirlo a un alojamiento de archivos.
Una vez allí nos hayan proporcionado la url del archivo, la colocaremos antes del </head> de nuestra plantilla:

<script src='URL_DEL_ARCHIVO' type='text/javascript'/>

[3] Incluimos ahora el código CSS necesario en nuestra plantilla antes de la etiqueta ]]></b:skin>:

/* ROTADOR DE IMAGENES
----------------------------------------------- */
{
margin: 0;
padding: 0;
}
#rotator
{
border: 5px solid #CC0000;
overflow: hidden;
margin: 0 ;
padding:0;
position: relative;
width: 660px;
height: 173px;
}
#rotator img
{
border: 0;
width: 660px;
height: 173px;
}

Donde dice: width: 660px; y height:173px; colocamos los valores del ancho (width) y alto (height) de las imágenes que vayamos a usar.

Como podéis apreciar, yo he puesto en width (ancho de la imagen) una medida de 660px, que es el ancho de las imágenes que voy a usar y que se corresponde exactamente con el ancho de la cabecera en una plantilla Mínima de Blogger.

[4] Localizamos ahora esta línea en el código de nuestra plantilla:

<div id='content-wrapper'>

Colocaremos ahora antes de esa línea el código para mostrar las imágenes:

<div id="rotator">
<a href="url_de_la_página_web"><img alt="" src="url_de_la_imagen" title=""/></a>
<a href="url_de_la_página_web"><img alt="" src="url_de_la_imagen" title=""/></a>
<a href="url_de_la_página_web"><img alt="" src="url_de_la_imagen" title=""/></a>
<!-- Podemos poner todas las imágenes que queramos, siempre dentro del div-->

</div>

Aquí incluiremos la url de cada imagen que vamos a mostrar.
Lo más lógico será incluir en donde dice "url_de_la_página_web" la dirección del blog donde vamos a colocar las imágenes.
En "alt" y "title" pondremos el título del blog.

[5] Si en este punto hacemos "vista previa" tendríamos que ver la cabecera original y, justo debajo, la nueva cabecera.
Vamos ahora a ocultar la cabecera original, para hacer esto localizamos esta línea de código en el CSS:

#header-wrapper{

Justo debajo, colocamos esta línea de código:

height:0px; visibility:hidden; display:none;

[6] Guardamos cambios.

Nota:
Si ya hemos aplicado el truco para la rotación de imágenes en otra parte del blog, no podemos usarlo de nuevo sin modificar antes el script y los otros códigos.