Rotador de banners

Veremos la manera de poder incluir banners con imágenes ya que es bueno aveces tener en orden las fotos o la publicidad a mostrar para ello realizaremos este post con la idea de mi amigo el potro, bien para lograr un banner cambiante como el siguiente:

Bien para que lo coloquemos haremos lo siguiente: Diseño > Edición de HTML y antes de </head> 

<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>

Ahora antes de  ]]></b:skin> lo siguiente:

/* 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;
}

Las medidas las puedes cambiar de acuerdo al espacio de tu blog o del diseño que deseas, para ajustar el ancho cambia donde dice width y para cambiar el alto en height.

Por último entra a Diseño > Elementos de la página > Añadir un gadget > HTML/Javascript y pega lo siguiente:

<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>

Cambia los datos de la URL del enlace e imagen y listo.

En color azul se indica el tiempo en milisegundos que tarda en cambiar cada banner, se puede modificar por otro valor.

Si deseas únicamente que este la imagen y el titulo puedes colocar el siguiente código:

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

Bien como vimos es una manera de colocar un banner sea de publicidad,juegos, imágenes o de lo que nosotros necesitemos.

Posted in: Blogger, Gadget