viernes, 18 de abril de 2008

Banner aleatorio para blogger y cualquier web sin editar el HTML de tu plantilla

Alternativa: Banner aleatorio con vinculos individuales
Este javascript nos sirve para poner un baner o banner rotatorio que cambia cuando damos clic a algún vínculo del sitio.

Me costo un poco de trabajo activarlo debido a que blogger funciona de una manera rara a veces y arreglar las comillas y tildes de la secuencia de comando para hacerlo funcionar.

Esta es una versión alternativa al script de Freeyasoul, lo mejor de esta versión es que no requieres modificar el HTML de tu plantilla de blogger, sino que funciona con el sistema de diseño de blogger, también puede ser usado en cualquier web dentro de la etiqueta BODY.

El siguiente código es el Script que necesitas copiar, pero mejor descarga el txt con el código en formato unicode para evitar errores:
<script type="text/javascript">
var banner= new Array()
banner[0]="http://tusitio/baner-1.jpg"
banner[1]="http://tusitio/baner-2.jpg"
banner[2]="http://tusitio/baner-3.jpg"
var random=Math.floor(3*Math.random());
document.write("<style>");
document.write("#cgnauta {");
document.write(' background:url("' + banner[random] + '") no-repeat top center;'); document.write(" }");
document.write("</style>");
</script><div id="cgnauta" style="widht:460px;height:70px;"></div>
Como agregar más imágenes:
Cada que agregues una imagen recuerda agregarle un número nuevo de manera descendente para cada variable banner[n]:
banner[4]="http://tusitio/baner-4.jpg"

banner[5]="http://tusitio/baner-5.jpg"
Luego en la variable "n *Math.random" será igual al número de banners que tengas.
Por ejemplo; para el caso de que fuera banner[5] el último banner, tendrías que poner:
(6 *Math.random()).
Alto y Ancho
No se olviden de modificar el tamaño de widht y height de la propiedad Style, en mi caso era para un banner de 460 x 70 pixeles, esto determinará el tamaño del div que debe ser igual o mayor al de la imagen.

Modifica el ID dentro del script y el style si quieres usar diferentes scripts
Pueden agregar dos o más scripts en diferentes partes de su web usando divs, pero cada script deberá forzosamente que tener un ID diferente si se encuentra en la misma página:
Script 1: ("#cgnauta {") y de id="cgnauta"

Script 2: ("#banerdos {") y de id="banerdos"
Si ustedes quieren el mismo script en varias partes, no es necesario copiarlo entero, sólo asigna el ID a otro DIV, por ejemplo en un agdget HTML/Jascript pega:
<div id="cgnauta" style="widht:460px;height:70px;"></div>
Sube tus imágenes a tu web u picasa
En su cuenta de Picasa u otro servicio suban sus banners y remplacen la ruta de la imagen de cada banner[n]="http://tusitio/baner.jpg" por la de los suyos.

*Las imágenes subidas a Blogger directamente no les servirán para esto. Es mejor copiar la ruta directa desde Picasa.

El banner estará centrado
Sí el baner por defecto está configurado para centrarse, si deseas cambiarlo dentro del código del script modifica:
document.write(' background:url("' + banner[random] + '") no-repeat top center;');
Sí por ejemplo es a la derecha y abajo pon bottom right, si es a la izquierda y abajo bottom left o a la izquierda y arriba top left, etc.

En blogger agregamos el script

Vayamos a nuestra cuenta de Blogger y en la ficha Diseño, pulsamos Add gadget en el sector del diseño donde desean que aparezca el script y en la ventana que se abre elijan HTML/Javascript:
Peguen el código y pulsan sobre "Guardar cambios" y ya estuvo, parece más complicado de lo que es, pero si hay problemas para eso están los comentarios.

Resultado:

Comentarios y Consultas

Los mensajes serán revisados a veces. No te olvides que soy una persona, no se trata de faltar al respeto, todos tenemos opiniones, no hay que enojarse.

Puedes marcar Notificarme para recibir la notificación de la respuesta.

