domingo, 31 de mayo de 2026

Códigos de mis gadgets para que te inspires - Parte 1

Holaa, wow dos entradas en una misma semana esto es un milagro, aquí les va la continuación del tutorial para decorar tu blog, más específicamente los códigos para los gadgets. Espero que les sirva de ayuda
La mayoría de los gadgets y funciones que tengo en mi blog los logré gracias a Deepseek y Gemini. Es súper útil incluso si ya sabes programar, pero no manejas bien el HTML y JavaScript que usa Blogger (he programado muy pocas veces en el, asi que me falta práctica). Yo empiezo así de simple: pidiéndole algo con claridad para que cumpla con lo que quiero hacer. La IA te va a decir: "Por supuesto, claro que sí", etc., etc., y te va a pasar un código, además de algunas anotaciones por si quieres cambiar algo
Tal vez como yo, tú sabes programar en otros lenguajes o entiendes la lógica, pero cuando se trata de meter código en Blogger te pierdes. No sabes dónde ponerlo, cómo adaptarlo, o por qué a veces funciona y a veces no. Ahí es donde la IA me salva.
Adelante con los códigos 

 MINI PAINT 

<link href="https://fonts.googleapis.com/css2?family=Fredoka+One&amp;family=VT323&amp;display=swap" rel="stylesheet" />

<style>
/* Mini paint*/
.paint-classic {
  font-family: 'Courier New', monospace;
  background: #FFE4F2;
  border: 1.5px solid #FF69B4;
  width: 220px;
  margin: 0 auto;
  box-sizing: border-box;
  box-shadow: 2px 2px 0px #FFB6C1;
  border-radius: 8px;
  overflow: hidden;
}

/* BARRA DE TITULO */
.paint-titlebar {
  background: linear-gradient(90deg, #FF69B4, #FFB6C1);
  padding: 4px 8px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: move;
}

.paint-title {
  font-family: 'Courier New', monospace;
  font-size: 8px;
  font-weight: normal;
  color: #FFFFFF;
  text-shadow: 0.5px 0.5px 0px #FF1493;
}

.paint-close-btn {
  width: 16px;
  height: 14px;
  background: #FF69B4;
  border: 1px solid #FFFFFF;
  border-radius: 3px;
  font-size: 7px;
  text-align: center;
  line-height: 12px;
  cursor: pointer;
  color: #FFFFFF;
}

/* BARRA DE HERRAMIENTAS */
.paint-toolbar {
  background: #FFF0F5;
  padding: 5px;
  display: flex;
  gap: 6px;
  justify-content: center;
  border-bottom: 1px solid #FFB6C1;
}

.paint-tool {
  width: 26px;
  height: 26px;
  background: #FFFFFF;
  border: 1.5px solid #FFB6C1;
  border-radius: 6px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
}

.paint-tool.active {
  border: 1.5px solid #FF1493;
  background: #FFE4F2;
}

/* AREA DEL CANVAS */
.paint-canvas-area {
  background: #D0D0D0;
  padding: 6px;
  display: flex;
  justify-content: center;
  border-bottom: 1px solid #FFB6C1;
}

.paint-canvas {
  display: block;
  background: #FFFFFF;
  border: 1.5px solid #FFB6C1;
  border-radius: 4px;
  cursor: crosshair;
  width: 100%;
  max-width: 196px;
  height: auto;
  touch-action: none;
}

/* CONTROLES - COMPACTOS Y ORDENADOS */
.paint-controls {
  background: #FFF0F5;
  padding: 5px 8px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 6px;
  border-bottom: 1px solid #FFB6C1;
}

.paint-size-control {
  display: flex;
  align-items: center;
  gap: 5px;
  background: #FFFFFF;
  padding: 2px 6px;
  border-radius: 12px;
  border: 1px solid #FFB6C1;
}

.paint-size-label {
  font-family: 'Courier New', monospace;
  font-size: 7px;
  color: #FF69B4;
}

.paint-size {
  -webkit-appearance: none;
  width: 55px;
  height: 3px;
  background: #FFB6C1;
  border-radius: 3px;
}

.paint-size::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 8px;
  height: 8px;
  background: #FF69B4;
  border: 1px solid #FF1493;
  border-radius: 50%;
  cursor: pointer;
}

.paint-size-value {
  font-family: 'Courier New', monospace;
  font-size: 7px;
  color: #C71585;
  background: #FFE4F2;
  padding: 1px 4px;
  border-radius: 8px;
  min-width: 22px;
  text-align: center;
}

