Como decoré mi blog y como tú puedes hacerlo °‧🫧⋆.ೃ࿔*:･

 

 

Este post es por si a alguno de ustedes les interesaba saber cómo decoré mi blog, qué gadgets y qué códigos usé para que se viera así. 

Bueno people, para empezar, la mayoría de todos los gadgets y funciones en el blog lo logré gracias a la ayuda de mi mejor amigo Gémini, que es de gran utilidad si NO sabes programar (como yo) o si le quisieras agregar algo a algún código que hayas encontrado en otro lado, o si simplemente necesitas ayuda para saber dónde colocar uno en el mar de opciones que te da Blogger. Así que ahora te voy a mostrar un poco cómo hago yo alguna función o gadget 

Primero, vamos a ir a gémini o a nuestra IA de confianza. En lo personal, yo prefiero el que les mencioné porque siento que es mejor. No sé si siga siendo así, pero la última vez que entré a ChatGPT tenía límite de imágenes que le podías mandar, y eso me molestaba porque no me servía mucho. Con Gémini tengo un poco más de libertad siento yo, así que es la que recomiendo.

Entonces, vamos a suponer que queremos que cada vez que hagamos click en alguna parte del blog, salga una explosión de estrellas donde está el mouse (yo lo tengo, pruébalo en cualquier parte jeje). A la IA le vamos a decir:

"Estoy haciendo un blog en blogger con estética/temática (lo que quieras) y quería que, a la hora de hacer click en cualquier parte del blog, salga una explosión de estrellas del mouse. Qué código debería utilizar y en dónde lo coloco?"

Yo empiezo así de simple, pidiéndole algo con claridad para que cumpla con lo que yo quiera hacer. Ahí, la IA te va a decir por supuesto, claro q si, etc, etc, y te va a pasar un código + algunas anotaciones por si quieres cambiar algo. Te recomiendo que leas todo lo que te dice para saber bien qué cambiar si no te gusta cuando lo pruebas (cosas insignificantes como el color, por ejemplo).

 Ahora, vas a tener un código más o menos así:

<script>

document.addEventListener('click', function(e) {

  // Configuración: puedes cambiar los colores aquí

  const colors = ['#FF69B4', '#FFD1DC', '#FFFFFF', '#FFFACD']; 

  const particleCount = 12; // Cuántos brillos salen

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

    createParticle(e.pageX, e.pageY, colors[Math.floor(Math.random() * colors.length)]);

  }

});

function createParticle(x, y, color) {

  const particle = document.createElement('div');

  particle.className = 'click-sparkle';

  document.body.appendChild(particle);

  // Tamaño aleatorio para cada brillo

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

  

  particle.style.width = `${size}px`;

  particle.style.height = `${size}px`;

  particle.style.background = color;

  particle.style.left = `${x}px`;

  particle.style.top = `${y}px`;

  // Dirección aleatoria de la explosión

  const destinationX = (Math.random() - 0.5) * 150;

  const destinationY = (Math.random() - 0.5) * 150;

  const animation = particle.animate([

    {

      transform: `translate(-50%, -50%) translate(0, 0) scale(1)`,

      opacity: 1

    },

    {

      transform: `translate(-50%, -50%) translate(${destinationX}px, ${destinationY}px) scale(0)`,

      opacity: 0

    }

  ], {

    duration: 800 + Math.random() * 400,

    easing: 'cubic-bezier(0, .9, .57, 1)',

    delay: Math.random() * 100

  });

  animation.onfinish = () => {

    particle.remove();

  };

}

</script>

<style>

.click-sparkle {

  position: absolute;

  pointer-events: none;

  z-index: 999999; /* Para que salga POR ENCIMA de todo al hacer clic */

  border-radius: 50%;

  box-shadow: 0 0 10px rgba(255, 255, 255, 0.8);

  /* Forma de estrella pequeña opcional con clip-path */

  clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);

}

</style>

Si se dan cuenta y leen el código, van a ver que Gémini puso texto /*así*/, que son pequeñas anotaciones que te hace para que te des cuenta de donde están las cosas. Si lo dejamos así y lo pegamos tal cual a (en este caso, un gadget html/js) no va a funcionar, porque esas anotaciones interfieren con el código. Lo que vamos a hacer es borrar todas las anotaciones que estén entre /* */ antes de probar.

Ahora, para ponerlo en un gadget, vamos a ir a Diseño, y vamos a scrollear hasta que nos aparezca la opción de agregar un gadget: 

Una vez ahí, vamos a hacer click en "HTML/Java Script":

Van a ver que dice Título y abajo Contenido. Como en este caso va a ser una función que no se va a quedar "fija" en las columnas (por ejemplo, una imagen o el motor de búsqueda) no le vamos a poner título. En contenido pega el código ya limpio y haz click en guardar.

¿Qué pasa si no me gusta como quedó, o lo quiero arreglar? Si es algo que no sabes cómo arreglar, no te preocupes, vuelve a la IA y pídele que lo arregle tanto como gustes. Por ejemplo, a mí me pasó que quería que la explosión sea más visible, entonces simplemente le dije que aumentara la cantidad de partículas y el tamaño de éstas. Si sigue sin convencerte cómo quedó, fijate en lo que te dice la IA; te va a indicar dónde y cómo puedes cambiar las cosas a tu gusto. Y, si algo sale mal, como un error en el código, siempre le puedes preguntar para encontrar el defecto y su solución. Este es el código que tengo yo: 

<script>

document.addEventListener('click', function(e) {

  const colors = ['#FF69B4', '#FFD1DC', '#FFFFFF', '#FFFACD']; 

  const particleCount = 40;

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

    createParticle(e.pageX, e.pageY, colors[Math.floor(Math.random() * colors.length)]);

  }

});

function createParticle(x, y, color) {

  const particle = document.createElement('div');

  particle.className = 'click-sparkle';

  document.body.appendChild(particle);

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

  

  particle.style.width = `${size}px`;

  particle.style.height = `${size}px`;

  particle.style.background = color;

  particle.style.left = `${x}px`;

  particle.style.top = `${y}px`;

 

  const destinationX = (Math.random() - 0.5) * 150;

  const destinationY = (Math.random() - 0.5) * 150;

  const animation = particle.animate([

    {

      transform: `translate(-50%, -50%) translate(0, 0) scale(1)`,

      opacity: 1

    },

    {

      transform: `translate(-50%, -50%) translate(${destinationX}px, ${destinationY}px) scale(0)`,

      opacity: 0

    }

  ], {

    duration: 800 + Math.random() * 400,

    easing: 'cubic-bezier(0, .9, .57, 1)',

    delay: Math.random() * 100

  });

  animation.onfinish = () => {

    particle.remove();

  };

}

</script>

<style>

.click-sparkle {

  position: absolute;

  pointer-events: none;

  z-index: 999999;

  border-radius: 50%;

  box-shadow: 0 0 10px rgba(255, 255, 255, 0.8);

  clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);

}

</style>

                                                     

Bueno, finalizando esto, los invito a que prueben decorar su blog con este tip. Si tienen alguna duda, no duden en comentar  Voy a hacer otro post dándoles páginas con recursos (blinkies, pixels, gifs, etc) así que espérenlo 

(PD: pude incorporar un botón de like, me gustaría que lo usaran si les gusta así sé que hay gente leyendo mi blog  Si quieren tuto díganme, y no olviden de comentar sus blogss)