Rotador de Banners

Para poner en tu blog un rotador de banners o imagenes cualquiera, como el que se encuentra en la página principal, sólo debes hacer lo siguiente:

Entra a Plantilla | Edición de HTML y pega antes de </head> lo siguiente:


<script type='text/javascript'>
//<![CDATA[
window.addEventListener?window.addEventListener('load',so_init,false):window.attachEvent('onload',so_init);
var d=document, imgs = new Array(), zInterval = null, current=0, pause=false;
function so_init() {
if(!d.getElementById || !d.createElement)return;
css = d.createElement('link');
css.setAttribute('href','slideshow2.css');
css.setAttribute('rel','stylesheet');
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>



Luego pegamos los estilo antes de la etiqueta </b:skin>



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



Y finalmente añadimos un gadget HTML con el siguiente código:



<div id="rotator">
<a href="URL del enlace"><img alt="Título" src="URL de la imagen" /></a>
<a href="URL del enlace"><img alt="Título" src="URL de la imagen" /></a>
<a href="URL del enlace"><img alt="Título" src="URL de la imagen" /></a>
<a href="URL del enlace"><img alt="Título" src="URL de la imagen" /></a>
</div>


Y listo