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 Diseño > Edición de HTML y pegar antes de </head> lo siguiente:
<script type='text/javascript'>
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 ^_^
ResponderSuprimirMe 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.
ResponderSuprimirLo 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. ^_^
ResponderSuprimir¡Saludos!
Gracias a ti Jaime, saludos.
ResponderSuprimirhola 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
ResponderSuprimirah 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
ResponderSuprimirHola It's Notice,
ResponderSuprimirQué 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"
ResponderSuprimirLa 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,
ResponderSuprimirMuchas 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
ResponderSuprimirHola Jonathan,
ResponderSuprimirNo 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.
ResponderSuprimirLa 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.
ResponderSuprimirUn abrazo.
Jajajajajajjajajajaja!!!!!
ResponderSuprimirEs 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! :(
ResponderSuprimirHola MundoPelicula©,
ResponderSuprimirSi 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.
ResponderSuprimir¿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,
ResponderSuprimirAl 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
ResponderSuprimirHola, 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....
ResponderSuprimir1: 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,
ResponderSuprimirImposible 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 ^^
ResponderSuprimirLlegué 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,
ResponderSuprimirDesconozco si haya un script que permita hacer eso. Si encuentro alguna información te comento.
Saludos.
Muchas gracias =)
ResponderSuprimirHe seguido las instrucciones, pero no resulta. Debo hacer algo más?
ResponderSuprimirEn esta parte de tu plantilla:
ResponderSuprimirbody {
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.
ResponderSuprimirBusca esta parte:
ResponderSuprimirdocument.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.
ResponderSuprimirHola Potro.. Mira.., yo no puedo cargar xq me da el siguiente error:
ResponderSuprimir"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.
ResponderSuprimirExacto.., ese era el problema.. Todo solucionado.. Muchas gracias Potro!!
ResponderSuprimiry como le ago para que no se pongan en mosaico?
ResponderSuprimirBusca donde dice background-attachment:fixed; y justo después de eso agrega esto:
ResponderSuprimirbackground-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.
ResponderSuprimirSaludos
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.
ResponderSuprimirEste comentario ha sido eliminado por un administrador del blog.
ResponderSuprimirMuy 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.
ResponderSuprimirHay otro que en lugar de imágenes es con colores:
ResponderSuprimirhttp://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..
ResponderSuprimirCambia esta parte del script:
ResponderSuprimirbackground-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!!!
ResponderSuprimirMe temo que no :(
ResponderSuprimirEn 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..
ResponderSuprimirHola DJBrown,
ResponderSuprimirSí 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/
ResponderSuprimirDe nuevo muchisimas gracias eres un genio amigo.
Por nada DJBrown :)
ResponderSuprimirQue tal potro, disculpa como podria poner un GIF animado de fondo del blog, pero que quedara Completo de todo el fondo.
ResponderSuprimirel 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.
ResponderSuprimirQue 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.!!
ResponderSuprimirQue 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?
ResponderSuprimiresta 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.,
ResponderSuprimirQué 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!!
ResponderSuprimirHabrá que tramitar entonces tu cambio de domicilio en el IFE para que ahora aparezcas residente de Ciudad Blogger, jajaja.
ResponderSuprimirGracias por tus deseos, el triple de ellos para ti :)
Buenas de nuevo Potro!
ResponderSuprimirGenial 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,
ResponderSuprimirPrueba 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.
ResponderSuprimirQuitare 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).
ResponderSuprimirCambiando 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:
ResponderSuprimirbackground: $(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 ?
ResponderSuprimirHola Leonardh yo ya había preguntado lo mismo búscalo un poco mas arriba....
ResponderSuprimirLeonardh., 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:
ResponderSuprimir<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 !
ResponderSuprimirSaludos.