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.

Comentarios

  1. Esta entrada me la guardo en favoritas, porque está muy interesante y es algo que siempre he querido aprender, muchas gracias.

    Besos.

    ResponderEliminar
  2. yo tb. la guardo, pero Dani, sabes lo que me pasa a mi? que me da miedo, cagarlaaaaaaaa, porque pienso que me voy a dejar un comando sin poner y se me va a ir todo.

    en fin yo tendría que imprimir tu entrada e ir poco a poco con tranquilidad y buenos alimentos, ahh y sudando como pollo mantudo, jejeje

    un beso maestro. Amelia.

    ResponderEliminar
  3. Muchas gracias hace tiempo puse una aunque era menos complicada solo era para poner franjita con movimiento. Me dio pereza renovarla tal vez algun rato me animo y hago lo de tu banner.

    ResponderEliminar
  4. Hola Dany: Como siempre se agradece tus tutos!!!
    Veré si me animo a llevarlo a cabo y no solo leerlos ;)
    Besitos =)

    ResponderEliminar
  5. MUCHAS GRACIAS LO HARE ESPERO TENER EXITO GRACIAS

    ResponderEliminar
  6. Hola, disculpa sabrás porque en mi banner las imágenes no salen sólo en un recuadro y salen en forma horizontal todas

    ResponderEliminar
  7. Este comentario ha sido eliminado por un administrador del blog.

    ResponderEliminar
    Respuestas
    1. Hola Brenda, fíjate en el segundo script que hay que usar, el de BANNER CAMBIANTE.
      Donde pone Wicht, es el ancho, y Height, el alto.
      Para modificar al tamaño de tu imagen, primero tienes que saber ese tamaño y que todas sean del mismo.

      Por ejemplo, si fuesen de 50 de ancho y 150 de largo, pues tienes que modificar ese script en esas cifras, si pones igual al que está aquí de ejemplo, te saldrán de 430 x 60.

      Saludossss

      Eliminar
  8. Hola amigo!Tengo una problemia con banner rotador!Lo quero insertar frente nombre de blog y no me sale!Puedes ayudarme???Mi blog http://opaaaaaaaaaa.blogspot.de/ gracias de antemano!

    ResponderEliminar
    Respuestas
    1. Hola Jorge, Tienes las imágenes deseadas subidas a alguna web de subida de imágenes? cogiste las urls de esas imágenes?

      Es que no sé en qué paso te has quedado, explícanos más y te ayudamos.

      Saludos.

      Eliminar
    2. Hola!Intentado insertar banner rotador de varios formatos,pero no me aparace en sitio adequado(derecha de nombre de Blog).No me sale configurar lo!Que me falta acer que podeis aydarme???Gracias

      Eliminar
    3. hola Jorge, creo que te refieres al lado de la cabecera.
      Si es así, tienes que seguir los pasos del tutorial para eso, luego, podrás tener la cabecera y un gadget al lado.

      http://podemos-juntos.blogspot.com.es/2013/05/tutorial-blogger-como-dividir-la.html

      En ese post lo verás más claro.

      Si te fijas en nuestro blog, verás el título y al lado el gadget de seguidores, en tu caso sería un html con el bánner rotativo.

      Saludos.

      Eliminar
  9. Este comentario ha sido eliminado por un administrador del blog.

    ResponderEliminar
  10. Tal vez blogger haya "capado" esta función.
    Es que hace tiempo que se publicó este tutorial y como lo cambian todo...
    Si tengo tiempo haré la prueba en un blog que tenemos para eso.
    Antes sí funcionaba porque, de hecho, aquí, en el blog hemos usado precisamente esto.
    Saludos.

    ResponderEliminar

Publicar un comentario

Recuerda darnos un +1 y comentarnos, nos haces seguir adelante.

Entradas populares de este blog

Tutoriales. Usar Wii Backup Manager para convertir juego en ISO a WBFS

Tu partida no es un adiós (Dedicado a nuestra compañera María Esther Borrero, Anescris)

Tutorial del cubo Barrel 3x3x3.