
Hemos visto algunas maneras de poner nieve en el blog, ésta en particular me parece atractiva dado que no necesitamos usar scripts, sólo CSS y tres pequeñas imágenes. La idea es de Joshua Johnson y puedes ver el demo en este blog de pruebas.
Una ventaja de éste método es que al no utilizar scripts no sobrecargamos el blog, la desventaja es que usuarios con navegadores no modernos no podrán verlo (en Internet Explorer funciona de la versión 10 para arriba).
La nieve caerá en el fondo del blog, no encima de él, lo cual además de evitar que se obstruyan enlaces y contenido (porque los copos son imágenes), evitará también que se obstruya la visibilidad del contenido del blog.
Para poner esta nieve en el fondo de tu blog entra en Plantilla | Edición de HTML y antes de
]]></b:skin> pega esto:
]]></b:skin> pega esto:
/* Nieve en el fondo del blogAhora busca la etiqueta <body> o esta línea:
----------------------------------------------- */
@keyframes snow {
0% {background-position: 0px 0px, 0px 0px, 0px 0px;}
100% {background-position: 500px 1000px, 400px 400px, 300px 300px;}
}
@-moz-keyframes snow {
0% {background-position: 0px 0px, 0px 0px, 0px 0px;}
100% {background-position: 500px 1000px, 400px 400px, 300px 300px;}
}
@-webkit-keyframes snow {
0% {background-position: 0px 0px, 0px 0px, 0px 0px;}
100% {background-position: 500px 1000px, 400px 400px, 300px 300px;}
}
@-ms-keyframes snow {
0% {background-position: 0px 0px, 0px 0px, 0px 0px;}
100% {background-position: 500px 1000px, 400px 400px, 300px 300px;}
}
#contenedor-nieve {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgokCYJeiYU9cW9rb9QxxMYt433XCRX5-tIBvzm5jgPqKSCv-YJc114CnUXMNvCgraTyEXa3FOQozslnF87ljTsGliGKXBNaEVvy-mINl7O4RU77FSV8SdG4dLKLZvYwyVApeF0NmMGGx0/s500/snow.png), url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8o4cZvoadA_yeCvOcKpTlCy1lI__zDp_jrv8ECzYwQytSM5S1-lXqxOxWfPR1ZjkZ3TbuVKw2TufzjtJ5K9LQaM4ffHR1XX5CK4MpPY3rchGHjEtSIiW1hg0mbaLSTT29rl7ikYHdWXA/s400/snow3.png), url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEid5byJU_NbxLMPEW2dX_JlpGEOspAbbvsgA9C7yQPyyj8WGs0xCKUJGp9q7Po10bsw2ieLAYXnS7oIh-zs24UCAUAFfinMLfI9v32Gg-g4IFkXRhEVuX4h3FjC_bcQP4luEyx__urJJ90/s300/snow2.png);
-webkit-animation: snow 20s linear infinite;
-moz-animation: snow 20s linear infinite;
-ms-animation: snow 20s linear infinite;
animation: snow 20s linear infinite;
}
<body expr:class='"loading" + data:blog.mobileClass'>
Y debajo de cualquiera de las dos agrega esto:
<div id='contenedor-nieve'>
Por último busca la etiqueta </body> y arriba de ella agrega:
</div>Guarda los cambios y listo.
Como puedes apreciar es un método sencillo, fácil de instalar, no obstruye el contenido del blog, y lo mejor es que no tiene nada de scripts, sólo bondades del CSS y nada más.
Si prefieres un método que no sea en el fondo del blog sino encima de él, y que funcione en todos los navegadores entonces estas dos opciones podrán servirte:
Nieve en el blog que se acumula al final de la página
Nieve en el blog
este truco está increíble en verdad, muchísimas gracias por enseñárnoslo y tan fácilmente que lo entendí todito ^^
ResponderEliminareres lo máximo!!!
Gracias valitis, me alegro que te haya gustado!
EliminarExelente idea Potro, y es super liviano :D
ResponderEliminarEsa era la palabra que estaba buscando, liviano :)
Eliminarjajaja, me ahorraste el trabajo, tenía contemplado publicar esto mismo, pero te me adelantaste xD. Ahora lo comparto ya explicado.
ResponderEliminarFelices fiestas Potro!!
Gracias Karlita, felices fiestas y que te queden ricos los tamales de este año :)
EliminarUna pregunta: ¿Qué son los tamales? Sucede que soy de otro país y no existe eso. Por lo menos no son ese nombre jaja :)
EliminarUna comida mexicana muy rica :)
Eliminarhttp://i46.tinypic.com/9ptjrr.jpg
Un truco muy bueno, como siempre gracias por compartir con todos los que te seguimos amigo Potro y desde ya te deseo una felices fiestas, un gran abrazo desde Lima Perú =)
ResponderEliminarGracias Silvi, felices fiestas!!!
EliminarHola potro tengo un problema para configurar un subdominio en blogger segun tengo que hacer los nuevos registros cename y sigo las istruciones pero me arroja un error, te muestro esta imajen http://i50.tinypic.com/fo0fg5.png ya eintentado de una forma u otra y nada saludos
ResponderEliminarHola Jerry, deja la pregunta en la entrada que corresponde para no desviarnos del tema de este post.
EliminarSaludos.
Estimado Potro aunque no hago comentarios muy a menudo, te diré que es raro el día que no entro en Tú Blog, gracias a gente como Tú tengo funcionando 3 blogs en tres colegios el de mi Mujer, mi cuñada y mi sobrina, todo gracias sobretodo a Tus enseñanzas en este blog, espero que dure mucho tiempo. aprovecho para desearte unas Navidades muy felices junto a los tuyos.
ResponderEliminardesde Galica ESPAÑA un fuerte abrazo
Manuel Ortiz
Qué amable Manuel, muchas gracias en verdad :)
EliminarOtro abrazo para ti y felices fiestas!
El Potro esta de vuelta!!!!
ResponderEliminarYahú!
El potro está de vuelta!
ResponderEliminarYahú!
No contabas con mi astucia :)
EliminarEsta muy bueno, amigo, ya he agregado varias cosas a mi blog que he sacado de aquí, muchas gracias y si quieres pasate por mi blog de aviación http://gabofav.blogspot.com/ , Saludos!
ResponderEliminarHola Gabriel Ortega, me ha interesado tu blog, por lo que te he visitado, es muy bueno lo que haces!. Pero queria recomendarte que colocases en tu blog un botón para ir arriba, ya que con las fotos de tus dibujos se hace muy largo. Desde ya es una critica constructiva. En mi opinión le vendría muy bien.
EliminarAqui tienes un enlace de un post "El Potro" (Ciudadblogger)de como realizar eso, además lo puedes personalizar!
http://ciudadblogger.com/2012/03/boton-ir-arriba-con-jquery-que-aparece.html
Saludos!
Este comentario ha sido eliminado por un administrador del blog.
ResponderEliminarYo lo veo bien, a no ser que no haya comprendido bien cuál es el problema :/
EliminarNo lo has comprendido bien, mira como está ahora en mi web, y mira como te comente en el comentario que quería que quedara...
EliminarPues es que yo lo veo igual, lo único distinto que noto es que conserva el borde (o sombra) del contenedor principal, pero ahí no se puede hacer nada para "romperlo", o se quita todo o se deja todo.
EliminarA mi esto no me funciona, no se que ha podido fallar, pero lo he hecho todo.
ResponderEliminarA mi tampoco me funciona :(
EliminarHola Potro. Sé que no es de ésta entrada pero no lo he encontrado. Hay alguna manera de convertir el perfil de Google+ en Blogger de vuelta?
ResponderEliminarMuchas gracias
Hola, se hace desde este enlace pero, creo que sólo se puede hacer si el cambio tiene menos de 30 días, al menos así era antes:
Eliminarhttp://www.blogger.com/revert-profile.g
Que lindo potrito, gracias por el tuto, está genial. Xx
ResponderEliminarHola potro, como siempre.. Enhorabuena, podría decir que mis blogs son criaturas tuyas en gran medida, gracias.
ResponderEliminarHe colocado este codigo exactamente igual en dos blogs que tengo, en uno funciona perfectamente (http://unpienlaluna.com), pero en el otro no (http://ocupaterapia.com) y no se a que puede ser debido. También tengo el problema que los widgets que utilizan jquery dejaron de funcionar de repente en los dos blog.
Un abrazo y felices fiestas!!
Muchas gracias por tu comentario Miguel.
EliminarEl problema viene de mucho más arriba en un estilo al que le quitaste su llave de cierre }
Si te fijas, en los estilos de #Text1 h2{ no hay una llave de cierre } lo cual ha hecho que todo lo que pongas debajo como esta nieve, o los estilos de LinkWithin no funcionen:
http://ciudadblogger.com/2011/07/errores-comunes-al-poner-los-codigos.html
Un abrazo.
Muchísimas gracias Potro. Resuelto el problema de la nieve, se ve fantástico.
EliminarHe mirado en mil sitios pero el problema del widget escalera de noticias que utiliza jquery sigue sin funcionar en ningún blog, he probado con versiones más nuevas pero nada.
Desconozco cuál gadget sea Miguel, pero te recomiendo preguntar en el sitio donde lo has tomado, quizá no sea un problema de jQuery sino del propio código.
EliminarMuchas gracias potro, poco a poco va cogiendo forma el blog y desde luego en gran medida gracias a tu ayuda y aportes...
EliminarNo pude solucionar lo del JQuery y tuve que eliminar los widgets.
Actualmente tengo un problema con un espacio que hay entre el menú del blog y las sidebars. Hay mucha distancia y no puedo solucionarlo, he modificado código pero no lo condigo...
Hola Miguel Angel, he entrado en ambos blogs pero no veo ningún espacio desmedido arriba de las sidebars, supongo que ya lo has resuelto.
EliminarHolaa "El potro".Perfecto...... es la primera vez que edito en HTLM y siguiendo tus pasos he conseguido que nieve en mi blog.
ResponderEliminarUn millón de gracias.
Te mando un cordial saludo desde Toledo-España y por supuesto un "Me gusta".
MrKikérik.
Gracias MrKikérik, y felicidades por el éxito de la nieve :)
EliminarHola el Potro! quisiera preguntarte como es posible colocar en botón con cuentra regresiva para cerrar las publicidades colocadas en el blog. Si no me entiendes a lo que me refiero, puedes verlo en un sitio web para ver capítulos de Futurama Online ("Futuramizados"), ahi al cargar un capitulo, te da esa opcion, lo cual me parece muy práctico. Desde ya muchas gracias, y quizás puedas usar esto que te digo para crear un nuevo post! saludos!
ResponderEliminarNo sé decirte Pato, he visto mucho esos anuncios pero nunca los he usado pues muchos sistemas como AdSense penalizan ese tipo de publicidades, pero seguro en la red encuentras algo.
EliminarSaludos.
Gracias me re funciono! este si que fue rapido n_n y facil Thx
ResponderEliminarQué gusto que te haya sido útil :)
EliminarHola potro ante todo felicitarte por el gran trabajo que haces para ayudar a la gente a configurar su blog.
ResponderEliminarDesde hace una semana me ha surgido un problema en mi blog y es que no puedo guardar los cambios en la plantilla CSS DE VISTAS DINAMICAS.
Te estaría muy agradecido si me ayudaras a solucionar este problema.
Gracias por tu comentario, ¿recuerdas qué fue lo último que hiciste antes de que eso sucediera? ¿te aparece algún error, cuál? ¿has probado hacer los cambios en otro navegador?
EliminarLo último que hice fue intentar cambiar la url de la fotografía de cabecera del blog y en ese momento ya no me dejo guardar los cambios(aplicar al blog) y ademas perdí los cambios del diseño de la cabecera anterior.
EliminarHe probado con internet explorer y mozilla firefox y tampoco me deja.
Quizá lo mejor seas que instales de nuevo la plantilla pero eso hará que pierdas todos los cambios que has hecho :(
Eliminargracias ya lo puse,me queda genial con el fondo y cabecera que puse
ResponderEliminarGracias a ti por tu visita!
EliminarHola Potro, lo primero felicitarte por el gran trabajo que haces.
ResponderEliminarVeras, no consigo que me funcione, no se que hago mal, a ver si me puedes decir qué sucede.
Tengo varios blogs, donde no funciona es en sebulcor.com
Feliz Navidad
Hola potro, al igual que manuel ortiz,no comento muy seguido pero tu blog ha sido de gran ayuda para mi blog.
ResponderEliminarYo me alegro que ya estes de vuelta en el blog y que todo este bien!
Tengo una consulta que no tiene que ver con este tema, y quisiera ver si en lo posible me puedes ayudar.
Se que sera facil para ti jejeje porque el problema no es complicado pero como yo no se mucho no logro dar con el problema, tiene que ver con el blanco que que esta debajo de los post, no el primero sino el segundo, AL HACER CLIC EN LA ENTRADA O EN UN ENLACE QUE REDIRECCIONES A ALGUNA ENTRADA PUBLICADA EN MI BLOG mira como se ve, y deveria verse como se muestra en INICIO:
http://www.imgus.net/bilder/24125b969aae416ac045f4ee9035a761.jpg
Esto no pasa siempre, algunas veces se ve bien al entrar a alguna entrada, pero la mayoria de veces se ve como en la imagen.
Por favor Potro, dejame saber donde puedo explicarte mejor sobre esto para que me ayudes!!!
Quizas sea algun codigo que force al fondo a quedarse fijo, pero no entiendo porque se sale el cbox hacia fuera.
Aqui mi blog, gracias anticicadas corazon!
Feliz Navidad
http://confiaen-cristo.blogspot.com/
Muchas gracias por tu comentario. ¿Recuerdas cuál fue el último cambio que hiciste?
EliminarEs probable que algún gadget o elemento que añadiste haya ocasionado que deje de funcionar el script que oculta el chat, del mismo modo algún cambio que hiciste pudo haber hecho que en las entradas individuales el fondo se vea de esa forma, pero sólo tú sabes qué cambio has añadido, yo desde el código fuente de la plantilla no me he podido enterar :(
Potro gracias a http://ciudadblogger.com/2011/07/errores-comunes-al-poner-los-codigos.html solucioné mi problema, faltaba una llave por encima del código.
ResponderEliminarExcelente, me imaginé que ese podría ser el problema :)
EliminarFeliz Navidad.
A mí se me sobrecargó el blog cuando lo puse. Tuve que quitarlo. Es una lástima...
ResponderEliminarA mí no me ha pasado eso pese a que lo he probado en varios blogs, aun así están las otras opciones para que nadie se quede sin la nieve :)
EliminarHola potro!
ResponderEliminarTe deje un mensaje, porfis
dejame saber si me puedes ayudar!
Gracias
Ya te he respondido, es sólo que se van respondiendo conforme van llegando, y estos días tengo menos tiempo que el de costumbre ;)
EliminarUhhh qué mal :(
ResponderEliminar¡Felices fiestas para ti también!
¡Muchas gracias por el post! n.n'
ResponderEliminarMuchas gracias, me encantó, ¡queda precioso! :3
ResponderEliminarEn argentina hace mucho calor !
ResponderEliminarEn argentina hace mucho calor!! :) Saludos a españa
ResponderEliminarHola Potro ! Me encanta todo lo que veo en tu blog, pero no pude hacer nevar en el mío. Copié todo tal cual está en las instrucciones y ... nada. Qué puede estar pasando?
ResponderEliminarHola Mariana, entré al blog de tu perfil y veo la nieve cayendo, parece que sí lo has conseguido :)
EliminarSí Potro. Después de mucho luchar me salió. Gracias !!!! El tema es que ahora empieza septiembre y lo quiero cambiar. Hay algo así como flores que caigan? O algo que tenga onda primaveral?
ResponderEliminarLamentablemente no hemos incluido nada en la sección de Festividades en torno a la primavera :(
EliminarQue tal Potro, esta muy genial tu blog :) y la nieve me funciona muy bien, solo que se veria mejor si el cuerpo principal de mi blog tuviera cierta transparencia, sabes como puedo hacer eso?
ResponderEliminarHola Lalo, qué parte exactamente quieres que tenga transparencia y en cuál blog.
Eliminarhola yo quisiera en vez de nieve poner plumas me podeis ayudar porfavor?
ResponderEliminarhola me encanta lo de nevar pero yo quiero poner plumas cayendo en vez de nevar me podeis ayudar?
ResponderEliminarHola, usa este método:
Eliminarhttp://ciudadblogger.com/2009/11/nieve-en-el-blog.html
Abre el archivo que se descarga y al inicio de él verás la URL de una imagen, sustitiye esa URL por la de la imagen de la pluma.
Tremendo aporte potro, me sirvió mucho. gracias!!
ResponderEliminar