Hoy voy a probar un código html para introducir el efecto de nieve en mis blogs por navidad. Una vez puesto el código, en vuestro blog parecerá que está cayendo nieve o está nevando, queda muy bonito.
El código fue compartido por un colaborador de nuestro proyecto de partituras, Gerson, al cual doy las gracias. Podéis ver su web desde Partituras Himnario Adventista.
Espero pueda servir para todos/as el que quiera optimizar su diseño blogger, mejorar y aprender de este mundo que son los blogs.
Así puse la nieve en este blog para probar y luego subirlos a mis blogs:
Para buscar el código en vuestra plantilla html podéis utilizar las teclas control + F.
-->
Para poner esta nieve en el fondo de tu
blog entra en Plantilla | Edición de HTML y antes de
]]></b:skin>
pega esto:
/* Nieve en el fondo del blog
----------------------------------------------- */
@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/AVvXsEjmzJsPH7h7IkRplUdzsSIO6gGi2RU5_L_YEIUb0l-LLBTl4lyMn-xfsjz2byMY15B3TVhsmTIemI8u8qLCKcQ_0W-MuKPLtbYMlUronAlNEme7IPR8ML3felP3T2ajcOaf5CtNSX_BKWI/s500/snow.png),
url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhFddO-5FohZadGrqqkpMTzogmBPY6eZ-ZO-_4d8wSDgypVO9TAPDapBcbV2hjQad3RE2I7L1YYR3tbHqfrXfcyUTBODF_hYX2tR4pWJtDFzS0tUv0Lz7IsyS7jPs5UV6MVHJHNXGNv5aA/s400/snow3.png),
url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgpuXuzISo849kaGCso4Z2SiM8is_H4YMIpnieT9phquUSG3x57O4YGKKUkAMvBN0vJrSiHBSPiC9Wfgj8VOHkWO2l6cfQ-DJYKol-TLKBUBQKYs7Z7vSaA-usAp0YaeaXpnrDVEdjMAQU/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 línea:
<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>
Entradas
0 comentarios:
Publicar un comentario
Espero te sirvan nuestros consejos