70

Fondos de Navidad

Ya estamos en Diciembre, dentro de nada llega la Navidad y algun@s seguro que están pensando en adornar sus blogs con este motivo.
Hoy mismo Manu me pedía en un comentario alguna cosilla para adornar su blog de cara a estas fiestas, el me pedía la dirección de alguna web con fondos navideños. En realidad, conozco algunas, pero he preferido poner aquí los fondos navideños que he encontrado y que más me han llamado la atención.

Para colocarlos, buscamos en la parte de edición, HTML de nuestra plantilla este código:
body {
background:$bgcolor;


Algunos tendréis seguramente el color de fondo añadido directamente en la plantilla, así que se verá más o menos así:
body {
background:#2A4359;


Añadiremos el código para la imagen de fondo, justo antes del cierre (;):

body {
background:$bgcolor url(Dirección-url de tu imagen ) repeat;


Ejemplo

Fondos navideños animados
Para conseguir su dirección (url) pincha con el ratón derecho sobre la imagen escogida y en propiedades copia su url (están subidos a Photobucket )



Fondos navideños estáticos

Entradas Relacionadas:

70 comentarios:


tutiosidro

Hola!!!

Es la primera vez que dejo un mensaje pese a chequear constantemente tu blog ya que me es de gran ayuda por lo que expones y sobre todo, como lo desarrollas, como suelo decir yo...para tontos (que nadie se me enfade).
Al respecto de los fondos navideños para el blog decirte que no he sidocapaz de ponerlos.
Por mucho que lo intento lo unico que consigo es que los margenes laterales me aparezcan en blanco (y eso que he probado con unas cuantos fondos)
No se si a alguno mas le sucedera lo mismo...
Igualmente solo es un comentario.
Saludos y muchas gracias por la ayuda que nos prestas...

Rosa

Saludos tioisidro, je,je, que nick tan original!

Tal vez no dejaste espacio entre el color y la url, a veces si van pegados el fondo no entra y se pone en blanco.

manu

Gracias Rosa por responder tan rapido ,aunque ami me pasa tambien no soy capaz de ponerlos se me queda como yo tengo el fondo ,y la verdad esto era lo que estaba buscando si lo consigo va ser genial una vez mas gracias.

Rosa

Manu, algo hay ahí mal colocado...de todos modos no habia visto tu blog, así que no sabia que plantilla estabas usando hasta ahora, te lo digo porque el fondo de tu blog es la parte de color naranja, o sea, que si cambias el fondo lo que se verá distinto serán los dos trozos de las esquinas...

Nefert-Ivi®

Pues yo he dejado espacio y tengo el fondo blanco, pero tampoco he sido capaz de poner los fondos navideños :-S

Rosa

nefer-ivi, acabo de aplicar uno de los fondos sin problema...y no deberías tenerlo, tu menos que algunos, ya que usas la plantilla más sencilla...

Prueba así, copiando este (es uno de los fondos de arriba) si te funciona, déjalo tal cual está solo que borra la url de la imagen y cambiala por la que quieras:

background:#ffffff url(http://i72.photobucket.com/albums/i171/faria1/FONDOS/ATT11115311271112111111.gif);

Ya sabes, esta línea va justo después de body{ , tienes que sustituirla por la tuya:
background:#ffffff;

Yo misma

Dos cositas:

1.- Como de los errores se aprende, cuento mi error por si a alguien le sirve y han cometido el mismo y por eso no les sale el fondo: Rosa, te he malinterpretado; cuando dices "añadiremos el código..." lo he AÑADIDO después de body {
background:$bgcolor;
Y lo que hay que hacer es SUSTITUIR desde body hasta el color por el nuevo código, no? Yo lo he hecho así y de esta forma sí que me funciona perfectamente.

2.- Una pregunta: sería posible poner algunos de estos fondos SÓLO detrás del cuerpo de las entradas y la sidebar, donde tú tienes el degradado en azul, pero que las entradas y la sidebar se siguieran viendo en blanco (o del color que tengamos el blog)???

Muchísimas gracias como siempre!

Veroka

no pude poner el fondo me queda blanco ya intente las opciones que lei aqui, pero no hubo caso si tenes alguna otra indicacion te la voy a agradecer!

Rosa

Yo misma, eso es! Lo que pasa que igual me lié yo un poco al explicar, es que como es un fondo provisional, pretendía que el color real (el que esta ahora en vuestros blog) no desapareciese, sino que quedase detrás del nuevo, así a la hora de retirarlo no habría problemas...de todos modos he añadido una imagen explicativa a la entrada...

El fondo a ti se te coloca en todo el blog porque en los dos blogs (el de fondo negro y el blanco) no tienes añadido color al main y la sidebar, así que tienes que añadirselo.

Puedes hacerlo antes de colocar el fondo, simplemente buscas:

#sidebar-wrapper {

Y justo debajo añades:
background:#fff; (blanco)

Lo mismo en el main:

#main-wrapper {
background:#fff;

Una vez retires el fondo navideño, puedes dejar esto igual ya que si lo pones blanco en el blog blanco y negro en el blog negro, quedará como antes.

Rosa

veroka, he añadido una imagen explicativa a la entrada, mira a ver si así entiendes mejor como va...además en el comentario de Yo misma que tienes más arriba, explica como lo hizo ella.

Yo misma

Muchíííísimas gracias!!! Esta tarde lo pruebo y te cuento qué tal!

Fofo

Rosa eres estupenda. Yo desde el principio acerté a poner los fondos, pero el problema es que no quedan bien. Solo pretendo que mi blog, que tiene el fondo negro, siga siendo negro y caigan unos pequeños copos. Ya se que explicas algo pero no me entero bien.
gracias

Rosa

Fofo, gracias por lo de estupenda! je,je. Mira si tienes un poco de paciencia (espero poder publicarlo esta misma noche) estoy segura que te va a gustar...

Veroka

Siiiiii !!!! idola, Rosa!
Gracias!!!!!!!!!!!!!!

Yo misma

Ya lo he conseguido! Está nevando a todo nevar en el blog de pruebas.
¿Cuántas veces te he dado ya hoy las gracias?

Rosa

Yo misma, yalo he visto ;-) espera un poco y verás...

Fuego & Acero

Hola rosa...

Te felicito por tu blog...

Se que no viene mucho al tema pero quiero hacer una pregunta:

Segui al pie de la letra las instrucciones para poner una imagen de fondo en los titulos de la sidebar sin embargo al ponerla me cambia el formato de las listas, esto es, interlineado, incluye viñetas y modifica el formato del widget de perfil.... Ademas de eso, la imagen del footer se me corre al lado izquierdo y yo la quiero centrada... si pudieras darme una guía para solucionar estos detalles te lo agradecería mucho...

saludos

Rosa

fuego & acero, si has seguido las instrucciones es imposible que pase nada de eso que dices...se te olvidó una llave } de cierre o algo así...si no no puede afectar a nada más. Tu plantilla es la mínima, menos aún dará ningún problema con esto, de hecho muchos lo han puesto sin problema ninguno.

De todos modos, no se si has notado que Blogger lleva un par de días que no anda correctamente, tal vez pueda deberse a algo de esto...

Begotxu

body {
url(http://i72.photobucket.com/albums/i171/faria1/FONDOS/50-1.gif)repeat;
margin:0;
text-align:center;
line-height: 1.5em;
font: x-small Trebuchet MS, Verdana, Arial, Sans-serif;
color:$mainTextColor;
font-size/* */:/**/small;
font-size: /**/small;
}
Hola rosa llevo una hora intentadolo y no soy capaz te pongo todo lo que me aparece y me sale el fondo blanco ya no se que hacer. Gracias, guapa

Rosa

begotxu, fijate en la primera línea que está después de body{
Tiene que quedar así (te falta el background):

body {
background: url(http://i72.photobucket.com/albums/i171/faria1/FONDOS/50-1.gif)repeat;

Begotxu

Rosa, gracias por contestar tan pronto.
Lo intento por activa y por pasiva y me sigue quedando en blanco y he copiado directamente lo que tu me has puesto,
Ay , que penita, no se puede añadir como elemento de pagina????????

body {
background:url(http://i72.photobucket.com/albums/i171/faria1/FONDOS/50-1.gif)repeat;
margin:0;
text-align:center;
line-height: 1.5em;
font: x-small Trebuchet MS, Verdana, Arial, Sans-serif;
color:$mainTextColor;
font-size/* */:/**/small;
font-size: /**/small;
}

Muchas gracia, cielo
Muaks

Rosa

begotxu, te juro que no lo entiendo...acabo de copiar tal cual está en el comentario el código, lo he pegado en mi blog de pruebas y ¡listo!

¿En cual de tus plantillas lo has probado?

Begotxu

En la buena que es las cositas de Begotxu que las otras son de prueba y estan hechas un desastre

Begotxu

lo acabo de probar en el de pruebas y tampoco y no entiendo que hago mal solo copio y pego

Rosa

Begotxu, yo si veo tu fondo, pero solo con Firefox, con Internet Explorer se ve blanco tienes razón.

Mira, prueba a borrar: repeat
ten cuidado de no borrar el cierre que está detrás, este: ;

Begotxu

Nada hija sigue igual , he borrado repeat en el de las pruebas de la cocina pero sale en blanco.

Creo que no voy a poder hacer nada, que penita

Rosa

begotxu, mira, he visto el blog y lo tienes mal...lo tienes así:

body {
background:#aba
background: url(http://i72.photobucket.com/albums/i171/faria1/FONDOS/50-1.gif);

Sobra el segundo background, ha de estar así:

body {
background:#aba url(http://i72.photobucket.com/albums/i171/faria1/FONDOS/50-1.gif);

Begotxu

YA ESTAAAAAA

Prueba conseguida en el de pruebas , hay voy a ponerlo en el bueno

Mil gracias, Rosa te acabo de descubrir y ya vas a tener una asidua

Gracias, gracias,

Les voy a pasar tu direccion a mis amigas de Oviedo para que te conozcan

Muaks

Rosa

Begotxu, ¿de Oviedo? si estoy casi al lado, ja,ja,ja.

Me alegra que al fin saliera, ¿ves? un poco de paciencia y ya. :-)

Ari

Gracias Rosa me gusto uno de los fondos que colocaste, lo puse en mi blog...

No es primera vez q algo me sirve de aqui de tu blog, varias veces me he pasado por aqui absorviendo de tus publicaciones!!

Saludos

Rosa

Ari, gracias por andar rondando por aquí ;-)

Samantha

Hola, creo que llego tarde,
Ya que este post es viejo creo que va a aparececer en ultimos commentarios y espero que.
Quisiera saber como se pone fondo en la plantilla Rounders, ya que no tiene lo que dice
global
donde se pone el fondo
Todo para poder poner el fondo especial de san valentin, y quisiera poner un lindo fondo
Quisiera que me ayudaras Rosa
Visita mi blog
Bye, besos

Rosa

Samantha, no hace falta que lo pongas en un post antiguo, mis comentarios se actualizan al momento y además llegan a mi correo directamente, lo dejes donde lo dejes. ;-)

Para poner el fondo a la Rounders es exactamente como digo en este post, simplemente usas una imagen que quieres y listo.

Samantha

Gracias Rosa!!!
Me respondiste a los 5 minutos jeje
Tuve que cambiar unos cuantos codigos y me salio como queria
la verdad eres genial
Te quiere
Samy

Peregrina

Pues a mi no me sale :(

¿Seria a partir de aqui?

body { margin: 0px; padding: 0px; text-align: left; font:$bodyfont; color:$textcolor; background:$PageBgColor}
blockquote { margin: 0 0 0 30px; padding: 0px 0 0 20px; font-size: 88%; line-height: 1.5em; }
blockquote p { margin-top: 0; }
abbr, acronym { cursor: help; font-style: normal; }
code { color: #f63; }
hr { display: none; }
img { border: none; }

Lo intento y me sale este aviso con la vista previa:

Edita los contenidos de tu plantilla. Más información
No hemos podido obtener una vista preliminar de su plantilla.
Por favor, corrige el siguiente error y envía la plantilla de nuevo.
Se ha encontrado más de un artilugio con el ID: HTML3. Los ID de artilugio deben ser exclusivos.

¿una ayudita? No es la primera vez que me pasa lo mismo.

Gracias.

PD: Ahora mi blog está un poco cargadito jejeje es que he estado probando con la nieve y está un poco saturado :D

Rosa

Peregrina, ese error no tiene nada que ver con la colocación del fondo.
Sale porque tienes dos elementos con la misma id, localiza esta línea que corresponde a ese elemento:
<b:widget id='HTML3' locked='false' title='' type='HTML'/>

Y cambia su id, es decir, el HTML3 por otra, mejor bastante alta para asegurarte de que no abrá otro igual, por ejemplo HTML50.

FILÁ NOSOTRAS

Rosa, perdona que te moleste he puesto en mi plantilla esto: body {
background:$bgcolor;
http://i72.photobucket.com
}
no me funciona ¿esta algo mal?

Rosa

FILÁ NOSOTRAS , está mal la url de la imagen, no la has copiado completa, es con el botón derecho del ratón, propiedades y copiar la url entera.

Tendría que quedar así (te pongo el ejemplo con la primera imagen):
body {
background:$bgcolor url(http://i72.photobucket.com/albums/i171/faria1/FONDOS/ATTC12126866766667666666.gif);
}

FILÁ NOSOTRAS

Rosa me estoy volviendo loca, perdona pero es que soy super novata voy a ponerte lo que pone en mi blog:
Esto es lo que hay en el blog
body {
margin: 0px;
padding: 0px;
background: $mainBgColor;
color: $mainTextColor;
font: $bodyFont;
}

Y esto es lo que tengo que poner:
http://i72.photobucket.com/albums/i171/faria1/FONDOS/ATTC12126866766667666666.gif
si me puedes ayudar te lo agradecere y si no puedes lo entiendo, un abrazo

Céz

Hola Fila Nosotras.

Creo poder ayudarte porque tambien aprendí algunas cositas gracias a Rosa, jejeje, como siempre debemos guardar una copia de tu plantilla (Descargar plantilla completa)en la misma pestaña Diseño para editar el html. Donde dice Background (fondo de tu blog), hay que editarlo asi:

body {
margin: 0px;
padding: 0px;
background: url(http://i72.photobucket.com/albums/i171/faria1/FONDOS/ATTC12126866766667666666.gif) repeat;
color: $mainTextColor;
font: $bodyFont;

Eso quiere decir que la imagen de tu elección se repite horizontal y verticalmente (Repeat) Lo guardas y puedes ver el cambio de tu fondo ("Ver blog") y listo!

Espero haberte ayudado.

Rosa

FILÁ, pues ya ves que Céz muy amablemente te ha contestado por mi, y lo ha hecho muy bien por cierto, así que sigue sus instrucciones (comentario nº 40) y listo.

Rosa

Céz, si quieres que la imagen se repita en ambas direcciones, no es necesario añadir el repeat, ya que si no lo incluyes, la imagen se repetirá así por defecto.

Gracias por tu ayuda:-L

FILÁ NOSOTRAS

muchisimas gracias a los dos pero es inutil, os dije que me estaba volviendo loca pues cambie la plantilla por una simple intento loque me dices Cés pero no funciona ahora la plantilla que tengo tiene este codigo:

body {
background:$bgcolor;
margin:0;
color:$textcolor;
font:x-small Georgia Serif;
font-size/* */:/**/small;
font-size: /**/small;
text-align: center;
}

y sigo estando loca igual cuando me funcione de tanto intentarlo estoy arta pero los nervios me corroen porque no lo consigo
un abrazo a los dos

Ari

Vengo yo de metido tambien a ver si ayudo a Fila Nosotros jeje...

Vi el codigo de tu blog y ahora tienes esta linea asi

background:#003366;

por eso se ve azul, asi q prueba sustituir toda la linea por esta

background: url(
http://i72.photobucket.com/albums/i171/faria1/FONDOS/ATTC12126866766667666666.gif) fixed

es lo mismo que te han recoemndado, lo probe en mi blog y sirvio, espero haberte ayudado y pasar a ver la nieve por tu blog.. Saludos Rosa

Rosa

Ari, el que esté el color delante de la url está bien, ya que si alguna vez la imagen fallase sería sustituida por ese color de fondo...ese no es el problema.

Rosa

FILÁ, tendrías que ponerlo así:

body {
background:$bgcolor url(http://i72.photobucket.com/albums/i171/faria1/FONDOS/ATTC12126866766667666666.gif);
margin:0;
color:$textcolor;
font:x-small Georgia Serif;
font-size/* */:/**/small;
font-size: /**/small;
text-align: center;
}

FILÁ NOSOTRAS

lo puse de las dos maneras y nada, se que soy pesadisima.

Rosa lo puse y que do asi y nada

body {
background:$bgcolor
url(http://i72.photobucket.com/albums/i171/faria1/FONDOS/ATTC12126866766667666666.gif);
margin:0;
color:$textcolor;
font:x-small Georgia Serif;
font-size/* */:/**/small;
font-size: /**/small;
text-align: center;
}

Rosa

FILÁ, he mirado en el código fuente de tu blog y ahora mismo tienes esa zona del body exactamente así:
body {
background:#ffd78b;
margin:0;
color:#666666;
font:x-small Georgia Serif;
font-size/* */:/**/small;
font-size: /**/small;
text-align: center;
}
Se trata solo de añadir la url, tal que así:
body {
background:#ffd78b url(http://i72.photobucket.com/albums/i171/faria1/FONDOS/ATTC12126866766667666666.gif);
margin:0;
color:#666666;
font:x-small Georgia Serif;
font-size/* */:/**/small;
font-size: /**/small;
text-align: center;
}
TIENE QUE FUNCIONAR.

FILÁ NOSOTRAS

gracias por todo este tema es mucho para mi (creo)seguire entrando en tu blog y ya seguire aprendiendo muchas gracias Rosa, Ari, Cez
ya os seguiré e iré aprndiendo

Rosa

FILÁ, esto es tan sencillo que todo el mundo puede hacerlo...me da la impresión de que no nos estamos entendiendo en algo...¿no estarás tratando de colocar esto en un Gadget html?

Se me ha ocurrido así de pronto...porque no veo cambios en la parte que en realidad hay que tocar.
Esto se hace en la pestaña "Edición html" de tu panel, dentro del código de toda la plantilla, y ese código ya está allí, solo hay que modificarlo como te hemos dicho...

FILÁ NOSOTRAS

Rosa se donde me dices es donde esta la plantilla del blog que se puede descargar en el disco duro y ademas pone que puedes editar la plantilla, tu me dices que mi codigo es
body {
background:#ffd78b;
margin:0;
color:#666666;
font:x-small Georgia Serif;
font-size/* */:/**/small;
font-size: /**/small;
text-align: center;
}
y yo el que veo es
este:
body {
background:$bgcolor;
margin:0;
color:$textcolor;
font:x-small Georgia Serif;
font-size/* */:/**/small;
font-size: /**/small;
text-align: center;
}
o no miro enel sitio adecuado o algo no hago bien,un beso

Rosa

FILÁ NOSOTRAS , si ahí es, y en realidad da lo mismo lo veamos como lo veamos, tendría que salirte...cambiando este:
body {
background:$bgcolor;
margin:0;
color:$textcolor;
font:x-small Georgia Serif;
font-size/* */:/**/small;
font-size: /**/small;
text-align: center;
}

Por este:
body {
background:$bgcolor url(http://i72.photobucket.com/albums/i171/faria1/FONDOS/ATTC12126866766667666666.gif);
margin:0;
color:$textcolor;
font:x-small Georgia Serif;
font-size/* */:/**/small;
font-size: /**/small;
text-align: center;
}

FILÁ NOSOTRAS

hola Rosa cariño igual no tengo bien configurado el blog porque lo pango exatamente como me dices quedaba asi
body {
background:$bgcolor;url(http://i72.photobucket.com/albums/i71/faria1/FONDOS/ATTC12126866766667666666.gif);
margin:0;
color:$textcolor;
font:x-small Georgia Serif;
font-size/* */:/**/small;
font-size: /**/small;
text-align: center;
}
y me sale este error
Se ha encontrado más de un artilugio con el ID: Slideshow1. Los ID de artilugio deben ser exclusivos.
un saludo

Rosa

FILÁ, ese error no tiene nada que ver con los cambios que estás haciendo, pero si con cambios anteriores, probablemente con un cambio de plantilla. Lo que te indica es que tienes dos gadget con la mism id, así que tienes o que eliminar el que sobra. Trata de hacerlo desde la parte de diseño, es uno de los elementos slide que está repetido.

Maricel

Gracias Rosa, siempre se aprende visitandote.
Acabo de añadir un fondo a mi blog y no he tenido problema ninguno.
Un abrazo.

Peregrina

Biennnnnnnnnn :D

Gracias Rosa, he modificado lo que me dijiste y ya no tengo problemas con la vista previa. No sabes que alegría por que ese dato me daba muchos problemas para otras cosas.

Luego copié el código como lo puso Ari, tal cual, copiar y pegar jejeje y salía perfecto. Asi que a partir de ahí solo he modificado la url para decidirme por un fondo.

De momento me he quedado uno pero ahora ya iré buscando hasta encontrar el ideal.

Muchas gracias por vuestra ayuda.

Fila, no desistas en el intento. Yo soy de la manera de pensar de que si otro puede, yo puedo. A veces me ofusco y entonces dejo pasar un tiempo para volver a intentarlo, pero en ningún momento pienses que tú no eres capaz. Animo!! inténtalo de nuevo.

Besitos y mil gracias de nuevo :-L

Rosa

Peregrina , cuanto me alegra! Ves? sirvió la ayuda de Ari, me encanta que no me necesitéis ja,ja. En serio, me parece genial que os ayudéis unos a otros, a veces no tengo demasiado tiempo y me viene de "perlas" que el que lo ha conseguido lo comparta o, como tu, de ánimos a otros que no han podido.
Mil gracias cielo:-L

Neru

Mi fondo navideño es el deseo de que pases una Feliz Navidad en compañía de los tuyos. Que el próximo 2009 esté cargado de nuevos y estupendos post.Un abrazo.

Rosa

Neru, lo mismo te deseo para ti y los tuyos.
Feliz Navidad, disfruta de las fiestas y ojalá seas muy feliz el año nuevo y de todos los años de tu vida.

¡Un abrazo!:-L

CHINGUARRIO

hola rosa:
probe a cambiar mi pantalla con un navideño fijo, la pantalla solo queda blanca y no se como hacer el cambio, ayudame porfa
www.audienciasinesperadas.blogspot.com

hernan de Honduras

Rosa

CHINGUARRIO Tal como digo en la entrada... este es tu código:

body {
margin:0px;
padding:0px;
background:#F5DEB3 url (url de la imagen) repeat;
color:#000000;
font-size: small;
}

Fijate como está la línea, solo cambia la url de la imagen por la tuya sin tocar nada más... y respeta espacios y paréntesis, ha de estar como ves ahí.

zhenda

Mil gracias, me ha venido genial y ya tengo fondo navideño! Eres un sol!!

cargohe

grax se ve bien, pero aveces no se si ponerlo, oye rosa y tu no vas a ponerle algo a tu blog de navidad, :D. ;).
salu2.

Rosa

cargohe No me gustan demasiado estas fechas... quizá algún toquecito, no se...

Enrique Olaya

Hola Rosa,me gusta mucho tu blog y en más de una ocasión me ha servido de gran ayuda.
A ver si puedes echarme una mano con ésto.
Estoy intentando poner copos de nieve cayendo sobre mi blog pero sin cambiar el fondo que tengo actualmente,¿Cómo puedo hacerlo?.
Ésta es la dirección de mi blog:
http://elblogdeenriqueolaya.blogspot.com/

Gracias de antemano y un saludo.

Rosa

Enrique Olaya Una de mis etiquetas dice "Especial Navidad"... mira ahí, hay dos sistemas para incluir nieve.

Enrique Olaya

Muchas gracias Rosa,con tu ayuda ha sido muy sencillo.
Un saludo y felices fiestas.

Pancho

Hola Rosa... Aquí ando de nuevo, en busca de algo de información...
Busque lo que busque, siempre llego al "Escaparate"...

...Lo que yo quería es, tratar de dejar algo de margen lateral a lado y lado de mi blog... Tipo como tú lo tienes...
¿Qué añado? o ¿Qué modifico?

Gracias, como siempre...

Rosa

Pancho Costaría más modificar tu plantilla para eso que cargar una nueva... la mía por ejemplo es la Mínima de Blogger modificada un poco...

Luis Kyo

Mil gracias, me sirvió de mucho :)

Publicar un comentario en la entrada

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.

:) :(( :( :P :D :$ ;) :I :X :O |O :S