Tutorial. Poner banner de imágenes rotativo en blogger.

Hola a todos, últimamente habéis visto un bánner que va cambiando de imagen cada tantos segundos.

Lo mismo os gustaría tener algo de eso en vuestro blog, con imágenes que vayan cambiando.

Para implementarlo tenemos que hacer unos sencillos pasos:

Iremos al PANEL DE CONTROL DE BLOGGER-PLANTILLA-EDICIÓN HTML-CONTINUAR-EXPANDIR PLANTILLAS DE ARTILUGIOS.

Ahora daremos a la vez a control+f
Y se nos abrirá una ventanita donde escribiremos </head>, cuando lo hagamos la pantalla se nos irá a esa línea de comandos.

Justo encima de </head>, que ahora tendremos marcado de naranja, pondremos este código:

<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,4000); }
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,4000);}
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>

Fijáos que donde pone so_xfade,4000, sería el tiempo, ahora mismo estaría preparado el tiempo de rotación de imágenes para 4 segundos, 5000 serían 5 segundos, etc, vosotros ya sabréis el tiempo que queréis ponerle, lo cambiáis en las dos cifras del código que pone 4000 o si os viene bien con 4 segundos, no toquéis nada.

Bien, ahora, borraremos en la ventanita que nos salió al darle a control + f lo que pusimos de </head> y pegaremos esto:

]]></b:skin>

Al ponerlo los mandará a su línea de comando y lo tendremos marcado de naranja, encima de esa línea pegaremos este otro comando.

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

Siendo width lo ancho de la imagen y height lo alto, puedes jugar también con eso, dependiendo de la imagen que quieras poner, eso sí, todas deberán ser del mismo tamaño para que quede curiosito.

Si cambias, cámbialo en los dos sitios que pone width y height.

GUARDAR PLANTILLA.

Iremos de nuevo al panel principal de control de blogger.

DISEÑO-NUEVO GADGET-HTML/JAVASCRIPT

Pegamos esto:

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

Aquí tenemos dos historias, esta primera sería para que al salir un bánner, al picar en él, lo enviase al sitio de origen, por ejemplo si fuesen bánners de blogs amigos, mandaría al blog al que perteneciese ese bánner.

El proceso sería, donde pone url del enlace, la dirección web de donde quieras que mande ese banner. Título, el nombre identificativo. Url de la imagen, donde la tenemos alojada, por ejemplo en dropbox, donde la cogiérais para ponerla.. en cualquier sitio que albergue imágenes, eso ya es al gusto pero es imprescindible que esté alojada en algún sitio. Yo para eso, uso dropbox, cuyo tutorial está puesto también en el blog.

Si no quieres que manden a ningún sitio las imágenes cambiantes sino, solamente que se ven cambiar en tu blog:

<div id="rotator">
<img alt="Nombre" src="url de la imagen" /></div>

Tened en cuenta que yo no he puesto el código más grande, eso ya depende las imágenes que queráis mostrar.

Por ejemplo, si fuesen 5, sería:
<div id="rotator">
<img alt="Nombre" src="url de la imagen" />
<img alt="Nombre" src="url de la imagen" />
<img alt="Nombre" src="url de la imagen" />
<img alt="Nombre" src="url de la imagen" />
<img alt="Nombre" src="url de la imagen" /></div>

Siendo </div> el cierre de los comandos,
eso ya es dependiendo de las imágenes que queráis salgan en el bánner, podéis poner muchas, cada una con un <img alt.....

Siempre lo podremos cambiar para quitar, poner más imágenes, poniendo su url y su nombre en otro comando...... o quitando su línea correspondiente si la queréis anular.

Damos a GUARDAR.
Y a disfrutar.