/* BOTON LIMPIAR */
.paint-clear-btn {
  font-family: 'Courier New', monospace;
  background: #FFFFFF;
  border: 1px solid #FFB6C1;
  border-radius: 12px;
  padding: 2px 8px;
  font-size: 7px;
  cursor: pointer;
  color: #FF69B4;
}

.paint-clear-btn:hover {
  background: #FF69B4;
  color: #FFFFFF;
}

/* PALETA DE COLORES */
.paint-palette-area {
  background: #FFF0F5;
  padding: 5px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 5px;
}

.paint-current-color {
  width: 28px;
  height: 28px;
  border: 1.5px solid #FFB6C1;
  border-radius: 6px;
  background: #FF69B4;
  cursor: pointer;
}

.paint-palette {
  display: flex;
  gap: 2px;
  flex-wrap: wrap;
  flex: 1;
  background: #FFFFFF;
  padding: 3px;
  border-radius: 6px;
  border: 1px solid #FFB6C1;
}

.paint-palette-color {
  width: 14px;
  height: 14px;
  border: 1px solid #FFB6C1;
  border-radius: 3px;
  cursor: pointer;
}

.paint-palette-color:hover {
  transform: scale(1.05);
  border-color: #FF1493;
}

.paint-classic:hover {
  transform: translateY(-1px);
  box-shadow: 3px 3px 0px #FFB6C1;
}
</style>

<div class="paint-classic">
  <div class="paint-titlebar">
    <span class="paint-title">🎨 paint</span>
    <div class="paint-close-btn">✕</div>
  </div>

  <div class="paint-toolbar">
    <div class="paint-tool" id="toolPencil">✏️</div>
    <div class="paint-tool" id="toolEraser">🧽</div>
    <div class="paint-tool" id="toolFill">🪣</div>
  </div>

  <div class="paint-controls">
    <div class="paint-size-control">
      <span class="paint-size-label">size</span>
      <input class="paint-size" type="range" min="2" max="15" value="5" id="sizeSlider" />
      <span class="paint-size-value" id="sizeValue">5</span>
    </div>
    <button class="paint-clear-btn" id="clearBtn">clean</button>
  </div>

  <div class="paint-canvas-area">
    <canvas class="paint-canvas" id="miniCanvas" width="196" height="130"></canvas>
  </div>

  <div class="paint-palette-area">
    <div class="paint-current-color" id="currentColor" style="background:#FF69B4"></div>
    <div class="paint-palette" id="colorPalette"></div>
  </div>
</div>

