¿Cómo añadir copitos a tu blog?

A petición popular, hoy vengo con un nuevo viernes de tutoriales. Hoy cómo hacer que caigan copitos/bolitas por la pantalla de tu blog:

Como ya es costumbre, primero de todo pondré el código que tendremos que modificar en la app de notas a nuestro gusto (recordad que los espacios son importantes):

<style>

.snowflake {

  position: fixed;

  top: -10px;

  z-index: 9999;

  pointer-events: none;

  border-radius: 50%;

  opacity: 0.8;

}

</style>

<script>

(function() {

  const colors = ["#00000", "#00000"];

  const maxSize = 12;

  const flakes = 00; // cantidad de copos simultáneos

  function createSnowflake() {

    const flake = document.createElement("div");

    flake.className = "snowflake";

    const size = Math.random() * maxSize + 4;

    flake.style.width = size + "px";

    flake.style.height = size + "px";

    flake.style.background = colors[Math.floor(Math.random() * colors.length)];

    flake.style.left = Math.random() * window.innerWidth + "px";

    const duration = Math.random() * 5 + 5; // entre 5 y 10 segundos

    flake.style.transition = "transform " + duration + "s linear, top " + duration + "s linear";

    document.body.appendChild(flake);

    setTimeout(() => {

      flake.style.top = window.innerHeight + "px";

      flake.style.transform = "translateX(" + (Math.random() * 100 - 50) + "px)";

    }, 10);

    setTimeout(() => {

      flake.remove();

    }, duration * 1000);

  }

  setInterval(createSnowflake, 300);

})();

</script>

Este efecto es extremadamente sencillo: primero de todo encontramos "const colors = ["#00000", "#00000"];" que son los colores de los copitos que van a ir cayendo, yo los tengo blancos y rosas pero puedes elegir cualquier color en HTMLcolorcode donde tendrás que copiar el código y ponerlo en el molde. Si quieres añadir más colores copia esto -> , "#00000" y pégalo después (cuidado con los corchetes).

Si sigues bajando un poco encontrarás esto "const flakes = 00;" que, como pone en el molde, es la cantidad de copos que van a aparecer. Yo lo tengo a 30, por si te sirve de referencia.

Pues ya estaría el código hecho, has visto que fácil era.

Ahora ¿dónde lo tienes que poner? Muy fácil también: en la pantalla de diseño de tu blog verás una sección llamada Multicolumnas donde se podrá añadir una sola cosa.

Deberás seleccionar el HTML/JavaScript y pegar tu código editado. Y ya estaría!! Recuerda darle a guardar en la pagina de diseño abajo a la derecha para no perderlo.

Espero que te haya servido y si necesitas ayuda con algo no dudas en preguntarme!! Nos vemoss