gadgets que puedes usar para tu blog (pedidos)

 

OLAAAAAA, hoy vengo a dejar lo k debia pork mejor tarde que nunca

aki estan los codigos de algunos gadgets que me pidieron en mi video de tt,

(si les gusta algun otro que tenga haganmelo saber y actualizo este post con el codigo e intrucciones :D)

el primero que me pidieron fue la flechita personalizada al entrar a mi blog, esta fleca de pata de gato yo la hize en ibist painten un lienzo de 32 x 32

(tienen que dejarlo sin fondo, no fondo blanco) pero si ya les da perza dibujar solo pueden buscar algun icono que les guste y sacarle el fondo (eso si se vera mucho mas grande al ponerla en el codigo por el tamaño de la imagen, para que sea de 32 x 32 pueden hacer el liezo en ibis paint, poner la imagen sin fondo y exportar como png)

buena ya sin nada mas que decir aki va el codigo:

<style>

/* Cursor en TODO */

* {

  cursor: url("AKI VA EL LINK DE TU IMAGEN") 2 2, auto !important;

}

/* Mantener patita también en links */

a, a:hover {

  cursor: url("AKI VA EL LINK DE TU IMAGEN") 2 2, auto !important;

}

/* Evitar que desaparezca en comentarios */

input, textarea, button {

  cursor: url("AKI VA OTRA VEZ EL LINK DE TU IMAGEN") 2 2, auto !important;

}

</style>

COPIA HASTA STYLE :D

SEPARADORRR :P

okeyyuuu, el segundo gadget que me pidieron fue el de una lluvia, este gadget yo se lo pedi a chat gpt con una forma de pata de gato pero digamos que no parece, parece mas una frutilla JAAJAJA, pero si a ustedes les gusta la forma solo le tienen que cambiar el color a un color que les guste, bueno ya sin nada mas que explicar aki el codigo:

 <script>

const maxCats = 12;

const catColor = "#b7e4c7"; // verde claro (el # con numeros es el color, pon uno k te guste y remplaza)

const catSVG = `

<svg viewBox="0 0 64 64" width="100%" height="100%" fill="${catColor}">

  <path d="M32 4

  C26 4 22 10 22 10

  L14 6 12 16

  C8 20 8 28 12 34

  C14 44 22 54 32 54

  C42 54 50 44 52 34

  C56 28 56 20 52 16

  L50 6 42 10

  C42 10 38 4 32 4Z"/>

</svg>

`;

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

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

  cat.innerHTML = catSVG;

  cat.style.position = "fixed";

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

  cat.style.left = Math.random() * 100 + "vw";

  cat.style.width = 20 + Math.random() * 20 + "px";

  cat.style.height = cat.style.width;

  cat.style.opacity = Math.random() * 0.5 + 0.5;

  cat.style.zIndex = "9999";

  cat.style.pointerEvents = "none";

  document.body.appendChild(cat);

  const duration = 8 + Math.random() * 6;

  const delay = Math.random() * 5;

  cat.animate([

    { transform: "translateY(0)" },

    { transform: "translateY(110vh)" }

  ], {

    duration: duration * 1000,

    delay: delay * 1000,

    iterations: Infinity

  });

}

</script>

SEPARADORRRR

(me dio flojera cambiarle fuente al codigo ok? JJDHDH)

yaya, aki como tercer y ultimo gadget que me pidieron fue el del gato que lo puedes alimetar, la verdad este se me ocurrio un dia nomas, pedi el codigo a chat gpt, aunk lo tuvimos que pulir varias veces hasta que quedo, este gadget consta de una imagen (el gato) y otras cuatro (las comidas) yo en el codigo te inticare donde poner cada link de tu imagen, lo otro que le puedes editar es el texto, ya ahi te daras cuenta cual es y lo remplazas por uno que te guste, OJO k no tiene k ser especificamente un gato, puede ser una imagen de otro animal que tu quieras, si lo quieres dibujar te doy la medida que yo utilize, que fue 180 x 180 y para las comida fue: 80 x 8' si no m equivoco, pero ya si lo kieres mas grande o chiko ahi ves tu, ya sin nada mas que decirte aki el codigo:

