Fondo del blog cambiante | Oloblogger Como lo de generar frases aleatorias e imágenes aleatorias ya lo tenemos visto, ahora vamos a explicar como generar un fondo de página de ...

21 de agosto de 2008

Fondo del blog cambiante

Como lo de generar frases aleatorias e imágenes aleatorias ya lo tenemos visto, ahora vamos a explicar como generar un fondo de página de manera aleatoria. Cada vez que accedamos a la página o que refresquemos, aparecerá un fondo distinto.


En ocasiones sólo sirve para volver un poco locos a los lectores, pero si se utilizan imágenes con cierta homogeneidad en los tonos, quizás puede ser interesante su aplicación en determinados casos.

El script está basado en una matriz donde debemos introducir las direcciones de las imágenes a mostrar de fondo. Si se desean más de tres, habrá que añadirlas donde se indican, poniendo entre los corchetes el siguiente número que toque. Luego, una función genera un número aleatorio hasta el máximo de la longitud de la matriz. Por último, se expresan las instrucciones para aplicar el fondo según el número generado.

En esta ocasión, hay que buscar la etiqueta </head> y justo antes de ella, teclear (o copiar), todo este código:

<script type='text/javascript'>
var fondo= new Array()
fondo[0]=&quot;DireccionImagen1&quot;
fondo[1]=&quot;DireccionImagen2&quot;
fondo[2]=&quot;DireccionImagen3&quot;
(...SIGUIENTES DIRECCIONES...)
var random=Math.floor(Math.random()* (fondo.length));
document.write(&quot;<style>&quot;);
document.write(&quot;body {&quot;);
document.write(&#39; background:url(&quot;&#39; + fondo[random] + &#39;&quot;) repeat center;&#39;);
document.write(&quot; }&quot;);
document.write(&quot;</style>&quot;);
</script>

La forma de mostrar la imagen es configurable cambiando REPEAT y CENTER por otros atributos como NO-REPEAT, REPEAT-X o REPEAT-Y, para el primero primero, o LEFT (RIGHT) junto con TOP (BOTTOM) para el segundo.

¿Vemos otro post al azar por si le encuentras utilidad o quizás prefieres ser más metódico y suscribirte a nuestras entradas por correo? También puedes imprimir este artículo y por supuesto compartirlo en redes sociales si fue de tu agrado.

Compartir
Copy URL

Y muchos más artículos interesantes si nos sigues en...

follow us in feedly

29 comentarios :

  1. Muchas gracias Oloman, es fantástico!! A ver si voy sacando un ratillo y lo pruebo cuanto antes.

    Saludos!

    ResponderEliminar
  2. Este tip suen agenial, ahora solo voy a crear varias imágenes que estén a doc con el blog para que así no se ve atan extraño.

    Lo pondré en práctica en unos días.

    ResponderEliminar
  3. ¡Hola Oloman!

    En mi blog hay un premio que espera ansioso que vayas a recogerlo.

    Por favor, ven antes de que inventen "comentarios de blog cambiantes" y no llegues a ver este.

    ¡Hasta prontito, cómplice!

    Besitos,

    Vesta, desde mi corazón.

    ResponderEliminar
  4. Hola, he descubierto tu blog hace muy poco y no paro de aprender cosas sobre Blogger, poe eso te he elegido para el Día del Blog.
    Un saludo

    ResponderEliminar
  5. hola,me sirvio esto,pero una pregunta,me puede decir como crearme un blog con epcion avanzada?

    mi email:maurodamian.acdc@hotmail.com

    ResponderEliminar
  6. Mauro, no sé a qué te refieres con lo de "epción avanzada". Si es "opción avanzada", tampoco lo sé.

    ResponderEliminar
  7. Enhorabuena, eres uno de los 5 finalistas del Premio Silencio 2008.

    ResponderEliminar
  8. Digo en configuracion avanzada

    ResponderEliminar
  9. Hola ami me gustaria saber como se pone la fecha como la tienes tu . saludos y gracias

    ResponderEliminar
  10. Muy bueno lo de las imágenes aleatorias. Lo voy a aplicar pero en otros lugares de la plantilla.
    Para cuando tengas tiempo, Oloman, una consulta bastante específica:
    En mi blog vas a ver que el color de fondo del cuerpo del post sobresale de la imagen del título del post, arriba. Quisiera eliminar eso, que el título se vea sin esa línea gruesa de color.
    No me estoy explicando muy bien, pero cuando lo veas creo que lo vas a entender, y debe de ser una pavada monumental, pero para el que no sabe todo es complicado :D
    Saludos y Gracias!!

    ResponderEliminar
  11. A ver Emile. En un principio, tienes que buscar este trozo de código:
    .post {
    * margin:.5em 0 1.5em;
    border-bottom:1px dotted #ffefe5;
    padding-bottom:1.5em;
    }
    .post h3 {
    background-image: url(http://img377.imageshack.us/img377/1429/castillofondottuloso7.jpg);
    border: 0px #FFFFFF; height: 30px;
    margin:.25em 0 0;
    * margin-top: 5px;
    padding:0 0 4px;
    padding-left: 60px;
    padding-right: 30px;
    * padding-top: 75px;

    Los valores en negrita que son los que te dejan márgenes por arriba, ponlos a cero. He marcado las líneas con asterisco para que las encuentres mejor.

    Con Vista Previa, puedes comprobar si te funciona.

    Lamentablemente, he encontrado otros problemas. El título pasa a negro cuando se pasa el ratón por el encima. Busca

    .post h3 strong, .post h3 a:hover {
    color:#000000;

    y cambia el color negro por otro.

    En Internet Explorer, tu fondo blanco no se ve en Firefox sí. No estoy seguro, pero creo que se arregla si a la línea del background, le añades un color. Prueba esto a ver que tal.

    .post-body {
    margin:0 0 .75em;
    background: url(http://img386.imageshack.us/img386/5719/image2dc2.jpg) top left #FFFFCC;
    clear: both;

    Un saludo

    ResponderEliminar
  12. Mauro, lo siento mucho pero no logro captar que es lo que necesitas. ¿Podrías ser un poco más concreto?

    ResponderEliminar
  13. Siempre que te hago una pregunta apareces rápido, tengo suerte en eso!!
    Por lo del cambio de márgenes, modificar los número no me resultó. Ya lo había probado, todos juntos y uno por uno, aunque lo volví a probar ahora por si se me escapó algo. Sólo afecta el post en relación al título, o sea, los márgenes debajo del texto (y algunos no afectan nada). padding-top cambia la distancia del título del post en relaición a la imagen de fondo del título del post.
    Bueno, como sea, gracias de todas maneras. Ya lo solucionaré alguna vez.

    Los otros problemas de los que me alertás, ya están arreglados. El título negro lo había notado, pero no sabía cómo cambiarlo, y la verdad que hace bastante que no controlo el blog en Explorer, tendré que recordarlo ;)
    Gracias de nuevo!!

    ResponderEliminar
  14. Gracias por tu ayuda

    ResponderEliminar
  15. Muy bueno, la verdad que es de mucha utilidad. Muy práctico, sencillo, facil de entender y aplicar.
    Adelante!!!

    ResponderEliminar
  16. no me sirvio no veo nada

    ResponderEliminar
  17. Eliana este post se me ocurrió un día que había tomado ya 3 Jack Daniels. No obstante, si realmente te hace falta y quieres que intente ver dónde está el problema, deja un link a tu página.

    ResponderEliminar
  18. Hola Oloman!

    Oye, entiendo toda tu explicacion pero no veo muy claro donde se ponen las url's de las imagenes

    Tu ejemplo es con tres fondos...
    La direcion se sustituye en donde aparece con letra cursiva a continuacion...??

    fondo[2]="DireccionImagen3&quot;



    Gracias y que tengas un estupendo dia!!

    ResponderEliminar
  19. Sí Karla. Exacto. En lugar de DirecciónImagenX, tienes que poner la URL de una imagen.

    ResponderEliminar
  20. saludos y muy buen post.
    solo una pregunta como puedo hacer para que con este script de fondo cambiante las imagenes se queden fijas ya que no quiero que se repitan ni mucho menos que conforme baje se pierda la imagen que tengo de fondo.
    este script lo probe en mi bloger y funciona muy bien pero al ir bajando la imagen se fue perdiendo. espero respuesta gracias. hay algun script para lo que quiero?

    ResponderEliminar
  21. Hola Mario.
    Para eso tienes que cambiar una línea en el script. En lugar de esta...
    document.write(' background:url(&quot;' + fondo[random] + '&quot;) repeat center;');

    ...colocas esta otra:
    document.write(' background:url(&quot;' + fondo[random] + '&quot;) fixed center no-repeat;');

    ResponderEliminar
  22. mil pero mil gracias hace rato venia buscado esto.....

    ResponderEliminar
  23. Gracias. Lo he probado y es fantástico. Un par de ideas al respecto por si tiene tiempo para pensar cómo llevarlas a la práctica.
    En vez de cambiar el fondo cada vez que se actualiza la página o se abre el Blog, buscar una forma de hacer que cada cierto tiempo ( un cierto número de minutos ) se cambie el fondo haciendo una transicción suave de uno a otro como un fundido.

    Otra ide más loca es conseguir que según las estaciones del año se cambien fondos adecuados a ellas. Por ejemplo, en primavera fondos de flores, en verano, fondos de playa y mar, etc. No sé si esto último sería posible pero me agradaría mucho poder ponerlo en mi Blog si es que se puede hacer. De nuevo,gracias. Saludos

    ResponderEliminar
  24. Por cierto, cuando he alojado los fondos para ir cambiando en Picasa y he puesto sus direcciones en el código, no me funciona la aplicación ya que por mucho que actualice y refresque el navegador de Internet, sólo me muestra el primer fondo pero nunca los otrs. ¿ A qué puede ser debido ?. Gracias.

    ResponderEliminar
  25. Si te funcionaba de primeras y el problema surgió tras sustituir la dirección de las imágenes, o borraste/añadiste algo accidentalmente, o no pusiste las direcciones correctas. En Picasa hay que ir hasta la imagen a tamaño original para conseguirla.

    Sobre las otras ideas, me las apunto. Eso habría que hacerlo con más JavaScript. Actualmente estoy preparando un post para temporizar cosas, así que eso mismo podría valer para lo que dices.

    Un saludo.

    ResponderEliminar
  26. Muchas gracias. Seguramente es problema de las direcciones de Picasa, ya que con las originales no pasa. Lo revisaré. Me alegra oir que se pueden poner en práctica las dos ideas que apunto; me hace especial ilusión poderlas ver en mis Blogs. De nuevo muchas gracias y un saludo.

    ResponderEliminar
  27. hola oloman olle no me funciona el efecto puse las imagens y no pasa nada .

    http://ployec-nagato.blogspot.com/

    aparte de eso se puede aser que al entrar a a una etiqueta se cambie el fondo osea que cada etiqueta tenga un fondo fijo gracias saludos

    ResponderEliminar
  28. Nagato, tienes una plantilla de las del nuevo diseñador y a esas les tengo mucha manía. Tanta que casi nunca las he utilizado. Te debería funcionar lo que puse aquí, pero si no es así, por favor, no hagas que tenga que ponerme a verlas :(

    Por otra parte, creo que sí sería posible hacer lo que propones de un fondo distinto para cada etiqueta. De hecho lo tengo apuntado hace algunas semanas pero todavía no me he puesto a desarrollarlo.

    En ese momento no tendré más remedio que ver cómo aplicarlo a las nuevas plantillas ;)

    ResponderEliminar
  29. hahahaha cuando tengas desarollado el codigo me aviasas .

    blackfantasynagato18@gmail.com

    saludos oloman =D

    ResponderEliminar