Anteriormente vimos cómo poner un rotador de banners en el blog. Ahora vamos a hacer uno pero que el banner muestre las imágenes al azar cada vez que un usuario entra a la página. Sólo necesitamos un script y las imágenes de los banners, todas deben tener el mismo tamaño.
Abre un elemento HTML/Javascript y pega ahí esto:
<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>
Agrega las URL de las imágenes donde se indica y si quieres que las imágenes tengan un enlace entonces agrégalo sustituyendo el signo de gato (#) por el link que le corresponde.
Incluso puedes agregar o eliminar más imágenes, sólo añade la línea que le corresponde.
Puedes ver un ejemplo en este blog de pruebas. Al cargar la página se verá un banner, si presionas F5 cargará otra imagen.
NOTA: Las imágenes cargan al azar y es posible que más de una vez cargue la misma imagen.
Creo que es una excelente variante, al banner cambiante del post anterior.
ResponderSuprimirNo me quiero imaginar lo que va a ser este blog en un año!!!
Hasta la misma Rosa vendrá a buscar info para hacer post. jajajajaaja.
Un abrazo!!!
Jaja, no creo, Rosa siempre será la mejor.
ResponderSuprimirUn abrazo.
y como se configura el tamaño?
SuprimirTú determinas el tamaño con las imágenes.
SuprimirPOTRO GRACIAS, DE VERDAD ERA LO QUE ESTABA BUSCANDO... sabes necesitaba ese codigo para ponerlo al costado de los comentaristas anonimos, queria una imagen que sea diferente y los resultados fueron geniales...
ResponderSuprimirGracias por todo potro...
Hola Jorge,
ResponderSuprimirNo estaba seguro si esto era lo que querías pero creo que le atiné, jeje.
Un saludo.
x fin encontre Justo lo que necesitaba, solo quería decirlo, ja, gracias
ResponderSuprimirSyNiEsTrA:
ResponderSuprimirEn Ciudad Blogger encuentras todo para que, realmente, tu blog se vea un 100%. Además con ese administrador (ElPotro), que más pedir.
Este blog nos ha ayudado a muchos que, como yo, comenzamos de 0 (talvez de -0).
Aunque suene a "publicidad o majadero", cuando algo funciona "Hay que decirlo".
Te debo muchas Potro y esta es una manera (humilde) de devolver la mano.
He dicho!
Jajaja.
Saludos.
Jpz.-
Hola SyNiEsTrA,
ResponderSuprimirGracias por animarte a decirlo, sólo de esa forma puedo saber si estoy haciendo las cosas bien o mal.
Saludos.
Hola Jpz,
ResponderSuprimirMuchas gracias por tus palabras. Cuando tenga dinero te contrataré como mi publicista, jaja.
Saludos =)
Puedo colocar más de cuatro que biene ahi, si entiendo que se puede pero tengo que cambiar algo o que
ResponderSuprimirte agradeceria tu respuesta
}
me fascina tu pagina
Hola DisneyRocksMx,
ResponderSuprimirCambia la parte de arriba por el número total de imágenes que vas a poner:
var imagenumber = 4;
Luego abajo agrega esa línea:
images[4] = "URL del banner 5";
Y un poco más abajo agrega esta otra:
links[4] = "#";
Eso deberás hacerlo por cada imagen que quieras agregar. Sólo fíjate que los números sean consecutivos.
Saludos!
Buenas tardes amigo Potro, excelente este post, me ayudo mucho, pero como escribiste en uno de tus post yo utilizo una entrada a modo de pagina de inicio, dejandola siempre arriba de las otras entradas, me sirvio mucho ya que hace tiempo queria colocar varias imágenes y no sabia como hacerlas, se te agradece, pero tengo 2 interrogantes que vienen a ser variantes de este Post:
ResponderSuprimir1-. Como hago para que las imagenes queden centradas
2-. Como hago para proteger estas imagenes ? Utilice lo que dijistes en el Post: "Protege tus imagenes" y me sirvio a la perfección, pero quiero aplicar las 3 modalidades a una misma entrada, es decir: Que las imágenes cambien al azar, que esten centradas y evitar que las descarguen.
Se que es algo complicado y abusivo de mi parte pero te agradeceria lo que puedas hacer por mi, no indico la direccion del blog por que es un blog personal que hice con fotos de mi esposa, de antemano muchas gracias por todos los consejos anteriores.
Post Data: Soy Administrador de Aduanas no programador así que disculpa mi ignorancia.
Orlando
Venezuela
Hola Kansei,
ResponderSuprimirGracias por tus comentarios, me alegra que algunos posts te hayan sido de ayuda.
Para centrar las imágenes encierra el código entre <center> y </center>
Proteger estas imágenes con esa función no es posible =(
Saludos.
Gracias por tan rapida respuesta, lo probé y funciono perfectamente, lastima que no se puedan proteger, una vez mas felicitaciones y muchas gracias.
ResponderSuprimirOrlando
venezuela
Hola, quiero poner unas imagenes rotativas en la cabecera de mi blog, mi plantilla es la minima black, ¿puedo utilizar este codigo, o se haría de diferente manera? tengo un reproductor de mixpod y quiero poner videos de youtube, el reproductor está en auto, y se me solapan los sonidos, ¿hay alguna opción para que cuando se reproduzca el video, se pare el reproductor y continue, cuando se pare la reproducción de youtube? Mi blog es compases de amargura
ResponderSuprimirgracias anticipadas
Hola Luciano Carrasco,
ResponderSuprimirPara tener una cabecera que cambie de imagen sigue este tutorial:
http://ciudadblogger.com/2009/07/cabecera-del-blog-cambiante-al-azar.html
No existe tal opción, forzosamente tendrías que quitar el autoplay de alguno de los dos.
Saludos.
graxx me sirvio de mucho, pero no precisamente para cambiar el banner xD...
ResponderSuprimirlo que pasa es que hace poco creé un nuevo blog de música (Powermetal) se me ocurrió cambiar un poco el código de este post y creé un visor de videos que los mostrara al azar de modo de publicidad y lo pusé en mi 2º blog que igual tiene una buena cantidad de visitas (por lo menos para mi xD), pero se me ocurrió subir el archivo .js a internet, y ahora está el problema...
es algo un poco tonto, pero es que no sé como llamar el javascript desde mi blog.
Me podrias decir el codigo x fa....cosa de que sólo se llamé al javascript, porque dentro de el tengo tambien el codigo html de ir a mi otro blog (en document.write)
este es el archivo
http://bit.ly/cotiXl
y acá en mi blog se puede ver el script en funcionamiento (es lo primero...dice Test)
http://xblogsinnombre.blogspot.com/
eso sería....gracias d antemano....
Desde ahí no creo que puedes hacerle un llamado dado que el script no tiene un nombre de función, y sin un nombre de función no hay a dónde llamarlo (es como un teléfono sin número a dónde marcarle)
ResponderSuprimirAdemás no es nada recomendable que tengas tus scripts alojados en un servicio externo, siempre cargará más rápido si están alojados en el blog.
Saludos.
ok, grax
ResponderSuprimir¿aqui cómo se aplica el target='blank' ?
ResponderSuprimir...
Pide empleo a google, Potro, te lo dan si o sí.
Jajaja, dudo siquiera que me dejen entrar de visita a las instalaciones :P
ResponderSuprimirAl final del código cambia:
<a href="'+link+'">
Por esto:
<a href="'+link+'" target="blank">
Hola Potro, me estas ayudando mucho con los blogs que tengo, sin embargo no puedo conseguir lo q mas deseo: tener un header aleatorio, segui todo esto que dice aqui y un momento estuvo funcionando pero despues nose q paso q dejo de hacerlo, subi todas las imagenes a dropbox y tienen el mismo tamaño. agregue un par de imagenes mas,cambie esta linea:
ResponderSuprimirvar imagenumber = 4; (por el numero de imagenes menos 1)
no les puse enlace a ninguna...no se q paso, espero puedas ayudarme
¿En cuál blog lo tienes puesto?
ResponderSuprimirhola potro , en caso de archivos swf o banners flash que hay q hacer para q funcione , lo intente pero no va .. mil gracias..
ResponderSuprimirLo desconozco, sólo tengo otro como este pero es para mostrar videos de YouTube :\
ResponderSuprimirHola Potro ^^
ResponderSuprimirNo se podria hacer que en vez de que las imagenes roten al azar, siga el orden en que se colocaron? o.o
Ummm no, únicamente es aleatorio.
ResponderSuprimirHey Potro! .. Primero que todo, estoy agradecido eternamente por compartir tus conocimientos con nosotros ..
ResponderSuprimirQuería preguntarte si existe una forma de colocar por ejemplo un cuadro al azar .. ¿Cuál es el fin? .. un cuadro tipo "Acerca del Autor" .. pero al azar .. Para que mis lectores conozcan los autores..
Este cuadro pretendo ubicarlo en mi Sidebar..
Gracias por tu tiempo chaval ;)
Pues de hecho puedes usar este mismo método, sólo que toda la información la tendrías que meter en una imagen y así mostrarás a los autores al azar.
ResponderSuprimirSaludos.
hola potro y se puede hacer banners aleatorios como este, pero en vez de que contenga una imagen, contenga un objeto object? y si es asi sabes como seria el codigo para llevarse a cabo, gracias :)
ResponderSuprimirCon archivos object no conozco, lo mas parecido es este de videos al azar.
ResponderSuprimirNo, no creo que rosa sea la mejor, sinceramente este blog me ha ayudado más
ResponderSuprimirHola Potro, como hago si quiero darle un title a cada imagen del rotador?
ResponderSuprimirGracias.
Usa este código y agrega ahí donde se indica los titles para cada imagen:
ResponderSuprimir<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] = "#";
titles = new Array;
titles[0]="Titulo 1";
titles[1]="Titulo 2";
titles[2]="Titulo 3";
titles[3]="Titulo 4";
var image = images[rand1];
var link = links[rand1];
var title = titles[rand1];
</script>
<script>document.write('<a href="'+link+'" title="'+title+'"><img style="border: 0px;" src="'+ image +'"></a>')</script>
Saludos.
como puedo conseguir poner un banner el cual esta cambiando cada 8 segundos las imagenes y que la gente pueda dar click en la imagen que le interese y mandarlos a una pagina web me gustaria para publicidad
ResponderSuprimirAl inicio de la entrada hay un enlace para hacerlo de esa forma que deseas.
ResponderSuprimirpotro estoy dele intentar poner este gadget y no se ven los banner.. los pongo todos del mismo tamaño y he comprobado los links de las imagenes y todo pero solo se ve el titulo del gadget y no los banners.. que sera?
ResponderSuprimir¿En dónde lo has puesto?
ResponderSuprimiren pokermaestro.blogspot.com esta en la sidebar derecha a lo ultimo...
ResponderSuprimirperdon.. Es poker-maestro.blogspot.com!
ResponderSuprimirEs que a las otras dos imágenes les has puesto esto:
ResponderSuprimirwidth="120" height="240" border="0""
Eso no debe ir, sólo la URL de la imagen y nada más.
Como se trata de un script tendrás que editar las imágenes si quieres que tengas un tamaño específico.
muy bueno, potro!!!!
ResponderSuprimirtengo 13 años y creo blogs desde los 11.
ResponderSuprimirTu blog me es de gran ayuda.
Muchas gracias Alessandro, es inspirador saber que este blog ha podido servirte de ayuda :)
ResponderSuprimirEs PERFECTO! . Muchísimas gracias!. Tu blog es el Dios de blogger jaja. Grande ;)
ResponderSuprimirGracias por tu comentario ;)
ResponderSuprimirgracias men pero quiero saber como se ha hecho ese banner de la web de Ricardo arjona
ResponderSuprimirlink: www.ricardoarjona.com
Exactamente como ese no sé, pero hay varias formas de poner banners a rotar:
ResponderSuprimirhttp://ciudadblogger.com/2009/04/banner-cambiante.html
http://ciudadblogger.com/2010/08/anuncios-rotativos-con-jquery.html
gracias xevere
ResponderSuprimiroe potro ya cheque y intente de todo pero no logro que me salga.
ResponderSuprimircheca: www.southparklatino.com.mx
en la parte de la derecha hasta abajo dice capitulo aleatorio.
esta en blanco, pero el código es el mismo.
No está ne blanco, yo lo veo funcionando bien. ¿Ya probaste verlo en otro navegador?
ResponderSuprimirnose si me podras ayudar en un tema ... tengo un blog creado con el artister 3. (ultima version) y en mi blog de pruebas solo con poner el javascript me toma la cabezera (aclaro que el blog de prueba tiene un template predeterminado de blogger)las imagenes tienen el mismo tamaño pero en el blog creado con artister tiene supongo mas html y cuando coloco este js me toma la imagen rotativa pero me muestra solo la imagen no el blog ni la cabezera dentro del blog.... me explico , el js me redirecciona a lo que pareceria una vista previa y nose que tendre que tocar para que funcione tal vez alguien me puede dar una mano
ResponderSuprimirSiento no poder ayudarte Haste, pero estoy bastante distanciado de las plantillas hechas con Aristeer ya que su estructura es muy distinta a las habituales, además que usan muchos scripts que son incompatibles con muchas cosas.
SuprimirBuenas potro, tengo una duda como puedo poner estre script dentro de la plantilla ya que mi platilla no puedo poner wigets donde quiero poner las imagenes. Hay otra forma para poder colocarlo dentro de la Plantilla
ResponderSuprimirDebajo de <script language="JavaScript"> agrega:
Suprimir//<![CDATA[
Y antes de </script> agrega:
//]]>
Luego pega todo en donde quieras mostrar las imágenes, en alguna parte después del <body>
Buen Post
ResponderSuprimir" http://www.inmofusa.com "
Gracias mil Potro. Esta entrada me funcionó mil veces mejor que la pasada... en la que te deje comentario (la que linkeas al inicio). :)
ResponderSuprimirBuenas tarde... es mi primer comentario, por la cual acudo a usted es porque acabo de publicar este script en mi blog y funciona muy bien... Ese no es el problema. la cosa es que necesito una ayuda. Y lo hago por este medio, porque no encuentro otra manera de llegar hacia usted. http://thaisarion.blogspot.com/ este es mi blog (THAIS ARION), como podras ver en la parte inferior estan 4 canciones, pues quisiera que me ayudara a que esas cuatro canciones sean rotativas. que cada vez que alguien entre o actualice salgan canciones diferentes. Saludos, espero su respuesta con gran interes.
ResponderSuprimirSe despide Ernesto Sánchez el administrador del blog.
Buenas noches Thais Arion. Deja busco algún script que haga algo similar y preparo una entrada sobre ello.
SuprimirSaludos.
oks, este es nuestro correo Inf.ThaisArion@gmail.com por si consigues lo del script me envías el enlace. buenas noches.
ResponderSuprimirComo puedo hacer un widget de últimos videos de un canal de Youtube?
ResponderSuprimirSaludos
No conozco algún gadget que haga eso :/
Suprimir