Decoración Navideña
Esta idea de los copos de nieve la he visto en
Joshua Johnson, pero le he modificado una imágen para integrar el escudo del Sevilla F.C., consiguiendo así mostrar unos copos de nieve cayendo por el fondo del Blog y además mezclados con unos cuantos escudos del Sevilla F.C., quedando un efecto sensacional.
La nieve y los escudos caen sobre el fondo del blog, evitando que perjudiquen la visibilidad de enlaces y entradas.
Para ponerlo en el fondo de tu blog entra en
Plantilla |
Edición de HTML y antes de
]]></b:skin> pega esto:
|
@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(http://i17.servimg.com/u/f17/13/20/23/83/snow3_10.png), url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg4BzXIze2zUFv7KUMgDhwKYUG0qEY0yyp6A9WHUd2CNK4ssH2uJ1QJZ72hrwaTlO_NfoY27E9eA2avXeIOzibSiUCadY26omNr08I4trR9koeXxybBlAgnQR-79OF6en6F5dIFNHtxzF4/s400/snow3.png), url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjConqC_gvOGkeZOFmAywlGkEGQ7ClpJAwPVgLcx3CX1B9GMgeOL_7j31nd9XoiGsRlFyv4prvVbgUFvDDprLgIX1h-bbhaeHIqwELcFZACEBWvBKXX5Um-rRyJGGCWq49D6LEG71lYI2s/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;
}
|
Ahora busca la etiqueta
<body> o esta linea:
<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.
Publicaciones Relacionadas
trucos blog