Vistas a la página totales
Cómo agregar efecto nieve, lluvia o corazones en tu blog
Publicado por neonbyte | lunes, 16 de febrero de 2026
Si quieres que tu blog tenga vibra Y2K real, necesitas efectos animados cayendo por la pantalla. En este tutorial te enseño cómo agregar efecto nieve, lluvia o corazones en Blogger.
Yo los estoy creando y programando para que se publiquen automáticamente según la temporada
Paso 1 — Ir a Editar HTML
- Ve a Tema
- Haz clic en Editar HTML
Busca la etiqueta </body> y pega el código justo antes.
Efecto Nieve
<script>
let snowflakes = 50;
for (let i = 0; i < snowflakes; i++) {
let snow = document.createElement("div");
snow.innerHTML = "❄";
snow.style.position = "fixed";
snow.style.top = "-10px";
snow.style.left = Math.random() * window.innerWidth + "px";
snow.style.fontSize = Math.random() * 20 + 10 + "px";
snow.style.opacity = Math.random();
snow.style.animation = "fall " + (Math.random() * 5 + 5) + "s linear infinite";
document.body.appendChild(snow);
}
let style = document.createElement("style");
style.innerHTML = `
@keyframes fall {
to {
transform: translateY(100vh);
}
}`;
document.head.appendChild(style);
</script>
Efecto Corazones
Solo cambia el símbolo:
snow.innerHTML = "💖";
Efecto Lluvia
<script>
for (let i = 0; i < 60; i++) {
let rain = document.createElement("div");
rain.style.position = "fixed";
rain.style.width = "2px";
rain.style.height = "15px";
rain.style.background = "#66ccff";
rain.style.top = "-20px";
rain.style.left = Math.random() * window.innerWidth + "px";
rain.style.animation = "rainfall " + (Math.random() * 2 + 2) + "s linear infinite";
document.body.appendChild(rain);
}
let style = document.createElement("style");
style.innerHTML = `
@keyframes rainfall {
to {
transform: translateY(100vh);
}
}`;
document.head.appendChild(style);
</script>
Publicarlo automático por temporada
Puedes envolver el código en una condición por fecha:
let month = new Date().getMonth();
if (month == 11 || month == 0) {
// Activar nieve en diciembre y enero
}
Así tu blog cambia solo según el mes
⚠️ Consejos
- No uses más de 60 elementos si tu blog es pesado.
- Prueba siempre en móvil.
- Si algo se rompe, revisa que el código esté antes de </body>.
RetroHTMLHacks

