gadgets que puedes usar en tu blog (pedidos) pt.2

 

OLAAAAAA, hoy vengo a dejar otros codigos que me pidieron por mi cuenta de tiktok, los gadgets que me pidieron fueron:

-pantalla de inicio al entrar al blog 

-pinceladas al pasar el cursor (el mejor nombre que encontre para ponerle JASZGF)

-los mini banners 

y por ultimo, k la verdad no pense k me lo fueran a pedir (pork la verdad es algo muy inutil) fue el 

-boton "no hacer nada"

Esos fueron los cuatro gadgets que me pidieron y los cuatro que enseñare hoy, ya sin nada mas que decir aki los cuatro gadgets de hoy:

Primer gadgets de hoy es el de la pantalla de inicio al entrar al blog, este gadget se basa en que basicamente es una imagen (algun icono o logo que quieras para tu blog) y un boton que dice lo k tu le quieras poner, tiene un efecto de blur y al apretar el boton el efecto desaparece, un detalle importante esque la pantalla aparece al recargar la pagina y al entrar, ya sin nada mas que decir aki el codigo:

<div id="welcome-overlay">

  <div class="welcome-box">

    <img src="link de tu imagen" alt="Bienvenida" />

    <button id="enter-btn">

      Entrar al mundo k.kyouka (texto editable)

    </button>

  </div>

</div>

<style>

#welcome-overlay {

  position: fixed;

  inset: 0;

  background: rgba(0,0,0,0.4);

  backdrop-filter: blur(6px);

  z-index: 9999;

  display: flex;

  align-items: center;

  justify-content: center;

}

.welcome-box {

  display: flex;

  flex-direction: column;   /* 👈 CLAVE ABSOLUTA */

  align-items: center;

  gap: 18px;

  max-width: 90%;

}

.welcome-box img {

  width: 100%;

  max-width: 420px;

  height: auto;

  display: block;

}

#enter-btn {

  background: #4f7f6a;

  color: #fff;

  border: none;

  padding: 12px 26px;

  border-radius: 25px;

  font-size: 16px;

  cursor: pointer;

}

</style>

<script>

document.getElementById("enter-btn").onclick = function () {

  document.getElementById("welcome-overlay").style.display = "none";

};

</script>

´para ser sincera yo no recuerdo en que apartado inserte el gadget (side bar o footer) pero creo k por recomendacion ponganlo en el footer, bueno como ya no tengo nada mas que explicar pork creo k esta mas claro k el agua este codigo, pasemos al siguiente :3

el segundo gadgets es el de las pinceladas al pasar el cursor, este gadget lo que hace es basicamente que tu, al pasar el cursor se vera una "pincelada" que sigue al cursor y desaparece, ¿que es editable de este gadget? bueno lo unico editable es el color, eso es lo unico que se le puede cambiar al codigo, a continuacion el codigo:

<style>

/* OCULTAR EN CELULAR */

@media (max-width: 768px) {

  .cat-paw {

    display: none;

  }

}

/* HUELLITA */

.cat-paw {

  position: fixed;

  width: 14px;

  height: 14px;

  pointer-events: none;

  background-color: #95d5b2; /* verde claro */

  border-radius: 50%;

  opacity: 0.7;

  animation: fadeOut 1.2s forwards;

  z-index: 9999;

}

/* EFECTO DESVANECER */

@keyframes fadeOut {

  0% { transform: scale(1); opacity: 0.7; }

  100% { transform: scale(0.4); opacity: 0; }

}

</style>

<script>

document.addEventListener("mousemove", function(e) {

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

  paw.className = "cat-paw";

  paw.style.left = e.clientX + "px";

  paw.style.top = e.clientY + "px";

  document.body.appendChild(paw);

  setTimeout(() => {

    paw.remove();

  }, 1200);

});

</script>

este gadget yo lo inserte en el footer pork la verdad en la sidebar siento k ocupa un espacio k se podria usar para un gadget, bueno como dije antes lo unico editable de este gadget es el color (lo indique en el codigo)

el tercer gadget que me pidieron fue un tutorial de los mini banner, y para este si que necesitaras intrucciones, para esto hay dos formas de hacerlo

la primera es descargar el banner por imagen y en las sidebar agregar ungadget de imagen y colocar el banner (esta yo no lo recomiendo pork al poner otro gadget con otro banner se veran muy separados)

y la segunda (un poco mas de esfuerzo) es hacer el banner, ir a imgbb, subir tu banner y en el apartado "Códigos de inserción" poner la opcion "HTML codigo enlazado", copias el codigo que te da- vas a blogger-diseño-sidebar-agregar gadget-HTMLjava/script-pegas el codigo-guardar

lo bueno que tiene esto es que si kieres insertar otro banner haces el mismo proceso pero pegas el codigo de imgbb en el mismo gadget que pegaste el anterior, eso hace que quede uno debajo del otro y no separados como dije antes, a continuacion les dejare las dos paginas que ocuparan para este gadget:

1. https://blinkies.cafe/ (pagina para crear los banners)

2.https://es.imgbb.com/ (pagina para sacar el codigo de tu banner)

esas serian todas las intrucciones para los mini banner, ahora pasemos al cuarto y ultimo gadget de hoy!

cuarto gadget y ultimo "boton no hacer nada" este boton si no m equivoco lo que le puedes editar es, la frase de "no hacer nada", la fuente y los colores, estare señalando donde editar cada cosa, sin mas habla aki el codigo:

<div class="nothing-box">

  <button class="nothing-btn" onclick="doNothing()">no hacer nada 🐈</button> (texto editable)

</div>

<style>

.nothing-box {

  width: 170px;

  margin: auto;

  text-align: center;

}

/* BOTÓN */

.nothing-btn {

  width: 100%;

  padding: 12px;

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

  font-size: 16px;

  /* NUEVA PALETA */

  background: #e9f5f0;

  color: #1b4332;

  border: 2px solid #74c69d; (estos son los tres colores que cambias a tu gusto!!)

  border-radius: 14px;

  cursor: pointer;

  transition: transform 0.1s ease, box-shadow 0.1s ease;

}

/* EFECTO SUAVE */

.nothing-btn:hover {

  transform: scale(0.97);

  box-shadow: 0 4px 8px rgba(0,0,0,0.05);

}

</style>

<script>

function doNothing() {

  // absolutamente nada

}

</script>

SEPARADORRR :3

Estos fueron lo cuatro codigos de hoy, aclaro que subo solo los que me piden, si me kieren pedir codigo de alguno vayan a mi cuenta de tiktok y m lo comenttas en algun video (si son mas de uno los que quieres que t enseñe mandame un mensaje y lo publicare por aki) 

aprovechando les aviso que ahora hay un chat publico en mi blog, esta al inicio por ahoraa pero kizas reordene mis gadgets ya que al agregar mas se pierde el orden que les puse desde un inicio, bueno ya sin nada mas que avisar me despido de ustedes, si tienen alguna duda sobre algun gadget de hoy me lo comentan y si no, pues no ZJKAJFFADGDA BAIBAIIIII SE CUIDAANNNNN :3:3.