Cómo Mostrar Monederos de Criptomonedas con Botón de Copiado en Blogger

Si deseas recibir transferencias o donaciones directamente a tus billeteras cripto (Metamask, Trust Wallet, Binance, etc.) mediante redes como USDT (TRC20/BEP20) o Bitcoin, contar con una caja interactiva que permita copiar la dirección con un solo clic mejora enormemente la experiencia del usuario. Aquí te mostramos cómo construir este gadget en HTML, CSS y JavaScript.

Ventajas del Botón de Copiado Automático

Evita errores de tipeo: Copiar direcciones largas al portapapeles previene pérdidas de fondos por errores manuales.
Soporte multired: Muestra varias redes o direcciones (USDT TRC20, BEP20, BTC, ETH) en un solo bloque organizado.
Ligeros recursos: Utiliza JavaScript nativo sin necesidad de cargar librerías complejas.

Pasos para la Instalación

Inicia sesión en tu panel de Blogger.
Navega a Diseño y selecciona Añadir un gadget en la barra lateral.
Escoge la opción HTML/JavaScript.
Pega el código adjunto, edita tus direcciones de billetera y guarda.

Código HTML, CSS y JavaScript para Monederos Crypto


<!-- Widget Monederos Crypto con Boton Copiar -->
<style>
  .crypto-wallet-container {
    background: #f8f9fa;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 15px;
    font-family: Arial, sans-serif;
    max-width: 380px;
    margin: 10px auto;
  }
  .crypto-row {
    margin-bottom: 12px;
  }
  .crypto-label {
    font-size: 13px;
    font-weight: bold;
    color: #333333;
    margin-bottom: 4px;
    display: block;
  }
  .crypto-input-group {
    display: flex;
    gap: 5px;
  }
  .crypto-address {
    flex: 1;
    background: #ffffff;
    border: 1px solid #cbd5e1;
    padding: 8px;
    font-size: 12px;
    font-family: Consolas, monospace;
    border-radius: 4px;
    color: #475569;
    outline: none;
  }
  .crypto-copy-btn {
    background: #2563eb;
    color: #ffffff;
    border: none;
    padding: 8px 12px;
    font-size: 12px;
    font-weight: bold;
    border-radius: 4px;
    cursor: pointer;
    transition: background 0.2s;
  }
  .crypto-copy-btn:hover {
    background: #1d4ed8;
  }
</style>

<div class="crypto-wallet-container">
  <h4 style="margin:0 0 10px 0; font-size:15px; color:#1e293b; text-align:center;">🪙 Donaciones en Criptomonedas</h4>
  
  <!-- USDT TRC20 -->
  <div class="crypto-row">
    <span class="crypto-label">USDT (Red TRC20):</span>
    <div class="crypto-input-group">
      <input type="text" id="walletTRC20" class="crypto-address" value="TYourTRC20WalletAddressHere12345" readonly />
      <button class="crypto-copy-btn" onclick="copyWalletAddress('walletTRC20')">Copiar</button>
    </div>
  </div>

  <!-- Bitcoin -->
  <div class="crypto-row">
    <span class="crypto-label">Bitcoin (BTC):</span>
    <div class="crypto-input-group">
      <input type="text" id="walletBTC" class="crypto-address" value="1YourBTCWalletAddressHere12345" readonly />
      <button class="crypto-copy-btn" onclick="copyWalletAddress('walletBTC')">Copiar</button>
    </div>
  </div>
</div>

<script>
  function copyWalletAddress(elementId) {
    var copyText = document.getElementById(elementId);
    copyText.select();
    copyText.setSelectionRange(0, 99999); // Para dispositivos moviles
    navigator.clipboard.writeText(copyText.value);
    alert("¡Dirección copiada con éxito!: " + copyText.value);
  }
</script>