Para aquellos que quieren tener siempre un fondo diferente en el blog pueden usar este truco que hará que cada vez que alguien entre al blog o se recargue la página cambie la imagen de fondo del blog.
Sólo tienes que entrar a Plantilla | Edición de HTML y pegar antes de </head> lo siguiente:
<script>
var banner= new Array()
banner[0]="URL de la imagen"
banner[1]="URL de la imagen"
banner[2]="URL de la imagen"
var random=Math.floor(3*Math.random());
document.write("<style>");
document.write("body {");
document.write(' background: #FFFFFF url("' + banner[random] + '"); background-attachment:fixed;');
document.write(" }");
document.write("</style>");
</script>
Ya sólo agrega las URL de las imágenes donde se indica. Si deseas agregar más imágenes puedes hacerlo repitiendo la línea:
banner[3]="URL de la imagen"Tomando en cuenta el orden consecutivo del número.
Si agregas más imágenes cambia el número que se encuentra en:
3*Math.random()
Te recomiendo que uses imágenes pequeñas para que la carga de la página sea más rápida.
En el sitio Squidfingers puedes encontrar muchos patterns (patrones) de imágenes que puedes usar para tu blog.
Puedes ver un ejemplo funcionando en este blog de pruebas, sólo presiona la tecla F5 y verás que al recargarse la página cambiará la imagen de fondo del blog.
Para saber cómo cambiar el color de fondo del blog aleatoriamente visita este artículo.
Hola El Potro™, hace varios días que paseo por tu blog y la verdad, está de lo más divertido ^_^
ResponderEliminarMe pregunto si querrías hacer un intercambio de links con
el balcón. También es un blog de ayuda blogger =D
Espero tu respuesta. ¡¡Saludines!!
Por supuesto Jaime, para mí es un honor.
ResponderEliminarLo que necesites estoy a tus órdenes. Ya te he agregado.
Saludos.
El Potro™, ¡muchísimas gracias por incluirme! Ya te agregué a mis sitios amigos. ^_^
ResponderEliminar¡Saludos!
Gracias a ti Jaime, saludos.
ResponderEliminarhola el potro no se si te diste cuenta cuando entrate a mi blog que tengo una caja para ingresar a blogger desde ahi mi problema es que la tenia por que no se veia la navbar pero ahora ya lo solucione y quiero quitar esa caja sabes como puedo hacerlo el post donde lo decia lo encontre en tu blog pero lo estuve buscando mucho tiempo y no lo encontre saludos
ResponderEliminarah y una ultima pregunta ¿por casualidad tienes trucos para metroflog?? espero que puedas ayudarme con este problema
hola el potro wuju por fin solucione mi problema yo solo ia no necesite ayuda esta vez pero gracias por los exelntes trucos que tienes en tu pagina
ResponderEliminarHola It's Notice,
ResponderEliminarQué bueno que ya lo solucionaste. De Metroflog no sé nada, ni siquiera tengo una cuenta ahí =S
Saludos.
Hola bro! además de felicitarte por este nuevo truco, quiero hacerlo por como te ha quedado el "Elige cómo estar cerca de la Ciudad"
ResponderEliminarLa verdad que esta muy bonito... es mas, es una gran solución para evitar hacer lo que tuve que modificar en mi blog. Si se me hubiese ocurrido antes, no tendría que haber agregado las sidebars extras.
Este blog cada día me gusta mas!!!!!!!!!!
Un abrazo!!!
Hola brother,
ResponderEliminarMuchas gracias por tus comentarios, la verdad es que tenía muy disperso los feeds y el correo, así que mejor lo uní todo en uno, aunque no me gustaron los botones que hice =P ya cuando regrese de vacaciones haré otros con más tiempo, y por qué no, hasta un par de diseños para que todos puedan usarlos.
Las columnas que agregaste de cualquier forma son útiles, ya si más adelante te estorban las eliminas y cuando tengas otra blogger-depresión las agregas de nuevo, jaja.
Un abrazo.
ola potro oie muy buenos post, una pregunta, se puede poner un index en el blog? de antemano gracias
ResponderEliminarHola Jonathan,
ResponderEliminarNo sé a qué te refieras con index. En Blogger el gadget de etiquetas y el de archivos del blog funcionarían como un índice.
Saludos.
Jajajajajajaja!!! esto de vincular el estado de ánimo con el blog creo que no va a ser buena idea... Si sigo así, voy a tener que pagar a alguien, pero no para que me haga los post, sino para que todos los dias me modifique la plantilla. jajajajja.
ResponderEliminarLa verdad que no sabía que los botones los habías hecho tu. Si es así, tengo que felicitarte también por eso, ya que te han quedado muy bonitos.
Un abrazo!!!!
jajaja, se va a poner de moda la blogger-terapia, pero si le vas a pagar diario te vas a ir a la quiebra, jaja.
ResponderEliminarUn abrazo.
Jajajajajajjajajajaja!!!!!
ResponderEliminarEs verdad, voy a tener que ir pensando de donde sacaré tanto dinero!! ;)
Un abrazo!!!!
hola! sabes que me gustaria poner un banner aleatorio en mi pagina, estube viendo el codigo fuente de la pagina prueba y copie el codigo random, solo que no se si hay que pegarlo en el HEAD y llamarlo luego en el lugar que quieras. si es asi, como lo llamo? gracias! juanolivi@gmail.com lo necesito enseriO! :(
ResponderEliminarHola MundoPelicula©,
ResponderEliminarSi quieres que las imágenes cambien al azar usa este tutorial:
Banner aleatorio
Ese tutorial está pensado para hacer cambiante la cabecera del blog pero también puedes usar el mismo código para un banner cambiante.
Saludos.
Hola Potro.
ResponderEliminar¿Sabes si es posible que la imágen de fondo del blog cambie al hacer click sobre otra Entrada y tener así un fondo de blog diferente y específico para cada Entrada?
Mil gracias
Hola ABRIL,
ResponderEliminarAl hacer click sobre una entrada cambiará al azar la imagen de fondo, pero será al azar, no una imagen específica para cada entrada o viceversa.
Saludos.
Vale. Gracias
ResponderEliminarHola, amigo la verdad que desde que cree mi blog este es el truco que he mas buscado por que lo ne cesito... y siempre no me funciona....
ResponderEliminar1: Las imagenes se ven pero nomas cuando le doy a Vista PRevia pero luego se quita
2: Dices que es de fondo verdad pues la imagen me salen en el fondo de las entradas osea no atras. como por ejemplo
3djuegos.com si me ayudaras a terminar con esto Pues no se seria muy beuno XD
Hola RD-JUEGOS,
ResponderEliminarImposible que se vea en Vista previa, ya que ningún script (como en este caso) funciona en la Vista Previa sólo guardando los cambios.
En tu blog no funciona por el tipo de plantilla que tienes, ahí no creo que haya nada que se pueda hacer =(
Saludos.
Hola El Potro!! Excelente blog ^^
ResponderEliminarLlegué aqui buscando algo parecido a lo que explicas... verás, me gustaría que el fondo cambiara automáticamente por horas (por ej, por la noche el fondo es de estrellas, de día hay un amanecer... cositas así), ¿crees que se puede hacer?
Saludos!!
Hola Nazareth,
ResponderEliminarDesconozco si haya un script que permita hacer eso. Si encuentro alguna información te comento.
Saludos.
Muchas gracias =)
ResponderEliminarHe seguido las instrucciones, pero no resulta. Debo hacer algo más?
ResponderEliminarEn esta parte de tu plantilla:
ResponderEliminarbody {
background: #000000 url(http://img706.imageshack.us/img706/6171/backgroundredt.jpg) repeat-x top center !important;
Tienes la declaración !important, eso significa que no hará caso a ningún otro cambio sino que ese fondo con esas propiedades será el que tendrá siempre.
Para que el script pueda tener la facultad de poder cambiar el fondo tendrías que quitar esa declaración.
Muchas gracias, ahora funciona el cambio al azar. Sin embargo, el fondo se repite, cómo puedo cancerlar aquello para que sólo se muestre una imágen.
ResponderEliminarBusca esta parte:
ResponderEliminardocument.write(' background: #FFFFFF url("' + banner[random] + '"); background-attachment:fixed;');
Y cámbiala por esta otra:
document.write(' background: #FFFFFF url("' + banner[random] + '"); background-attachment:fixed; background-repeat:no-repeat;');
Ahí mismo verás el código del color de fondo en blanco (#FFFFFF) puedes cambiarlo por otro si quieres.
Oh! muchas gracias, queda de maravilla.
ResponderEliminarHola Potro.. Mira.., yo no puedo cargar xq me da el siguiente error:
ResponderEliminar"No se ha podido analizar su plantilla, porque no está bien formada. Asegúrese de que todos los elementos XML se han cerrado correctamente.
Mensaje de error de XML: The reference to entity "tw" must end with the ';' delimiter."
Me podrias ayudar?? Muchas gracias..
Posiblemente es por la URL del enlace de tu imagen. Necesitaría ver cuál estás usando para ver si es ese el problema.
ResponderEliminarExacto.., ese era el problema.. Todo solucionado.. Muchas gracias Potro!!
ResponderEliminary como le ago para que no se pongan en mosaico?
ResponderEliminarBusca donde dice background-attachment:fixed; y justo después de eso agrega esto:
ResponderEliminarbackground-repeat:no-repeat;
Hola, como ago para que solo cambien la imagen de cabecera, nose si me explico, no quiero que cambie el fondo del blog.
ResponderEliminarSaludos
Nunca lo he probado para la cabecera así que no sabría decirte con exactitud, supongo que dependerá mucho del tipo de plantilla que tengas.
ResponderEliminarMuy bueno esto es lo que buscaba a mi pregunta en el otro post pero en vez de imágenes quiero fondos de colores para hacer larga la carga del blog.
ResponderEliminarHay otro que en lugar de imágenes es con colores:
ResponderEliminarhttp://ciudadblogger.com/2009/01/color-de-fondo-del-blog-aleatorio.html
Potro ya lo hice, solo que quiero que las imagenes se desplazen junto con la pagina osea que no esten fijas, y tanbien quiero que no se repita y esten centradas, como le hago..
ResponderEliminarCambia esta parte del script:
ResponderEliminarbackground-attachment:fixed;
Por esta:
background-repeat:no-repeat; background-position:center;
Gracias El Potro, Tu nunca me fallas, oyes una cosa mas no se le podria dar un color de fondo a cada imagen, esque cada imagen tiene diferente color... espero tu respuestas, Saludos!!!
ResponderEliminarMe temo que no :(
ResponderEliminarEn primer lugar te felicito por tu excelente blog y gracias por compartir todo tu conocimiento con nosotros. Tengo una pregunta como podría poner un fondo al azar solo en las entradas...? y en la pagina principal uno fijo..
ResponderEliminarHola DJBrown,
ResponderEliminarSí se puede, sólo encierra este código dentro de una condicional para que sólo se ejecute en las entradas individuales.
Muchisimas gracias potro quedo excelente en la pagina de mi novia para los q lo quieran ver aquí esta el enlace: http://princesakaom.blogspot.com/
ResponderEliminarDe nuevo muchisimas gracias eres un genio amigo.
Por nada DJBrown :)
ResponderEliminarQue tal potro, disculpa como podria poner un GIF animado de fondo del blog, pero que quedara Completo de todo el fondo.
ResponderEliminarel GIF que tengo mide 500x550 y quiero que lo ajuste a todo el fondo del blog.
este es la parte de mi plantilla donde va la imagen:
background-image: url(DIRECCION DE LA IMAGEN);
background-attachment: fixed;
background-position: bottom left;
background-repeat: repeat-x;
border-color:#ffffff;
border-width:0px ;
border-style: solid;
Te agradezco tu tiempo !
Hola Leonardh.
ResponderEliminarQue la imagen se ajuste de forma completa no hay manera con CSS, eso depende del tamaño de tu imagen. Lo único que puedes determinar es si la imagen se repite o no. En el código que has puesto se modificaría aquí:
background-repeat: repeat-x;
Ese repeat-x indica que se repetirá verticalmente. Si le pones sólo repeat indicará que se repetirá en todo el fondo, y si le pones no-repeat entonces la imagen no se repetirá.
Saludos.
Gracias, que estes bien.!!
ResponderEliminarQue tal Potro, es un gusto saludarte, necesitaba preguntar sobre una duda respecto del fondo o background del blog pues el que yo uso no se adapta o mejor dicho no se ajusta automaticamente cuando entro en una laptop el fondo se deforma, solamente en las PCs con monitores mas angostos sale bien, y en las Laptop se deforma habra alguna manera o truco para lograr que se ajuste solo en los diferentes tipos de monitores o pantallas?
ResponderEliminaresta es la seccion de mi plantilla donde va el background:
background-image: url(http://i.imgur.com/px5Pi.jpg);
background-attachment: fixed;
background-position: bottom center;
background-repeat: repeat-x;
border-color:#ffffff;
border-width:0px ;
border-style: solid;
Hola Leonardh.,
ResponderEliminarQué gusto verte de nuevo por aquí.
Ese es el problema con ese tipo de imágenes como fondo, como el monitor del usuario puede ser diferente entonces no siempre se verá igual. Es por eso que siempre se usa mayormente un fondo de tipo "pattern".
Saludos.
muchas gracias por la informacion Potro, es verdad lo que me comentas por eso en Otro blog que hice sobre mi trabajo estoy usando solo pattern o patrones para los Fondos, en realidad seguido estoy por aca en ciudad blogger porque necesito seguir consultando los tutoriales pues me gusta bastante seguir haciendo modificaciones en mis blogs (un blog para el relajo y el otro de mi trabajo) incluso la tabla de colores la uso muy seguido asi que soy un autentico residente de ciudad blogger jejejeje, y pues te deseo Paz y mucha Salud pues ya se viene el fin de año y hay que ir guardando energia paraa festejar en grande jejejeje hasta pronto Bye!!
ResponderEliminarHabrá que tramitar entonces tu cambio de domicilio en el IFE para que ahora aparezcas residente de Ciudad Blogger, jajaja.
ResponderEliminarGracias por tus deseos, el triple de ellos para ti :)
Buenas de nuevo Potro!
ResponderEliminarGenial post, lo buscaba.
He puesto 6 imágenes, que no se repita el fondo, que se muevan al bajar (no fijas) y centradas.
Todo genial, pero las imágenes me han quedado demasiado arriba y se a comido como 1 dedo de fondo:
www.mariavalverdefansclub.com
Como puedes ver, las bolas no se muestran enteras y también se tiene que mostrar algo de blanco.
Un saludo!
GRACIAS DE NUEVO!
Hola de nuevo LorkDesigns,
ResponderEliminarPrueba agregar ahí mismo en los estilos del fondo un margen, es decir, después de:
background: #FFFFFF url("' + banner[random] + '"); background-repeat:no-repeat; background-position:center; background-repeat:no-repeat;
Agrega esto:
margin-top:40px;
Dime si con eso funciona.
Saludos.
Hola Potro, dejalo, cancelo mi comentario anterior.
ResponderEliminarQuitare esta opción porque depende que resolución de pantalla y navegadores, se mueve el fondo y no queda centrado como tenia pensado.
¡Gracias!
Por cierto, lo he probado, y lo único que a hecho a sido bajarme la imagen de "En Construcción", y no el fondo (pero ya no lo necesito).
ResponderEliminarCambiando de tema, ¿cabe la posibilidad de cambiar el color de la zona gris de abajo la web, del pie de pagina? Me gustaría cambiarle a un azul o otro tipo de gris. Un saludo!!
Sí, sí es posible. Busca esta línea y elimínala:
ResponderEliminarbackground: $(footer.background);
En su lugar pon esto:
background: #FFF;
Con eso le cambiarás el color de fondo al footer.
Saludos.
Saludos Potro, disculpa sera posible mostrar en la portada del blog una imagen de fondo y en el resto del blog otra imagen distinta ?
ResponderEliminarHola Leonardh yo ya había preguntado lo mismo búscalo un poco mas arriba....
ResponderEliminarLeonardh., si es usando este método entonces mira la respuesta que le di a DJBrown más arriba. Si es sin este método entonces en el body de tu plantilla pon la imagen que quieres para el resto del blog, luego antes de </head> agrega una condicional con los estilos que quieres para la portada:
ResponderEliminar<b:if cond='data:blog.url == data:blog.homepageUrl'>
<style>
body {background:#FFF url(URL de la imagen) !important;}
</style>
</b:if>
De esa manera el blog tendrá un fondo que sólo se aplicará a la portada del blog, en las demás páginas se verá el que estableciste por defecto.
gracias DJBrown, Excelente Potro, preferi usar este codigo que has dejado ya solo agregue los estilos de mi blog y quedo perfecto...!!! muchisimas gracias !
ResponderEliminarSaludos.
Potro ai alguna manera de poner dos imagenes de fondo que cambien cara 5 segundos o algo parecido?
ResponderEliminarComo el escritorio de la computadora
-Gracias
¿Como fondo del blog? Mira esta entrada de Gema:
Eliminarhttp://www.gemablog.com/2012/01/slideshow-para-fondo-del-blog-css3.html
Hola, lo he hecho con 3 imágenes pero como no se nada de códigos html, quisiera saber como se hace para centrarlas y que se traslade con la página, quisiera saber el código y en que posición del código html deberia ponerlo, gracias.
ResponderEliminarHola goku6384, en los fondos de nada sirve centrarlo porque la imagen se repetirá, y si le pones la indicación de que no se repita entonces habrá partes vacías y el resultado no será muy bueno que digamos.
EliminarSi quieres que no sea fijo el fondo entonces quita esta parte:
background-attachment:fixed;');
Lo hice y se me quedo el fondo sobrepasando el Top y apenas se veia, pero bueno habra que apañarselas jeje.
EliminarPor cierto yo visito frecuentemente una página y allí el fondo se cambia entre mañana, tarde y noche , asi que tiene que haber una forma de que se cambien importando horarios no?
Supongo que debe poderse. No estoy seguro, pero parece que alguna vez en El balcón de Jaime publicaron algo así, pero no me creas ya que no estoy del todo seguro.
EliminarMuchas gracias. Está genial ;)
ResponderEliminarMira el comentario #18.1 de esa entrada que refieres.
ResponderEliminarHola potro, soy un seguidor tuyo. Tengo un problema en mi blog http://clubgaysweb.blogspot.com.es/ es que este tipo de bondo no quiero que afecte al fondo blanco sino al fondo donde estan los chicos. Y si en todo caso que solo se pueda al fondo completo como podria dejarlo solo en la portada permaneciendo en las entradas el blanco.
ResponderEliminarGracias,
Hola Carlos, el fondo del blog se aplica a todo el fondo del blog, es decir, al fondo dentro de body {
EliminarEl fondo de tu blog en realidad es blanco, la imagen de los chicos no es el fondo del blog sino el de un contenedor, ahí no aplica este truco.
Hola, tengo una duda como consigo la url de las imágenes.
ResponderEliminarvisit: ogltheathor.blogspot.com
En esta entrada puedes ver cómo se hace:
Eliminarhttp://ciudadblogger.com/2011/06/subir-imagenes-y-obtener-la-url-de-la.html
Saludos El Protro. Gracias por compartir tus conocimientos. Busco (sin éxito hasta ahora) algo parecido, un cambio de fondo en interiores pero sin que sea al azar. Es decir, busco una pagina de inicio o principa, pero al al clicar cualquier nota cambie a otro fondo, y al regresar a pagina de inicio continúe con el fondo principal.
ResponderEliminarOjalá me puedas ayudar, y muchas gracias por tu exoeriencia.
PD
Este pagina es casi la que quiero, pero sin que sea al azar y sólo 2 fondos, el principal y uno general para interiores.
Saludos
Hola. Puedes usar condicionales para dicho efecto, de modo que en la portada usarías un fondo y en el resto del blog otro. Sería poniendo antes de </head> esto:
Eliminar<b:if cond='data:blog.url == data:blog.homepageUrl'>
<style>
body {
background: #FFF url(URL de la imagen);
}
</style>
</b:if>
<b:if cond='data:blog.url != data:blog.homepageUrl'>
<style>
body {
background: #FFF url(URL de la imagen);
}
</style>
</b:if>
La primera parte del código sería para el fondo en la portada, y la otra parte sería para el fondo en el resto del blog.
Saludos.
DE VERDAD, MUCHAS GRACIAS EL POTRO POR TU VALIOSA AYUDA, PRIMERO POR SER UN APASIONADO DE LA PROGRAMACIÓN, Y SEGUNDA PORQUE NUNCA CREÍ QUE ME CONTESTARAS, Y ME RESOLVISTE EN UNAS HORAS UN DOLOR DE CABEZA :)
EliminarMUCHAS GRACIAS
TE GANASTE MI MODESTA DONACIÓN
SALUDOS
Al contrario, muchísimas gracias a ti por tu generosidad. En serio, gracias.
EliminarSaludos!
Hola Potro! Ya lo tengo aplicado y queda genial. Muy efectivo. Tenia una duda en la que quizas me puedas echar una mano. Cuando diseño imagenes por ejemplo en pickmonkey y les pongo transparencia. Luego las llevo al blog y se ve ese fondo que deberia ser transparente se ve blanco. Lo puedes ver en http://trebol30.blogspot.com.es/p/casino.html por ejemplo. Seguro que es una tonteria pero me lleva loco.
ResponderEliminarGracias de antemano Crack!!!!!!!
Hola liquido, entré pero no he visto ningún fondo blanco en las imágenes, supongo que has sabido resolverlo.
EliminarPd. Elimino el comentario por lo que te decía en el comentario anterior.
Saludos.
Hola El Potro:
ResponderEliminarDescargué una plantilla Anime Note y las imágenes de fondo de esta plantilla funcionan muy bien, pero cuando pongo los links míos no aparece nada. En el original son 10 imágenes y van muy bien, en el mío nada de nada a pesar que las he hecho con las medidas de cada foto de la plantilla original. ¿Qué debo hacer? ¿Por qué no estará funcionando? Plis, me ayudas. Saludos: Mery
Hola Mery, si puedes pon los links en tu plantilla tal como dices, luego cuando ya los hayas puesto dime en cuál blog lo has hecho para poder darle una revisada.
EliminarMagnífico tu blog. Buscando buscando llegué a este post y al otro que publicaste para la imagen del header. ¿podrías indicarme como podría hacer ese efecto en una foto fija de la home? La web que tiene ese efecto y quiero hacer igual es: tartinebakery.com.... Te agradeccería la ayuda.
ResponderEliminarHola jose, gracias por tu comentario. Para lo que solicitas, sólo crea un gadget HTML/Javascript y dentro de él pega el código javascript que se menciona en esta entrada:
Eliminarhttp://www.ciudadblogger.com/2009/07/cabecera-del-blog-cambiante-al-azar.html
Con eso tendrás un gadget en el cual cambian las imágenes al azar cada vez que se carga el blog.
¿gadget?... Lo quiero en una web con wordpress 4, no un blog .com. Imagino que te refieres copiando el código HTML directamente en el contenido de la página...voy a probar. Gracias.
EliminarSolucionado....muchísimas gracias por la ayuda...
Eliminar