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.
Ciudad Blogger
Creo que es una excelente variante, al banner cambiante del post anterior.
ResponderEliminarNo 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.
ResponderEliminarUn abrazo.
Tú determinas el tamaño con las imágenes.
EliminarPotro, ldebes ganar mucho xD!! bueno exitos, siguiendo como le haces para que este rotador tenga tiempo , que se valla cambiando por x tiempo..
EliminarPOTRO 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...
ResponderEliminarGracias por todo potro...
Hola Jorge,
ResponderEliminarNo 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
ResponderEliminarSyNiEsTrA:
ResponderEliminarEn 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,
ResponderEliminarGracias por animarte a decirlo, sólo de esa forma puedo saber si estoy haciendo las cosas bien o mal.
Saludos.
Hola Jpz,
ResponderEliminarMuchas 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
ResponderEliminarte agradeceria tu respuesta
}
me fascina tu pagina
Hola DisneyRocksMx,
ResponderEliminarCambia 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:
ResponderEliminar1-. 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,
ResponderEliminarGracias 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.
ResponderEliminarOrlando
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
ResponderEliminargracias anticipadas
Hola Luciano Carrasco,
ResponderEliminarPara 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...
ResponderEliminarlo 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)
ResponderEliminarAdemá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
ResponderEliminar¿aqui cómo se aplica el target='blank' ?
ResponderEliminar...
Pide empleo a google, Potro, te lo dan si o sí.
Jajaja, dudo siquiera que me dejen entrar de visita a las instalaciones :P
ResponderEliminarAl 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:
ResponderEliminarvar 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?
ResponderEliminarhola potro , en caso de archivos swf o banners flash que hay q hacer para q funcione , lo intente pero no va .. mil gracias..
ResponderEliminarLo desconozco, sólo tengo otro como este pero es para mostrar videos de YouTube :\
ResponderEliminarHola Potro ^^
ResponderEliminarNo 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.
ResponderEliminarHey Potro! .. Primero que todo, estoy agradecido eternamente por compartir tus conocimientos con nosotros ..
ResponderEliminarQuerí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.
ResponderEliminarSaludos.
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 :)
ResponderEliminarCon archivos object no conozco, lo mas parecido es este de videos al azar.
ResponderEliminarNo, no creo que rosa sea la mejor, sinceramente este blog me ha ayudado más
ResponderEliminarUsa este código y agrega ahí donde se indica los titles para cada imagen:
ResponderEliminar<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
ResponderEliminarAl inicio de la entrada hay un enlace para hacerlo de esa forma que deseas.
ResponderEliminarpotro 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?
ResponderEliminar¿En dónde lo has puesto?
ResponderEliminaren pokermaestro.blogspot.com esta en la sidebar derecha a lo ultimo...
ResponderEliminarperdon.. Es poker-maestro.blogspot.com!
ResponderEliminarEs que a las otras dos imágenes les has puesto esto:
ResponderEliminarwidth="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!!!!
ResponderEliminartengo 13 años y creo blogs desde los 11.
ResponderEliminarTu blog me es de gran ayuda.
Muchas gracias Alessandro, es inspirador saber que este blog ha podido servirte de ayuda :)
ResponderEliminarEs PERFECTO! . Muchísimas gracias!. Tu blog es el Dios de blogger jaja. Grande ;)
ResponderEliminarGracias por tu comentario ;)
ResponderEliminargracias men pero quiero saber como se ha hecho ese banner de la web de Ricardo arjona
ResponderEliminarlink: www.ricardoarjona.com
Exactamente como ese no sé, pero hay varias formas de poner banners a rotar:
ResponderEliminarhttp://ciudadblogger.com/2009/04/banner-cambiante.html
http://ciudadblogger.com/2010/08/anuncios-rotativos-con-jquery.html
gracias xevere
ResponderEliminaroe potro ya cheque y intente de todo pero no logro que me salga.
ResponderEliminarcheca: 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?
ResponderEliminarnose 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
ResponderEliminarSiento 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.
EliminarBuenas 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
ResponderEliminarDebajo de <script language="JavaScript"> agrega:
Eliminar//<![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
ResponderEliminar" 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). :)
ResponderEliminarBuenas 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.
ResponderEliminarSe 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.
EliminarSaludos.
oks, este es nuestro correo Inf.ThaisArion@gmail.com por si consigues lo del script me envías el enlace. buenas noches.
ResponderEliminarComo puedo hacer un widget de últimos videos de un canal de Youtube?
ResponderEliminarSaludos
No conozco algún gadget que haga eso :/
Eliminaruna pregunta como hago para qe las imagenes cambies solas sin presionar f5
ResponderEliminarmuy buen aporte
ResponderEliminaruna prgunta como hago para qe las imagenes cambien solas sin presionar f5 qe cambien automaticamente
Aquí hay otra opción que tal vez te interese:
Eliminarhttp://ciudadblogger.com/2010/08/anuncios-rotativos-con-jquery.html
hola potro muy bueno tu blog tengo un blog en wordpress y me gustaria saber si sabes de algun rotador de publicidad pero que funcione en .j, muchas paginas de publicifad trabajan con este tipo x ejemplo yo trabajo vom tlv media y ellos te dan por ejemplo el script ad.tlvmedia.js script solo es un ejemplo pero es muy parecido podria hacerla algo para rotarlo y generar mas impreciones? muchas gracias PD:no pueedo usar aqui los <> xq no me acepta
ResponderEliminarTe lo debo, no conozco alguno con esas características :/
EliminarPodría ser que con este puedas hacerlo, como admite imágenes podría ser que te admita el código de un script, no se pierde nada con intentar ;)
http://ciudadblogger.com/2010/08/anuncios-rotativos-con-jquery.html
muy bien potro, lo busq mucho, y llege q no lo encontraria, Se agradece n.n
ResponderEliminarHola, he tenido problemas con mi web por añadirle mucha publicidad y esto me parece un metodo muy bueno.
ResponderEliminarTengo un problema. Mis imagenes o baners son en formato swf (ejemplo http://img86.xooimage.com/files/b/a/2/sin-t-tulo-2-38f8eba.swf)
y no me deja añadirlo de tu forma. Hay alguna forma. Gracias
No lo he intentado, pero tal vez te sirva si cambias esto:
Eliminar<a href="'+link+'"><img style="border: 0px;" src="'+ image +'"></a>
Por esto:
<a href="'+link+'"><object width="400" height="100"><param name="movie" value="'+ image +'" /><param name="allowFullScreen" value="true" /><param name="allowscriptaccess" value="always" /><param name="wmode" value="transparent" /><embed src="'+ image +'" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="400" height="100" wmode="transparent"></embed></object></a>
Mil gracias. Aprendo mucho contigo! Funciona a la perfección!
EliminarHola, es posible rotar o simplemente mostrar anuncios por ip del visitante, al estilo adsense, pero para mostrar y/ o rotar anuncios de ofertas de cpa para paises específicos, se entiende? Gracias!
ResponderEliminarHola, es posible insertar un código que muestre anuncios por ip del visitante, digamos que quiero mostrarle un anuncio específico a visitantes de españa, otro a visitantes de méxico, otro a visitantes de argentina y otro al resto del mundo. Sería un rota baner por ip, digamos, como hace google con adsense. Es posible? Gracias!
ResponderEliminarNo, no es posible :(
Eliminarcuando lo coloco en el html de blogger me sale Error al analizar XML, línea 1381, columna 69: The element type "img" must be terminated by the matching end-tag /img.
ResponderEliminarNo se pone en la plantilla, se pone en un gadget HTML/Javascript como se indica.
Eliminarno hay forma de colocarlo dentro del html?
Eliminargracias por responder.
Mira el comentario #52.1
Eliminarmuchas gracias me sirvió, un abrazo desde Perú.
Eliminary una ultima pregunta para agregarle el target='_blank'
Mira el comentario #20 :)
Eliminarmuchas gracias por el post, se q capaz estoy preguntando muy tarde pero me podrias decir , si se puede cambiar enves de imagenes a html(un codigo de banner) ?
ResponderEliminarNop, es sólo para imágenes.
EliminarHola, interesante pero si yo lo deseo poner con una plantilla que meustra un banner arriba?, mi blog es este:
ResponderEliminarhttp://petersandovalm.blogspot.com
A la derecha del titulo tiene un banner deseo que sea aleatorio entre otros 5 que quiero agregar, como lo puedo hacer?
GRACIAS!!
No he comprendido Peter, pero al ser un script puedes añadirlo en cualquier gadget HTML/Javascript y ya estando ahí arrastrar dicho gadget hasta donde desees.
Eliminarte hago una pregunta,soy muy nuevo en esto,como hago para poner las publicidades?a mi me dejó poner una sola a traves de gadget y no encuentro la manera de por ejemplo como está acá en el tuyo,donde dice respondones,experimentos caseros y driver tex,no encuentro como hacerlo que quede como links,espero me hayas entendido y gracias pot tu ayuda
ResponderEliminarHola, en el ejemplo que citas son sólo imágenes con un enlace. Hay una entrada que habla de algo similar, de cómo poner un grupo de banners en la sidebar:
Eliminarhttp://ciudadblogger.com/2010/01/agregar-banners-de-125-x-125-en-la.html
buenos dias que tal ?? una pregunta este script para los banners cambiantes tambien pueden llamar archivos de swf q esten hechos a una medida??
ResponderEliminary otra preguntica este script puede ir en un pie de pagina? gracias
Hola armando, mira el comentario #62.1, en cuanto a lo otro, puedes poner el gadget en el elemento HTML/Javascript y luego en la sección Diseño arrastrarlo hasta donde quieras.
EliminarHola, tengo una duda, para abrir es una nueva pestaña como se haría?
ResponderEliminarHola, para abrir en una nueva ventana ¿que habría que hacer?
ResponderEliminarHola, mira el comentario #20
EliminarMagnífico aporte Potro.
ResponderEliminarEstoy intentando hacer lo mismo con un sistema de banners que se intercambien entre ellos en cuatro posiciones, no en la misma posición, cada vez que recargas página.
He probado a incluirle los cuatro banners, pero al ser aleatorio hay veces que sale el mismo en dos posiciones.
No se puede hacer para que aparezcan por orden? es decir, primero la 1, al cargar de nuevo la 2, después la 3, y por último la 4.
Si es así, creando cuatro banners y cambiando la primera imagen de los demás, me los rota entre ellos.
Como crees tú que puedo hacerlo??
Gracias
No se me ocurre una forma de hacerlo David. Me puse a buscar en la red algo parecido a lo que deseas pero no encontré nada :(
EliminarGracias. Sé que es dificil, pero sé de sitios donde lo utilizan, y por ello preguntaba.
EliminarHe investigado mucho hasta que he decidido preguntarte.
Sigue así Potro.
Si ves algún blog con esa característica pásame la dirección para revisar su código, con suerte y lo podemos usar ;)
EliminarPotro tengo un problema, me sale esto cuando intento ponerlo en un post...
ResponderEliminar"Su HTML no es aceptable: La etiqueta no es correcta. : A Ignorar"
Potro te dejare otra consulta, quisiera una marquesina o un rotador de banners (aver si me respondes lo primero ^^ xd), que rote de derecha a izquierda, y que cuando cambie se quede por unos 2 segundos antes de pasar al siguiente banner automaticamente, pero que la velocidad de cada cambio sea rapido, para fingir que es flash o algo asi, porque se ven horribles el movimiento de las marquesinas, o en el caso de que me respondas con lo del codigo espero la respuesta a mi primera pregunta... :D Saludos
ResponderEliminarHola levelnoob, todos los slideshows que he puesto en práctica están en la sección "Slideshows", revisa ahí, quizá encuentres alguno de tu interés.
EliminarEn cuanto a lo primero que preguntas, sólo dale click en "Ignorar".
Saludos.
gracias por la info solo tengo una duda se podra poner el barnner en las esquinas de mi block ya sea izquierda o derecha
ResponderEliminarNo sé si comprendo bien la pregunta antonio, pero en realidad tú puedes ponerlo en cualquier parte del blog donde se acepten gadgets. Es decir, que agregas el gadget y luego (en Diseño) lo arrastras hasta donde quieras colocarlo.
EliminarGracias por contesta disculpa si de repente no se explicarme yo lo he visto en otras paginas y la verdad me gusta como se ve mmmm aver aca pongo una imangen de donde lo quiero ubicar aver si se puede hacer algo http://i.imgur.com/avcswNz.png si no se puede de todos agradesco por el tiempo que nos inviertes
ResponderEliminar¡Saludos!
¿Te refieres a que sea flotante? Si es así, entonces localiza el ID del gadget HTML/Javascript donde pusiste el código del banner. Luego, ya teniendo el ID añade antes de ]]></b:skin> lo siguiente:
Eliminar#ID {
position: fixed;
bottom: 10px;
left: 10px;
}
En donde dice ID podrás justamente el ID del gadget, para que te des una idea, es algo como esto: HTML1
Gracias si me ayudo quedo genial O_o
EliminarHola potro ..... de nuevo molestando con una duda .... el banner funciona perfecto en todo sentido, pero quiero agregar unas imagenes más y no deja, me explico tengo 9 pero si agrego la linea
ResponderEliminarimages[10] y su respectivo link deja de funcionar apenas la quito ya, aclaro que tambien modifico el var imagenumber = 11;
pero si agrego la numero 10 muere, no se a que se deba y como lo puedo solucionar
Tal vez hay algún detalle que se te está pasando. Yo acabo de probarlo con 10 imágenes y funciona sin problema.
Eliminar