Como poner un banner cambiante

Y aqui esta otro tutorial para dejar super lindo y funcional tu blog, en este caso con un banner cambiante o rotador de banners. *Click aquí para ver un ejemplo*

C Ó D I G O   H T M L

Primero vamos a tener que mover un poco nuestro código así que recuerden siempre guardar una copia de seguridad.

Entremos a Plantilla | Editar HTML y con Ctrl+F buscamos </head> y justo antes de eso pegamos el siguiente código:

css.setAttribute('type','text/css');
d.getElementsByTagName('head')[0].appendChild(css);
imgs = d.getElementById('rotator').getElementsByTagName('img');
for(i=1;i<imgs.length;i++) imgs[i].xOpacity = 0;
imgs[0].style.display = 'block';
imgs[0].xOpacity = .99;
setTimeout(so_xfade,3000); }
function so_xfade() {
cOpacity = imgs[current].xOpacity;
nIndex = imgs[current+1]?current+1:0;
nOpacity = imgs[nIndex].xOpacity;
cOpacity-=.05;
nOpacity+=.05;
imgs[nIndex].style.display = 'block';
imgs[current].xOpacity = cOpacity;
imgs[nIndex].xOpacity = nOpacity;
setOpacity(imgs[current]);
setOpacity(imgs[nIndex]);
if(cOpacity<=0) {
imgs[current].style.display = 'none';
current = nIndex;
setTimeout(so_xfade,3000);}
else {
setTimeout(so_xfade,50);
}
function setOpacity(obj) {
if(obj.xOpacity>.99) {
obj.xOpacity = .99;
return; }
obj.style.opacity = obj.xOpacity;
obj.style.MozOpacity = obj.xOpacity;
obj.style.filter = 'alpha(opacity=' + (obj.xOpacity*100) + ')';
}
}
//]]>
</script>

Revisamos que todo este bien en nuestro blog y damos en Guardar Plantilla.

P E R S O N A L I Z A R   E L   C S S

Ahora nos dirigimos a Plantilla | Personalizar | Avanzado | Añadir CSS

y ahí pegaremos lo siguiente:

/* BANNER CAMBIANTE
----------------------------------------------- */
#rotator {
border: 1px solid #000000;
overflow: hidden;
margin: 0px ;
padding:2px;
position: relative;
width: 430px;
height: 60px;
}
#rotator img {
width: 430px;
height: 60px;
border: 0;
margin: 0;
padding: 0;
}

E X T R A S

Aquí va a ser necesario que tú acomodes a tu gusto y necesidad los valores. Empezando con el tamaño de las imágenes, todas tienen que ser del mismo tamaño para que se vea uniforme así que como un inicio te recomiendo mover los valores de Width/Ancho y Height/Alto para que sepas el tamaño que tendrán que tener tus imágenes.

Aplicar al blog y ¡Listo!

A Ñ A D I R   G A D G E T

Ya hemos llegado a la parte final, ahora solo agregaremos un gadget en donde irán nuestras imágenes.

Vamos a Diseño | Añadir un Gadget | HTML/Javascript y pegamos lo siguiente:

<div id="rotator">
<a href="URL DEL ENLACE"><img alt="TITULO" src="URL DE LA IMAGEN" title="TITULO"/></a>
<a href="URL DEL ENLACE"><img alt="TITULO" src="URL DE LA IMAGEN" title="TITULO"/></a>
<a href="URL DEL ENLACE"><img alt="TITULO" src="URL DE LA IMAGEN" title="TITULO"/></a>
<a href="URL DEL ENLACE"><img alt="TITULO" src="URL DE LA IMAGEN" title="TITULO"/></a>
</div>

E X T R A S

Si quieres agregar más imágenes sólo necesitas agregar una nueva linea de <a href="URL DEL ENLACE"><img alt="TITULO" src="URL DE LA IMAGEN" title="TITULO"/></a>
Así cuantas veces quieras recordando dejar siempre hasta el final </div>