20 comentarios:

  1. Hola,

    Antes que nada, felicitarte por tu blog, muy bueno ;)

    Te hago una consulta con respecto al script. ¿Hace falta subirlo a algún servidor o copiándolo funciona correctamente?

    Otra duda, en donde aparece dos veces "cgnauta", ¿debe cambiarse por el nombre del blog o no?

    Espero tu respuesta.

    Saludos!

    ResponderBorrar
  2. El código lo metes en un div o una celda cualquiera.

    #cgnauta es el nombre del identificador para que el ID="cgnauta" del DIV muestre las imágenes.

    Puesto que no te afecta en lo mas mínimo te recomiendo lo dejes como está.

    ResponderBorrar
  3. Ok. Muchas gracias por el dato ;)

    Saludos!

    ResponderBorrar
  4. Gracias por la ayuda, no fue dificil hacerlo.
    Mi duda es como poner un vinculo al banner, para que vaya a una página externa o del mismo blog, por favor.

    ResponderBorrar
  5. Pues dentro del div
    <div id="cgnauta" style="widht:460px;height:70px;"></div>
    Pon un PNG o gif transparente de 1px*1px con widht y height a 100% y encierralo entre <a href=""></a>

    ResponderBorrar
  6. Gracias Matius por la respuesta, pero no entiendo como eso me permite que el banner lleve a una dirección...es posible?

    ResponderBorrar
  7. hola, te felicito por tan grandiosa ayuda...
    tengo una pregunta y es la siguiente, si todas las imagenes tienen distinta medida, como podria hacer para no estar colocandole a cada una y que mas bien sea automatico, para mi caso tengo ese script para el index entonces no me importa lo que midan las imagenes...

    muchas gracias por ayudarme...

    ResponderBorrar
  8. Pues si quieres definir un tamaño a cada imagen usa el script Banner aleatorio con vínculos individuales vinculado al inicio del articulo.

    Por otro lado, de momento este script trabaja con variables definidas.

    ResponderBorrar
  9. nuy buen trabajo funciono a la perfeccion gracias y felicitaciones tenes 100 puntos

    http://pacochun.blogspot.com/

    ResponderBorrar
  10. se puede hacer q el baner no cambie aleatoriamente, sino q cambie de acuerdo a la página estática q esta seleccionada?? gracias y saludos!

    ResponderBorrar
  11. Mejor directamente pones un Iframe con la publicidad a las páginas estáticas, así te será fácil editar el contenido del mismo.

    Este script no fue pensado para lo que propones.

    ResponderBorrar
  12. una pregunta cada tiempo se cambia de banner

    30 segundo o cada vez que se recargue la pagina

    ResponderBorrar
  13. Gracias por el tutotial pero me queda la duda si hay que eliminar el banner que uno coloca por la gadget por defecto que trae el blog y moverlo hasta la posicion del header.

    ResponderBorrar
  14. Puedes probar, lo único que dee mantenerse en la etiqueta <body> y <body> es:
    <div id="cgnauta" style="widht:460px;height:70px;"></div>

    Puedes poner diferentes scripts cambiando el id cgnauta tanto en el script como en los div destino.

    ResponderBorrar
  15. Muy bueno este código pero tengo un pequeño problema. Tengo 5 avisos y puse este código 5 veces para ver los distintos anuncios. El problema es que cada vez que carga la página muestra 5 veces el mismo aviso. ¿Como puedo cambiar esto? necesito que se muestren (x ejemplo) 5 avisos pero todos distintos y a la proxima carga de la pagina, tienen que seguir siendo los mismos 5 avisos pero en lugares diferentes.

    Desde ya 1000GRACIAS.
    mi mail: cardanviera@gmail.com

    ResponderBorrar
  16. Muy bueno super facil.. muchas gracias por compartir... ahora buscare como estos pueden cambiar solos cada 5 segundos...

    ResponderBorrar
  17. Gracias por tu ayuda, una ultima consulta: con este codigo es posible añadirle vinculos o es necesario otro paso

    ResponderBorrar
  18. como algo para poner una URL que abrar otra pagina al aser click las imagenes? SERIA DE MU BUENA AYUDA GRCIAS respondeme

    ResponderBorrar

El ascenso de Skywalker(2019)

Joker 2019Una película que ha roto a divido a los fans muchos culparán a sus director por querer reparar Los últimos Jedi, no es su culpa al final.

[Leer artículo...]

La Espada del Inmortal (2019

Blade of The Immortal (2019)La historia de Manji, un guerrero samurái sin señor que ha sido condenado con la inmortalidad...

[Leer artículo...]

Kemono Michi: Rise Up (2019)

Kemono Michi: Rise Up (2019)Del autor de Konosuba, Genzo Shibata es un luchador japonés que es transportado a un mundo de fantasía, quien está obsesionado con los seres peludos.

[Leer artículo...]

ELI (2019)de Netflix

ELI (2019)de Netflix Reseña y criticaPelícula lanzada directo a video que nos cuenta una historia que parecería sacada de la Dimensión desconocida.

[Leer artículo...]

  © Cgnauta | CGsign blog | [Ver Licencia de uso] | Matius Lenin, Creative Commons, algunos derechos reservados

Regresar ARRIBA  

Vistas desde Mayo 2009

▼/▲ Archivo del Blog

Visitas totales

Información

IBSN: Internet Blog Serial Number 01-77-94-2008

Esta plantilla es creada y diseñada por Matius Lenin para CGnauta blog. Con Scripts de JQuery bajo licencia GNU/GPL. CGnauta es una marca registrada propiedad de Matius Lenin.