Cómo Añadir un Botón de Copiar Código en Bloques PRE/CODE para Blogger

Mejora la experiencia de usuario en tu blog agregando un botón de copiar código automático para Blogger en todos tus bloques de texto preformateado, sin necesidad de usar scripts pesados ni librerías externas.

El problema de seleccionar y copiar código manualmente en Blogger

Cuando publicas fragmentos de HTML, CSS o JavaScript en Blogger, los lectores suelen tener problemas al seleccionar el código manualmente desde teléfonos móviles o computadoras. Un botón inteligente detecta automáticamente cualquier etiqueta <pre> y permite copiar todo el texto al portapapeles con confirmación visual rápida.

Paso 1: Agrega los estilos CSS a la plantilla de tu blog

Ve al panel de Blogger > Tema > Personalizar > Avanzado > Añadir CSS personalizado (o pégalo antes de </head> en la edición HTML):

/* Contenedor relativo para alojar el botón */
pre {
  position: relative;
  background: #1e293b;
  color: #f8fafc;
  padding: 18px 15px 15px 15px;
  border-radius: 8px;
  overflow-x: auto;
  font-family: 'Fira Code', Consolas, Monaco, monospace;
}

/* Estilos del botón de copiar */
.btn-copy-code {
  position: absolute;
  top: 8px;
  right: 8px;
  background: #334155;
  color: #ffffff;
  border: none;
  border-radius: 5px;
  padding: 5px 10px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s ease, transform 0.1s ease;
  z-index: 10;
}

.btn-copy-code:hover {
  background: #2563eb;
}

.btn-copy-code.copied {
  background: #16a34a;
}

Paso 2: Agrega el Script de automatización antes de cerrar la plantilla

Abre la edición de HTML de tu plantilla en Blogger, busca la etiqueta de cierre </body> e inserta el siguiente fragmento justo antes de ella:

<script>
document.addEventListener('DOMContentLoaded', () => {
  // Buscar todos los bloques pre de la entrada
  const codeBlocks = document.querySelectorAll('pre');

  codeBlocks.forEach((block) => {
    // Crear el botón
    const button = document.createElement('button');
    button.className = 'btn-copy-code';
    button.type = 'button';
    button.innerText = 'Copiar';

    // Insertar el botón dentro del bloque pre
    block.style.position = 'relative';
    block.appendChild(button);

    // Evento de clic para copiar el código
    button.addEventListener('click', async () => {
      const code = block.querySelector('code') ? block.querySelector('code').innerText : block.innerText;
      
      try {
        await navigator.clipboard.writeText(code.trim());
        button.innerText = '¡Copiado!';
        button.classList.add('copied');

        setTimeout(() => {
          button.innerText = 'Copiar';
          button.classList.remove('copied');
        }, 2000);
      } catch (err) {
        console.error('Error al copiar el código:', err);
      }
    });
  });
});
</script>

Personalización y Consejos Adicionales

Este recurso es compatible con cualquier plantilla y no afecta los módulos nativos de Blogger. Puedes adaptarlo fácilmente según tus necesidades:

Cambio de posición: Si prefieres que el botón esté en la esquina inferior, cambia en el CSS la propiedad top: 8px; por bottom: 8px;.
Estilo de confirmación: Modifica la clase .btn-copy-code.copied en el CSS si deseas personalizar el color verde (#16a34a) que aparece tras la confirmación de copiado.
Soporte para resaltadores de sintaxis: Funciona en combinación con librerías como Prism.js o Highlight.js sin causar conflictos de diseño.