<script>
(function() {
  const canvas = document.getElementById('miniCanvas');
  const ctx = canvas.getContext('2d');
  let drawing = false;
  let currentColor = '#FF69B4';
  let currentTool = 'pencil';
  let size = 5;
  let lastX = 0, lastY = 0;

  const paletteColors = [
    '#000000', '#808080', '#800000', '#808000', '#008000', '#008080', '#000080', '#FF69B4',
    '#FF1493', '#FFB6C1', '#C71585', '#FF8C00', '#FFD700', '#7FFF00', '#00BFFF', '#9370DB',
    '#FFFFFF', '#FFE4F2'
  ];

  const paletteDiv = document.getElementById('colorPalette');
  paletteColors.forEach(color => {
    const colorDiv = document.createElement('div');
    colorDiv.className = 'paint-palette-color';
    colorDiv.style.backgroundColor = color;
    colorDiv.addEventListener('click', () => {
      currentColor = color;
      document.getElementById('currentColor').style.backgroundColor = color;
      if (currentTool === 'eraser') {
        currentTool = 'pencil';
        document.getElementById('toolEraser').classList.remove('active');
        document.getElementById('toolPencil').classList.add('active');
      }
    });
    paletteDiv.appendChild(colorDiv);
  });

  const pencil = document.getElementById('toolPencil');
  const eraser = document.getElementById('toolEraser');
  const fill = document.getElementById('toolFill');

  pencil.addEventListener('click', () => {
    currentTool = 'pencil';
    pencil.classList.add('active');
    eraser.classList.remove('active');
    fill.classList.remove('active');
  });
  eraser.addEventListener('click', () => {
    currentTool = 'eraser';
    eraser.classList.add('active');
    pencil.classList.remove('active');
    fill.classList.remove('active');
  });
  fill.addEventListener('click', () => {
    currentTool = 'fill';
    fill.classList.add('active');
    pencil.classList.remove('active');
    eraser.classList.remove('active');
  });
  pencil.classList.add('active');

  const sizeSlider = document.getElementById('sizeSlider');
  const sizeValue = document.getElementById('sizeValue');
  sizeSlider.addEventListener('input', () => {
    size = parseInt(sizeSlider.value);
    sizeValue.textContent = size;
  });

  document.getElementById('clearBtn').addEventListener('click', () => {
    ctx.fillStyle = '#FFFFFF';
    ctx.fillRect(0, 0, canvas.width, canvas.height);
  });

  function getPos(e) {
    const rect = canvas.getBoundingClientRect();
    const scaleX = canvas.width / rect.width;
    const scaleY = canvas.height / rect.height;
    if (e.touches) {
      return {
        x: (e.touches[0].clientX - rect.left) * scaleX,
        y: (e.touches[0].clientY - rect.top) * scaleY
      };
    }
    return {
      x: (e.clientX - rect.left) * scaleX,
      y: (e.clientY - rect.top) * scaleY
    };
  }

  function startDraw(e) {
    e.preventDefault();
    drawing = true;
    const pos = getPos(e);
    lastX = pos.x;
    lastY = pos.y;
    
    if (currentTool === 'fill') {
      ctx.fillStyle = currentColor;
      ctx.fillRect(0, 0, canvas.width, canvas.height);
      drawing = false;
      return;
    }
    
    ctx.beginPath();
    ctx.arc(lastX, lastY, size / 2, 0, Math.PI * 2);
    ctx.fillStyle = currentTool === 'eraser' ? '#FFFFFF' : currentColor;
    ctx.fill();
  }

  function draw(e) {
    e.preventDefault();
    if (!drawing) return;
    const pos = getPos(e);
    ctx.beginPath();
    ctx.moveTo(lastX, lastY);
    ctx.lineTo(pos.x, pos.y);
    ctx.strokeStyle = currentTool === 'eraser' ? '#FFFFFF' : currentColor;
    ctx.lineWidth = size;
    ctx.lineCap = 'round';
    ctx.lineJoin = 'round';
    ctx.stroke();
    lastX = pos.x;
    lastY = pos.y;
  }

  function stopDraw() { drawing = false; }

  canvas.addEventListener('mousedown', startDraw);
  canvas.addEventListener('mousemove', draw);
  canvas.addEventListener('mouseup', stopDraw);
  canvas.addEventListener('mouseleave', stopDraw);
  canvas.addEventListener('touchstart', startDraw, { passive: false });
  canvas.addEventListener('touchmove', draw, { passive: false });
  canvas.addEventListener('touchend', stopDraw);

  ctx.fillStyle = '#FFFFFF';
  ctx.fillRect(0, 0, canvas.width, canvas.height);

  let dragHeader = document.querySelector('.paint-titlebar');
  let card = document.querySelector('.paint-classic');
  let isDragging = false;
  let dragOffsetX = 0, dragOffsetY = 0;

  if (dragHeader) {
    dragHeader.style.cursor = 'move';
    dragHeader.addEventListener('mousedown', function(e) {
      if (e.target === dragHeader || dragHeader.contains(e.target)) {
        isDragging = true;
        dragOffsetX = e.clientX - card.offsetLeft;
        dragOffsetY = e.clientY - card.offsetTop;
        card.style.position = 'relative';
        card.style.left = card.offsetLeft + 'px';
        card.style.top = card.offsetTop + 'px';
        e.preventDefault();
      }
    });
    document.addEventListener('mousemove', function(e) {
      if (isDragging) {
        card.style.left = (e.clientX - dragOffsetX) + 'px';
        card.style.top = (e.clientY - dragOffsetY) + 'px';
      }
    });
    document.addEventListener('mouseup', function() {
      isDragging = false;
    });
  }
})();
</script>

 Idea de nota con tu info para el perfil

<link href="https://fonts.googleapis.com/css2?family=Fredoka+One&amp;family=VT323&amp;display=swap" rel="stylesheet" />

<style>
/* NOTEPAD WINDOWS Lasito */
.lasito-notepad {
  font-family: 'Courier New', 'Segoe UI', monospace;
  background: #FFE4F2;
  border: 2px solid #FF69B4;
  width: 260px;
  margin: 0 auto;
  box-sizing: border-box;
  box-shadow: 4px 4px 0px #FFB6C1;
}