<div id="gato-gadget">

  <!-- GATO -->

  <img id="gato-img" 

 src="AKI_VA_LA_IMAGEN_DEL_GATO_O_ANIMAL" 

 alt="gatito" />

  <!-- PLATO -->

  <img id="plato-img" src="" alt="comida" />

  <!-- TEXTO -->

  <p id="gato-texto">Where is my food, human?</p> (texto editable)

  <!-- BOTÓN -->

  <button id="alimentar-btn">Aliméntame</button> (editable )

</div>

<style>

#gato-gadget {

  width: 100%;

  max-width: 200px;

  margin: 0 auto;

  text-align: center;

  font-family: 'Cherry Cream Soda', cursive; (puedes cambiar la fuente)

  position: relative;

  overflow: hidden;

}

#gato-img {

  width: 100%;

  max-width: 180px;

}

#plato-img {

  width: 120px;

  margin: 6px auto;

  display: none;

  position: relative;

  animation: caerPlato 0.6s ease-out;

}

@keyframes caerPlato {

  from {

    transform: translateY(-40px);

    opacity: 0;

  }

  to {

    transform: translateY(0);

    opacity: 1;

  }

}

#gato-texto {

  font-size: 13px;

  color: #355f3b;

  margin: 6px 0;

}

#alimentar-btn {

  background: #3f6f55;

  color: #fff;

  border: none;

  padding: 6px 10px;

  border-radius: 12px;

  font-family: 'Cherry Cream Soda', cursive; (fuente editable)

  font-size: 12px;

  cursor: pointer;

}

#alimentar-btn:disabled {

  background: #8aa89a; (color editable)

  cursor: default;

}

</style>

<script>

(function(){

  const platos = [

    "IMAGEN_COMIDA_NUMERO_UNO",

    "IMAGEN_COMIDA_NUMERO_DOS",

    "IMAGEN_COMIDA_NUMERO_TRES",

    "IMAGEN_COMIDA_NUMERO_CUATRO"

  ];

  const btn = document.getElementById("alimentar-btn");

  const texto = document.getElementById("gato-texto");

  const plato = document.getElementById("plato-img");

  const hoy = new Date().toDateString();

  const ultima = localStorage.getItem("gato_alimentado");

  if (ultima === hoy) {

    btn.disabled = true;

    texto.textContent = "Vuelve a alimentarme mañana :3"; (Editable)

  }

  btn.onclick = function() {

    const randomPlato = platos[Math.floor(Math.random() * platos.length)];

    plato.style.display = "none";

    plato.src = randomPlato;

    // reinicia animación

    plato.style.animation = "none";

    plato.offsetHeight;

    plato.style.animation = "caerPlato 0.6s ease-out";

    plato.style.display = "block";

    texto.textContent = "¡Grazias!";

    btn.disabled = true;

    localStorage.setItem("gato_alimentado", hoy);

    setTimeout(() => {

      plato.style.display = "none";

      texto.textContent = "Vuelve a alimentarme mañana :3"; (editable)

    }, 5000);

  };

})();

</script>

SEPARADORRRR

Esos serian los 3 gadgets que me han pedido hasta ahora, cabe recalcar que donde dice "imagen_comida_numero_x" me estoy refiriendo a un link, tienes que fijarte que termine en png si no no funciona y no saldra(tambien aplica para la foto del gato/animal)

y ya sin mas que decir o explicar me despido vros, espero le hayan entendido a mis intrucciones, cualquier duda comente y tambien si quieren codigo de algun otro de mis gadgets recomiendo que me lo digan por algun video mio de tiktok ya que ahi eztoi mas activa. subire un video avisando de este nuevo post para que se entenren mas rapido AJSJSDDH

 BAIBAIIIIIII