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:
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.
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]="DireccionImagen1"
fondo[1]="DireccionImagen2"
fondo[2]="DireccionImagen3"
(...SIGUIENTES DIRECCIONES...)
var random=Math.floor(Math.random()* (fondo.length));
document.write("<style>");
document.write("body {");
document.write(' background:url("' + fondo[random] + '") repeat center;');
document.write(" }");
document.write("</style>");
</script>
var fondo= new Array()
fondo[0]="DireccionImagen1"
fondo[1]="DireccionImagen2"
fondo[2]="DireccionImagen3"
(...SIGUIENTES DIRECCIONES...)
var random=Math.floor(Math.random()* (fondo.length));
document.write("<style>");
document.write("body {");
document.write(' background:url("' + fondo[random] + '") repeat center;');
document.write(" }");
document.write("</style>");
</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.
15 comentarios:
Muchas gracias Oloman, es fantástico!! A ver si voy sacando un ratillo y lo pruebo cuanto antes.
Saludos!
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.
¡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.
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
hola,me sirvio esto,pero una pregunta,me puede decir como crearme un blog con epcion avanzada?
mi email:maurodamian.acdc@hotmail.com
Mauro, no sé a qué te refieres con lo de "epción avanzada". Si es "opción avanzada", tampoco lo sé.
Enhorabuena, eres uno de los 5 finalistas del Premio Silencio 2008.
Digo en configuracion avanzada
Hola ami me gustaria saber como se pone la fecha como la tienes tu . saludos y gracias
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!!
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
Mauro, lo siento mucho pero no logro captar que es lo que necesitas. ¿Podrías ser un poco más concreto?
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!!
Gracias por tu ayuda
Muy bueno, la verdad que es de mucha utilidad. Muy práctico, sencillo, facil de entender y aplicar.
Adelante!!!
AQUI PUEDES ESCRIBIR TU COMENTARIO