/* BARRA DE TÍTULO */
.lasito-titlebar {
  background: linear-gradient(90deg, #FF69B4, #FFB6C1);
  padding: 6px 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: move;
  border-bottom: 1px solid #FF1493;
}

.lasito-title {
  font-family: 'Segoe UI', 'Courier New', monospace;
  font-size: 11px;
  font-weight: normal;
  color: #FFFFFF;
  text-shadow: 1px 1px 0px #FF1493;
}

.lasito-titlebar-btns {
  display: flex;
  gap: 3px;
}

.lasito-close-btn {
  width: 22px;
  height: 18px;
  background: #FF69B4;
  border: 1px solid #FFFFFF;
  font-size: 9px;
  text-align: center;
  line-height: 16px;
  cursor: pointer;
  color: #FFFFFF;
  font-weight: normal;
}

/* ÁREA DE CONTENIDO */
.lasito-content {
  background: #FFFFFF;
  padding: 12px;
  font-family: 'Courier New', monospace;
  font-size: 10px;
  color: #333333;
  line-height: 1.6;
}

/* Avatar */
.lasito-avatar-wrap {
  position: relative;
  width: 70px;
  height: 70px;
  margin: 8px auto 12px;
  background: #FFF0F5;
  border: 2px solid #FF69B4;
  border-radius: 50%;
  padding: 3px;
}

.lasito-avatar-wrap img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  display: block;
}

/* Corazón */
.lasito-heart {
  position: absolute;
  top: -12px;
  right: -10px;
  background: #FF69B4;
  color: #FFFFFF;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  border: 2px solid #FFE4F2;
  box-shadow: 2px 2px 0px #FFB6C1;
  animation: lsHeart 1.2s ease infinite;
}

@keyframes lsHeart {
  0%,100% { transform: scale(1); }
  25% { transform: scale(1.2); }
  50% { transform: scale(1); }
}

/* Data box */
.lasito-data {
  margin: 12px 0;
  padding: 8px;
  border: 1px solid #FFB6C1;
  background: #FFF9F0;
  border-radius: 8px;
}

.lasito-row {
  display: flex;
  justify-content: space-between;
  margin-bottom: 5px;
  font-size: 10px;
  color: #C71585;
  font-family: 'Courier New', monospace;
  font-weight: normal;
}

.lasito-label { 
  opacity: 0.7; 
  color: #FF69B4;
}

.lasito-online { 
  animation: lsBlink 1s infinite;
  color: #FF1493;
}

@keyframes lsBlink {
  0%,49% { opacity: 1; }
  50%,100% { opacity: 0.4; }
}

/* Tags */
.lasito-tags {
  display: flex;
  gap: 6px;
  justify-content: center;
  margin: 10px 0;
  flex-wrap: wrap;
}

.lasito-tag {
  font-family: 'Fredoka One', cursive;
  color: #FF1493;
  border: 1px solid #FF69B4;
  background: #FFF0F5;
  padding: 4px 10px;
  border-radius: 20px;
  font-size: 10px;
  font-weight: normal;
  cursor: pointer;
  transition: all 0.2s;
}

.lasito-tag:hover {
  background: #FF69B4;
  color: #FFFFFF;
  transform: scale(1.02);
}

/* Bio */
.lasito-bio {
  margin: 10px 0;
  padding: 8px;
  background: #FFF9F0;
  border-left: 3px solid #FF69B4;
  border-radius: 5px;
  font-size: 10px;
  color: #C71585;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  font-family: 'Courier New', monospace;
}

.lasito-cursor {
  animation: lsCursor 1s infinite;
  margin-left: 3px;
  font-weight: normal;
  color: #FF1493;
}

@keyframes lsCursor {
  0%,50% { opacity: 1; }
  51%,100% { opacity: 0; }
}

/* Footer */
.lasito-footer {
  display: flex;
  justify-content: center;
  margin-top: 10px;
  padding: 6px;
  background: #FFF0F5;
  border-top: 1px solid #FFB6C1;
  border-radius: 5px;
  font-size: 8px;
  color: #FF69B4;
  font-family: 'Fredoka One', cursive;
  font-weight: normal;
}

/* Efecto hover */
.lasito-notepad:hover {
  transform: translateY(-2px);
  box-shadow: 6px 6px 0px #FFB6C1;
  transition: all 0.2s ease;
}
</style>

