ago082014
Leslie Mishigan

Banners aleatorios con cada refresco de página

B, Tutoriales

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 …

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

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 Kawaii, Deja el tuyo!

  1. David Vazo dice:

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

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

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


Deja tu Comentario Kawaii

Tu opinión es importante, deja tu comentario; si no tienes una cuenta te invito a que te Registres y si ya tienes una Conectate.



A %d blogueros les gusta esto: