Herramientas para decorar sus blogs p.1

 Holaaa, como les dije en TikTok, en este posteo estaré dejando un par de códigos para que puedan decorar sus blogs + algunas explicaciones para que puedan personalizarlos a su gusto 😄

︵‿︵‿୨♡୧‿︵‿︵

¿Cómo poner flores cayendo en la pantalla?

1. Añadir un gadget: ya que es una animación, da igual donde pongan el gadget en sí, el efecto será el mismo

2. Seleccionar HTML/ JavaScript

3. Seleccionar el sector de "Content"

4. Pegar el siguiente código: 

<script>

document.addEventListener("DOMContentLoaded", function () {

  for (let i = 0; i < 20; i++) {

    let flower = document.createElement("div");

    flower.innerHTML = "🌸";

    flower.style.position = "fixed";

    flower.style.top = "-50px";

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

    flower.style.fontSize = (10 + Math.random() * 18) + "px";

    flower.style.opacity = Math.random();

    flower.style.zIndex = "9999";

    flower.style.pointerEvents = "none";

    document.body.appendChild(flower);

    let fall = Math.random() * 5 + 5;

    flower.animate(

      [

        { transform: "translateY(0px)" },

        { transform: "translateY(" + window.innerHeight + "px)" }

      ],

      {

        duration: fall * 1000,

        iterations: Infinity

      }

    );

  }

});

</script>

Cosas a tener en cuenta:

⤷ La línea del código que determina cuantas flores se crean es: for (let i = 0; i < 20; i++)

En caso de querer mas flores, deberían modificar el 20 por un número mas alto, y en caso de querer menos, por un número mas bajo

⤷ La línea del código que hace que lo que caigan sean flores es: flower.innerHTML = "🌸"

En caso de querer que caiga otra cosa, solo es necesario cambiar el emoji que está entre comillas

⤷ La línea del código que determina el tamaño de las flores es: flower.style.fontSize = (10 + Math.random() * 18) + "px"

Partimos de 10, luego Math.random() genera un número aleatorio entre 0 y 1. Al multiplicar ese número por 18, pasa a estar entre 0 y 18, por ende, el tamaño más bajo que puede tener el emoji es 10, y el más alto 28 (10+18)

En caso de querer modificar su tamaño, tener en cuenta que la formula sería (tamaño mínimo + Math.random() * tamaño máximo)

En base a eso, pueden elegir los valores que gusten

⤷ La línea del código que determina la opacidad de las flores es: flower.style.opacity = Math.random()

Nuevamente, Math.random() crea valores aleatorios entre 0 y 1, opacidad 0 significa que la flor no se ve, y opacidad 1 que se ve al 100%, los valores en el medio crean cierta transparencia

¿Cómo hacer esta cajita de mensajes?

Los primeros tres pasos son iguales al anterior porque nuevamente vamos a usar HTML, PEEERO! acá si importa dónde pongan el gadget, donde lo ubiquen será donde aparecerá en su blog

Pegar el siguiente código:

<style>

.mensaje-card {

  background-color: #fff0f5;

  padding: 14px;

  border-radius: 16px;

  text-align: center;

  box-shadow: 0 4px 10px rgba(0,0,0,0.12);

  margin: 16px auto;

  max-width: 220px;

}

.mensaje-card button {

  background-color: #ffd6e8;

  border: none;

  padding: 14px 20px;

  border-radius: 25px;

  font-size: 16px;

  cursor: pointer;

  margin-top: 10px;

}

.mensaje-texto {

  margin-top: 15px;

  font-size: 15px;

}

</style>

<div class="mensaje-card">

  <div style="font-size:32px;">💌</div>

  <p><strong>Mensajito diario!</strong></p>

  <button id="mensaje-btn">tocá acá</button>

  <div id="mensaje-texto" class="mensaje-texto"></div>

</div>

<script>

const mensajes = [

  "tus emociones importan 💗",

  "sonreí, estás haciendo lo mejor que podés 🌷",

  "lo estás haciendo bien \u2728",

  "sos suficiente \uD83E\uDEC2",

  "descansar también es avanzar 🤍"

];

let indice = 0;

document.getElementById("mensaje-btn").addEventListener("click", function () {

  const caja = document.getElementById("mensaje-texto");

  caja.innerText = mensajes[indice];

  indice = (indice + 1) % mensajes.length;

});

</script>

Cosas a tener en cuenta:

Cajita: 

⤷ La línea del código que establece el color de la cajita es: background-color: #fff0f5

Para cambiarlo, deben modificar la parte subrayada

⤷ La línea del código que establece el espacio interno en la cajita entre el borde y el contenido es: padding: 14px

Para cambiarlo, deben modificar el número 

⤷ La línea del código que redondea los bordes de la cajita es: border-radius: 16px

En caso de quererlos más redondeados, deben aumentar el número, y si los quieren menos redondeados, deben bajarlo

⤷ La línea del código que establece el tamaño de la cajita es:   max-width: 220px;

En caso de querer cambiarlo, deben modificar el número 

Botón:

⤷ La línea del código que establece el color del botón es: background-color: #ffd6e8

Para cambiarlo, deben modificar la parte subrayada

⤷ Las líneas del código que establecen el tamaño del botón son:

padding: 14px 20px

font-size: 16px

Para cambiarlo, deben modificar los valores numéricos. En el caso del padding, el primer número representa la separación que hay con la parte de arriba y la de abajo, y el segundo la separación que hay hacia el borde derecho e izquierdo→ alto y ancho

Escrito:

⤷ La línea del código que determina el emoji es: <div style="font-size:32px;">💌</div>

Para cambiarlo, deben simplemente reemplazar el emoji por otro de su agrado, cambiando el número que aparece junto a "font-size" pueden modificar su tamaño

⤷ Las líneas del código que determinan lo escrito en la cajita son:

<p><strong>Mensajito diario!</strong></p>

<button id="mensaje-btn">tocá acá</button>

Para cambiar el primero (que aparece en la caja) deben modificar la parte de "Mensajito diario!" y para cambiar el segundo (que aparece en el botón) deben modificar la parte de "tocá acá"

⤷ Esta es la parte de los mensajes que aparecen al tocar el botón:

const mensajes = [

  "tus emociones importan 💗",

  "sonreí, estás haciendo lo mejor que podés 🌷",

  "lo estás haciendo bien \u2728",

  "sos suficiente \uD83E\uDEC2",

  "descansar también es avanzar 🤍"

Para modificarlos solo hay que cambiar la frase

Aclaraciones:

- Deben escribirlos entre comillas

- Recuerden poner una "," antes de cambiar de línea

- En algunos casos puse emojis, y en otros el código del emoji porque blogger no me reconocía el emoji en sí. Una vez que completen las frases revisen su blog a ver si les funciona, y sino cambien el emoji por el código 

︵‿︵‿୨♡୧‿︵‿︵

Creo que se me está haciendo un poquitin largo, así que por hoy llego hasta acá

Espero que les sirvaa!!!!

Haré próximas publicaciones con mas tutoriales de este estilo para ayudar :)