<div class="lasito-notepad">
  <!-- Barra de título -->
  <div class="lasito-titlebar">
    <span class="lasito-title">📝 Lasito.Profile</span>
    <div class="lasito-titlebar-btns">
      <div class="lasito-close-btn">✕</div>
    </div>
  </div>

  <!-- Área de contenido -->
  <div class="lasito-content">
    <div class="lasito-avatar-wrap">
      <img src="https://i.ibb.co/2YCV6gyt/48050b0d7a158d474c0a966b48906109.jpg" alt="Lasito" />
      <div class="lasito-heart">❤</div>
    </div>

    <div class="lasito-data">
      <div class="lasito-row">
        <span class="lasito-label">NOMBRE&gt;</span>
        <span>LASITO</span>
      </div>
      <div class="lasito-row">
        <span class="lasito-label">BIRTH&gt;</span>
        <span>2007.LEO</span>
      </div>
      <div class="lasito-row">
        <span class="lasito-label">STATUS&gt;</span>
        <span class="lasito-online">ONLINE</span>
      </div>
    </div>

    <div class="lasito-tags">
      <span class="lasito-tag">[ARTISTA]</span>
      <span class="lasito-tag">[PROGRAMADORA]</span>
    </div>

    <div class="lasito-bio">
      <span>Me encantan los gatos y los perros ✨</span>
      <span class="lasito-cursor">_</span>
    </div>

    <div class="lasito-footer">
      <span>💕 LASITO.PROFILE 💕</span>
    </div>
  </div>
</div>

<script>
(function() {
  // Efecto en los tags
  var tags = document.querySelectorAll('.lasito-tag');
  tags.forEach(function(tag) {
    tag.addEventListener('click', function() {
      this.style.transform = 'scale(0.95)';
      var t = this;
      setTimeout(function(){ t.style.transform = 'scale(1)'; }, 100);
    });
  });

  // Efecto draggable (ventana movible)
  var dragHeader = document.querySelector('.lasito-titlebar');
  var card = document.querySelector('.lasito-notepad');
  var isDragging = false;
  var dragOffsetX = 0, dragOffsetY = 0;

  if (dragHeader) {
    dragHeader.style.cursor = 'move';
    dragHeader.addEventListener('mousedown', function(e) {
      if (e.target === dragHeader || dragHeader.contains(e.target)) {
        isDragging = true;
        dragOffsetX = e.clientX - card.offsetLeft;
        dragOffsetY = e.clientY - card.offsetTop;
        card.style.position = 'relative';
        card.style.left = card.offsetLeft + 'px';
        card.style.top = card.offsetTop + 'px';
        e.preventDefault();
      }
    });
    document.addEventListener('mousemove', function(e) {
      if (isDragging) {
        card.style.left = (e.clientX - dragOffsetX) + 'px';
        card.style.top = (e.clientY - dragOffsetY) + 'px';
      }
    });
    document.addEventListener('mouseup', function() {
      isDragging = false;
    });
  }
})();
</script>

Y hasta aquí la primera parte, los códigos son muy largooos asi que muy pronto subiré una segunda parte
Como viste, no necesitas saber programar. Solo tienes que explicarle bien a la IA lo que quieres y ella hace el trabajo pesado por ti. Yo empecé así de simple y hoy mi blog está lleno de cositas que ni imaginaba, Byeee nos vemos en una próxima entrada



at
Labels: ,

4 comentarios:

  1. Dani★Ela Blog 𖹭.31 de mayo de 2026 a las 10:48 a.m.

    OMG AMO, AMO, AMO. Gracias por esto, de verdad me haces la vida mas fácil jsjsjsjsjs... Si puedes, amaría saber como pusiste el chat, desde hace rato me hace mucha ilusión poder poner uno <3

    ResponderBorrar
    Respuestas
    1. Lasito3 de junio de 2026 a las 4:24 p.m.

      Siii claro, en el próximo tutorial explicaré como colocar el chat, me alegra que te haya gustado (⁠ ⁠╹⁠▽⁠╹⁠ ⁠)

      Borrar
  2. Chiara vs la adultez31 de mayo de 2026 a las 12:05 p.m.

    omggg muchisimas gracias!!! 😭😭❤️❤️

    ResponderBorrar

Suscribirse a: Comentarios de la entrada (Atom)

Haulcito de Shein

 Holaa por fin el tan esperado haul de shein (tenia olvidada esta entrada, andaba enferma). Me encanta comprar, diría que soy una shopaholic...

  • Datos curiosos sobre mí
    Holaa he estado algo desaparecida, esto se debe a que ya entré a la universidad. Me gustaría que me conozcan mejor, asi que les traigo 18 da...
  • Mi primer blog! Y presentación personal
    Hellooo soy Lasito o me pueden decir laso. Bienvenid@s a mi blog!! Actualmente soy estudiante universitaria de programación de software , p...
  • Sailor moon ha cambiado mi vida
    Es raro decir que un anime o serie influya en tu vida, pero... Para mí   Sailor Moon no fue solo un anime; fue un antes y un después.   En ...