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.
¿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.
Y muchos más artículos interesantes si nos sigues en...
Muchas gracias Oloman, es fantástico!! A ver si voy sacando un ratillo y lo pruebo cuanto antes.
ResponderEliminarSaludos!
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.
ResponderEliminarLo pondré en práctica en unos días.
¡Hola Oloman!
ResponderEliminarEn 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.
ResponderEliminarUn saludo
hola,me sirvio esto,pero una pregunta,me puede decir como crearme un blog con epcion avanzada?
ResponderEliminarmi 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é.
ResponderEliminarEnhorabuena, eres uno de los 5 finalistas del Premio Silencio 2008.
ResponderEliminarDigo en configuracion avanzada
ResponderEliminarHola ami me gustaria saber como se pone la fecha como la tienes tu . saludos y gracias
ResponderEliminarMuy bueno lo de las imágenes aleatorias. Lo voy a aplicar pero en otros lugares de la plantilla.
ResponderEliminarPara 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:
ResponderEliminar.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?
ResponderEliminarSiempre que te hago una pregunta apareces rápido, tengo suerte en eso!!
ResponderEliminarPor 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
ResponderEliminarMuy bueno, la verdad que es de mucha utilidad. Muy práctico, sencillo, facil de entender y aplicar.
ResponderEliminarAdelante!!!
no me sirvio no veo nada
ResponderEliminarEliana 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.
ResponderEliminarHola Oloman!
ResponderEliminarOye, 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"
Gracias y que tengas un estupendo dia!!
Sí Karla. Exacto. En lugar de DirecciónImagenX, tienes que poner la URL de una imagen.
ResponderEliminarsaludos y muy buen post.
ResponderEliminarsolo 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?
Hola Mario.
ResponderEliminarPara eso tienes que cambiar una línea en el script. En lugar de esta...
document.write(' background:url("' + fondo[random] + '") repeat center;');
...colocas esta otra:
document.write(' background:url("' + fondo[random] + '") fixed center no-repeat;');
mil pero mil gracias hace rato venia buscado esto.....
ResponderEliminarGracias. 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.
ResponderEliminarEn 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
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.
ResponderEliminarSi 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.
ResponderEliminarSobre 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.
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.
ResponderEliminarhola oloman olle no me funciona el efecto puse las imagens y no pasa nada .
ResponderEliminarhttp://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
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 :(
ResponderEliminarPor 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 ;)
hahahaha cuando tengas desarollado el codigo me aviasas .
ResponderEliminarblackfantasynagato18@gmail.com
saludos oloman =D