Como poner un banner cambiante

5.8.15









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

6 comentarios:

  1. ¡Hola!
    Gracias por poner este tipo de tutoriales :) Yo soy un poco negada para estas cosas y siempre está bien aprender un poco más.
    Un beso^^

    ResponderEliminar
  2. Hola!, muy bonito, muchas gracias, me va a servir en un futuro :D, oye, crees que podrías hacer un tuto para que la miniatura a la hora de compartir el enlace salga la portada del libro o algo así?, gracias

    ResponderEliminar
  3. Muchas, muchas gracias por hacerme la vida más fácil. Perdón por la tardanza pero es que se me acumularon montañas de entradas y vídeos en los días que estuve fuera. Mañana con un poco más de calma y tiempo me pongo a moverle y si no me sale te molestaré haha.

    Saludos :D

    ResponderEliminar
  4. Wow... hace tiempo que quería uno de estos, en serio me gusto mucho, lo aplicaré a mi blog... gracias :D

    ResponderEliminar
  5. ¡Hola! He estado buscando esto desde hace unos meses, me gusta jugar con el html pero cuando he colocado el código en la plantilla me salen varios errores XML. ¿Podrías explicarme a qué se deben? Y así terminar de colocarlos.
    Gracias madrina :)

    ResponderEliminar
    Respuestas
    1. ¡Hola Linda!
      te salé error cuando colocas el primer código? o en que paso te aparece el error?

      Eliminar