Cambiar de forma aleatoria el fondo del blog
Cada vez que se refresca la página o se entra al blog, la imagen de fondo del blog es distinta. Para conseguir este efecto es necesario tener una imagen aplicada como fondo del blog:
body {
background-image: url(URL _dirección_de_tu_ imagen);
1- Añadimos un nuevo elemento html-javascript y pegamos este código dentro:
<script type="text/javascript">
var banner= new Array()
banner[0]="Image01URL"
banner[1]="Image02URL"
banner[2]="Image03URL"
banner[3]="Image04URL"
banner[4]="Image05URL"
banner[5]="Image06URL"
banner[6]="Image07URL"
banner[7]="Image08URL"
banner[8]="Image09URL"
banner[9]="Image10URL"
var random=Math.floor(10*Math.random());
document.write("<style>");
document.write("body {");
document.write(' background:url("' + banner[random] + '") repeat center center;');
document.write(" }");
document.write("</style>");
</script>
Fijaros que en "Math.floor está puesto el número 10, las imágenes se enumeran del cero a las que queramos y siempre se pone un número más de las imágenes que tenemos en Math.floor.
Hay que usar para el fondo una imagen pequeña para que al repetirse ( repeat center center;) ocupe toda la pantalla.
a las
Etiquetas:
Trucos Blog,
Trucos imagenes
Vitua Radio
Foro SpamLoco
Seguir el Escaparate
32 comentarios:
Hola Rosa, yo aqui molestando otra vez ¿has visto el blog de Mareah? ¿ como cambian las fotos auomaticamente? quisiera poder hacerlo yo. Gracias
¡Hola Rosa!
De nuevo acudo a ti, mi salvación. Resulta que me ha dado por ver cómo ha quedado mi blog tras la última actualización de hoy miércoles, y me encuentro con que la barra lateral donde aparecían normalmente antes el perfil, los enlaces, los vídeos... etc aparecen abajo; además de que cada entrada del blog que hago aparece en toda la extensión de la pantalla, desde que publiqué la del 17 de junio (si entras en http://yagoloro.blogspot.com/ verás que a partir de esa entrada me aparecen bien, pero las de antes no).
Curiosamente, tuve algunos problemas para poner el vídeo de esa entrada del 17 de junio, pero finalmente apareció como quería (en medio). Lo malo es que alomejor eso también ha hecho descolocar la estructura de mi blog y por eso aparece así. Sé que no toqué nada de la plantilla para modificar el ancho del blog (cosa que me gustaría, pero que aún no voy a hacer).
Me harías un gran favor si me ayudases a poner las entradas del blog como estaban: ocupando el centro de la pantalla y situándose en una sola columna, teniendo la barra lateral a la derecha.
Muchísimas gracias por todo, nos eres de grandísima ayuda. Espero tu respuesta en cuanto puedas.
¡Gracias otra vez más!
Hola Rosa, si no te parece mucho para comenzar, como puedo hacer para agregar ese mundo en esa parte(Navbar?) y debajo un saludador web y debajo de éste una página donde salga el clima de donde soy, Perú.
Gracias por las respuestas.
Salu2
F3DOR Vl4DIMIR
Hola Rosa! Me gustaría aplicar este efecto próximamente ("Cambiar de forma aleatoria el fondo del blog") pero me quisiera saber si las imágenes deben tener dimensiones y/o características especiales (además de encontrarse alojadas en algún sitio como Photobucket).
Tranquilita, las imagenes segun está este script llevan un "repeat" lo que hace que las imágenes se repitan para ocupar el fondo si son pequeñas.
Si, por ejemplo son de 200px x 200px, y representan un gato, por poner un ejemplo, la pantalla se llenara de gatos, no se si me explico...
Puedes subirlas al hosting que quieras, incluso a Blogger.
Lo más aconsejable sería que fuesen del mismo tamaño.
Cuando publiqué este script, tenía aplicado el efecto en un blog de pruebas, ya no, pero si lo necesitas o quieres verlo funcionando antes de probar, me lo dices y lo pongo en marcha de nuevo...
Hola Rosa...genial, que buena ayuda. Sólo tengo un par de preguntas:
1. Me pasarías el link de algún blog que ya esté utilizando esta aplicación por favor, quisiera ver cómo funciona.
2. Crees que podría hacerse lo mismo pero con la imagen puesta en el header del blog? y
3. Pudiera hacerse que esto último ocurriera cuando quien entre al blog pinche equis categoría (me explico: que la imagen del header sea distinta si está en "cosas", que si está en "deportes"?
Mil gracias por haberme enseñado cómo agregarle fondo al main de mi "ensayadero", aun estoy tratando de "descubrir" cómo redondear las esquinas de las cajas de los posts.
Carlos Javier, pues la verdad es que ahora no se de ningun blog que lo use, la entrada es de hace tiempo y, ya sabes, la gente lo colocó por entonces pero luego se cansan. Yo lo tenía en un blog de pruebas pero también lo eliminé.
Para hacerlo con el header, es un sistema muy parecido y de ese si puedes ver un ejemplo en esta entrada:
http://elescaparatederosa.blogspot.com/2007/04/header-aleatorias-para-el-blog.html
Para cada categoría en exclusiva no creo que pueda hacerse, al menos yo no conozco la forma...
Para redondear las esquinas de los post creo que tengo algo publicado por aquí...pero ahora mismo no recuerdo la entrada exacta...
Prueba buscando en tu plantilla esto:
.post {
Y justo debajo coloca estas líneas:
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
Aunque sin ver tu plantilla es algo complicado...pero bueno, si puedes prueba eso a ver (usa vista previa).
hola
tengo una pregunta:
quisiera poner en mi blog, una ventana donde aleatoriamente, cambien las frases ke ponga.
como sifuera una ventana de la "frase del dia" pues parecido pero una ventana donde cambien las frases.
cual seria su HTLM. Y como podria pegar las frases ahi?
y segunda pregunta.
compre un dominio y luego al hacer mi blog en blogespot, lo redirecione pero al entrar en mi web, directamente cambia a la direccion del blog. el proceso ke tiene ke hacer es este, pero habria la forma de mantener siempre en la ventana de la direccion, la direccion de mi web?
gracias
Unai, puedes encontrar como colocar las frases aleatorias aquí:
http://elescaparatederosa.blogspot.com/2007/02/frases-aleatorias-en-tu-blog.html
En cuanto a lo del dominio, ha de ser así, ya que al redireccionar es como si "cargaras" el blog en el dominio nuevo.
Muchas gracias por el comentario.
y otra pregunta, como puedo cambiar el fondo de una ventana?
es decir, escribo un texto en la columna derecha del blog pero kiero ke tenga otro kolor el fondo y no el mismo fondo del blog?
Unai, colocas el nuevo elemento con el texto o lo que sea en la sidebar.
Luego vas a la parte de edición de html , sin expandir los artilugios, tienes que localizar el elemento dentro del código, si le has puesto título guíate por el para encontrarlo, será una línea parecida a esta:
<b:widget id='BlogArchive1' locked='false' title='Archivo del blog' type='BlogArchive'/>
Fíjate en su id, que en este caso es BlogArchive1 y vuelva hacia arriba, hasta la parte del css, es decir, antes de ]]></b:skin> y ahí colocas el código necesario, que en este ejemplo sería:
#BlogArchive1{
background: #ddd;
}
En este ejemplo, ese elemento tendría el gris (#ddd;) como color de fondo, puedes cambiarlo por el que sea.
Muy bueno el truco.
Por cierto, si quieres olvidarte de contar el número de imágenes que vas añadiendo te sugiero que modifiques tu código tal como así:
<script type="text/javascript">
var banner= new Array()
banner.push('Image01URL');
banner.push('Image02URL');
banner.push('Image03URL');
banner.push('Image04URL');
banner.push('Image05URL');
banner.push('Image06URL');
banner.push('Image07URL');
banner.push('Image08URL');
var random=Math.floor(banner.length*Math.random());
document.write("<style>");
document.write("body {");
document.write(' background:url("' + banner[random] + '") repeat center center;');
document.write(" }");
document.write("</style>");
</script>
De esta forma, con el método .push() vamos agregando tantos elementos como queramos al array banner. Y luego, con la propiedad .length del array recuperamos el número de elementos que tiene. Hay que saber que cuando se agregan de esta forma los elementos de un array, automáticamente se van autonumerando como 0, 1, 2, etc...
Un saludo!
SERGI R.
Hola Rosa, pues mi interés es saber si este truco se podría agregar a la imagen de la cabecera, porque si fuera así me interesaría muchísimo :D:D Y cómo cambiaría el código entonces.......;)
Siempre me paso por aquí a ver que me contestas.
Saludos desde: ActualidadRealMadrid
Anibal Mira esta entrada:
http://elescaparatederosa.blogspot.com/2008/05/imagenes-aleatorias-en-la-cabecera.html
Hola Rosa!
Me podrías dar el link donde explicas cómo poner un fondo estatico, he tratado de ponerlo con diferentes explicaciones y lo único que consigo es que el fondo se desaparezca. Aquí te dejo el código de mi fondo:
body {
font: 62.5% 'Lucida Grande', Verdana, Arial, Sans-Serif;
background-image: url(direccion de la imagen);
text-align: center no-repeat;
margin: 0 0 30px;
}
Retro icon Puedes ver como hacerlo aquí:
http://elescaparatederosa.blogspot.com/2007/01/imagen-en-el-fondo-de-pgina-blogger.html
Rosa, disculpa, intenté poner el fondo con la explicación del link que me das, pero al parecer, dicho código desencadena una serie de desconfiguraciones en la plantilla, por ejemplo, hace que las letras se agranden demasiado y algunos formatos se estropeen. ¿Qué podría ser?.
Solo necesito saber si al codigo que tengo le puedo agregar algo para que no se repita y quede estático.
body {
font: 62.5% 'Lucida Grande', Verdana, Arial, Sans-Serif;
background-image: url(direccion de la imagen);
text-align: center no-repeat;
margin: 0 0 30px;
}
Gracias por tu ayuda!
Retro icon En tu código debe de quedar todo como está,salvo la línea del background que has de cambiarla tal como indico en la otra entrada.
Bueno, lo tengo así y el fondo se me sigue repitiendo en "Y".
body {
font: 62.5% 'Lucida Grande', Verdana, Arial, Sans-Serif;
background: url(http://www.press75.com/demos/urbanelements/wp-content/themes/urbanelements/images/bg.jpg);
text-align: center no-repeat;
margin: 0 0 30px;
}
Tenía background-image, ahora solo lo he dejado en background...pero da igual.
Retro icon Prueba así:
body {
font: 62.5% 'Lucida Grande', Verdana, Arial, Sans-Serif;
background: url(http://www.press75.com/demos/urbanelements/wp-content/themes/urbanelements/images/bg.jpg) no-repeat;
text-align: center;
margin: 0 0 30px;
}
Bueno, de esa forma no se repite el fondo, pero cuando bajo con el scroll me doy cuenta que no está estático, por lo que al bajar tenemos el fondo blanco y el que quiero queda arriba.
:( que problema...
hola rosa, todo bien, espero que si, bueno, me pasaba a visitarte, quiero preguntarte si hay algun seguidor tuyo con el nombre de gema, pero no la de gem@ blog, otra gema, bueno, espero tu respuesta, nois veremos, chau
Retro icon Añde esta línea debajo de la del background:
background-attachment: fixed;
Ascesino96 Pues no lo se :( son tantos que no se sus nombres.
Hurra!!! ahora si! gracias Rosa....eres lo máximo...no sabes cuantas explicaciones leí y ninguna me sirvió, pero la tuya si está correcta!
gracias
Retro Icon Ha sido tu paciencia :D
Gracias a ti por confiar en mi.
Muchisimas gracias Rosa!!!!
Probe de otras maneras pero no salia, ahora si sale.....
Solo agrogo que el codigo hay que insertarlo antes de /head
onegai !! .. ayuda ... lo que pas aes que varias cosas las entiendoperfectamente y me han servido muchos los codigos ... pero aun una cosa que de esta entarda no entiendo:
1- Añadimos un nuevo elemento html-javascript y pegamos este código dentro:
en esta parte no entiendo donde va .. es crear un gadget de codigos html .. porque ya intente eso con el de entradas aleatoreas y no funciono .. o en que parte del dody debo pogarlo o en otra parte ... >_> .. hay si estoy confundida ...
Nikky Menfrey En la parte de diseño, donde dice "añadir gadget" escoges uno de los de Blogger que se llama HTMLJavascript y ahí lo pegas.
Muchisimas gracias!
Gracias a este codigo maravilloso con una pequeña modificación pude lograr lo que buscaba.
Saludos
HOLA COMO INTRODUZCO LAS IMAGENES DE FONDO DESDE MI DOCUMENTOS IMAGENES
orlando Aristigueta Es imposible desde ahí... antes has de subir tus imágenes a un alojamiento en Internet y usar la url que allí te proporcionan... incluso puedes subirlas a Blogger:
http://elescaparatederosa.blogspot.com/2009/02/alojar-imagenes-en-blogger.html
Publicar un comentario
Si vas a dejar una consulta, procura tener habilitado tu perfil en Blogger o deja la url del blog a revisar (no enlace).
Los comentarios están siendo moderados.
Comentar con el formulario antiguo