Banners aleatorios con cada refresco de página

Bueno estoy de nuevo aquí con un nuevo tutorial xDD... hace poco un amigo me pregunto sobre como hacer banners aleatorios al refrescar la página o al navegar... bueno obviamente al navegar el sitio se refresca, y aca les tengo una pequeña solución pero que realmente realiza bien su función :3 ... este código se puede hacer para practicamente todo lo que ustedes quieran, desde efectivamente los banners o la cabecera del blog, hasta mostrar dibujos, fotos o imagenes que ustedes quieran como una galeria y que al refrescar se puedan observar diferentes, también se podria utilizar para colocar entradas mediante sus imagenes, en fin, para lo que se les ocurra, además! pueden colocar donde ustedes quieran :3 .

Bueno simplemente copien el siguiente código en un gadget/widget HTML o en cualquier entrada, o en la cabecera o en el footer o donde se les pegue la gana XD ...

[java]<script language="JavaScript">
var imagenumber = 4;
var randomnumber = Math.random();
var rand1 = Math.round( (imagenumber-1) * randomnumber);

images = new Array;
images[0] = "URL del banner 1";
images[1] = "URL del banner 2";
images[2] = "URL del banner 3";
images[3] = "URL del banner 4";


links = new Array;
links[0] = "#";
links[1] = "#";
links[2] = "#";
links[3] = "#";

var image = images[rand1];
var link = links[rand1];
</script>

<script>document.write('<a href="'+link+'"><img style="border: 0px;" src="'+ image +'"></a>')</script>[/java]

Si lo quieren poner el la cabecera, para los que usan blogger, primero deben deshacerse de la cabecera, eliminandola u ocultandola o editando más el html y colocar este código directo donde deberia ir la cabecera... yo les recomiendo que solo oculten la cabecera y coloquen un gadget html y ya para que no pase nada feo con sus plantillas, para wordpress o cualquier otro lado es mucho más sencillo porque no estamos atados a plantillas, en el caso de wp de "pago".

Si quieren colocar más o menos imagenes en el rotador simplemente editen la parte de imagenumber a la cantidad de imagenes que quieran (recuerden que el 0 cuenta también), y agregar o eliminar el pedazo de código que se encarga de agregar la imagen y la url... o sea images[4] = "URL del banner 5"; y links[4] = "#"; .

Bueno eso es todo por hoy ^^!!

6 comentarios:

  1. Gracias por compartir los secretos del universo con nosotros Lesliesita ^^ .. en cuanto tenga lista la plantilla te la mostraré ^^
    Un abrazo!

    ResponderEliminar
  2. Jejejejejejeje de nada ^^, próximamente más secretos del universo xDD...

    ResponderEliminar
  3. Vea pues, interesante truco. Tienes un lindo blog. Besos***

    ResponderEliminar
  4. Muchas gracias Tania ^^ jejeje, que bueno que te sirva :3 o te interese :P saludos

    ResponderEliminar
  5. Hola, me ha encantado el diseño y funcionabilidad de tu página, además los iconos del feed, transparencia de color negro. saludos

    ResponderEliminar
  6. Muchas gracias :D que bueno que te haya gustado ^^ jejejje personalmente a mi también xD!

    ResponderEliminar