Guide 2026 : Comment ajouter un Bouton "Copier le Code" (Copy Code Snippet) sur Blogger

 

Bonjour à tous, c'est Lucas Martin. De retour sur Cash Astuce pour une nouvelle optimisation technique indispensable pour tout blog de développement ou de tutoriels. Si vous partagez des extraits de code (HTML, CSS, JavaScript) sur votre site, vous avez sûrement remarqué un problème UX majeur : sélectionner manuellement du code sur un smartphone est un véritable cauchemar pour vos lecteurs.

Sur les sites professionnels (comme GitHub ou StackOverflow), la solution est standardisée : un bouton "Copier le Code" (Copy to Clipboard) intégré directement dans le bloc. Aujourd'hui, je vais vous montrer comment automatiser cela sur Blogger.

Le meilleur dans cette solution ? C'est rétroactif. Le script que nous allons créer, en pur Vanilla JavaScript (sans surcharger avec jQuery), va scanner automatiquement tous vos anciens et nouveaux articles pour injecter le bouton magique sur toutes vos balises <pre> !

Pourquoi cette optimisation booste votre SEO et l'UX ?

Google ne juge plus seulement vos mots-clés, il analyse le comportement des utilisateurs (Core Web Vitals). Lorsqu'un développeur trouve un code sur votre site et peut le copier en un clic, cela engendre :

• Une baisse du taux de rebond (Bounce Rate) : L'utilisateur est satisfait immédiatement de sa visite.
• Un signal de qualité algorithmique : L'interaction avec des éléments de la page (clic sur le bouton) indique à Googlebot que votre page est vivante et utile.
• Zéro impact sur la vitesse : Nous utilisons l'API moderne navigator.clipboard, qui pèse moins d'un kilo-octet.

Le Tutoriel d'Intégration (Étape par Étape)

Nous allons diviser le travail en deux parties très simples : le design (CSS) et l'intelligence (JavaScript). Pensez toujours à faire une sauvegarde de votre thème avant de commencer.

Étape 1 : Le Design du Bouton (Code CSS)

Allez dans Thème > Modifier le code HTML. Cherchez la balise <b:skin><![CDATA[ ou l'emplacement où vous mettez habituellement votre CSS. Ajoutez ce code pour styliser le conteneur du code et le bouton de copie :

/* Style Bouton Copier le Code - Cash Astuce */
.ca-code-wrapper {
  position: relative;
  margin-bottom: 20px;
}
.ca-code-wrapper pre {
  background: #1e1e1e;
  color: #d4d4d4;
  padding: 40px 15px 15px 15px; /* Espace en haut pour le bouton */
  border-radius: 8px;
  overflow-x: auto;
  font-family: Consolas, Monaco, "Courier New", monospace;
  font-size: 14px;
  border-left: 4px solid #0056b3;
}
.ca-copy-btn {
  position: absolute;
  top: 8px;
  right: 8px;
  background-color: #0056b3;
  color: #ffffff;
  border: none;
  border-radius: 4px;
  padding: 5px 12px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}
.ca-copy-btn:hover {
  background-color: #003d82;
}
.ca-copy-btn.copied {
  background-color: #28a745; /* Devient vert quand c'est copié */
}

Étape 2 : L'automatisation JavaScript

Descendez tout en bas de votre code HTML, juste au-dessus de la balise fermante </body>. Collez ce script. C'est lui qui va chercher toutes vos balises <pre> pour y accrocher le bouton sans modifier vos articles :

<!-- Script Bouton Copier par Cash Astuce -->
<script>//<![CDATA[
document.addEventListener('DOMContentLoaded', function() {
  const codeBlocks = document.querySelectorAll('pre');
  
  codeBlocks.forEach(function(block) {
    // Création du conteneur
    const wrapper = document.createElement('div');
    wrapper.className = 'ca-code-wrapper';
    
    // Création du bouton
    const button = document.createElement('button');
    button.className = 'ca-copy-btn';
    button.innerText = 'Copier';
    
    // Insertion dans le DOM
    block.parentNode.insertBefore(wrapper, block);
    wrapper.appendChild(block);
    wrapper.appendChild(button);
    
    // Événement au clic (API Clipboard)
    button.addEventListener('click', function() {
      const code = block.innerText;
      navigator.clipboard.writeText(code).then(function() {
        button.innerText = 'Copié !';
        button.classList.add('copied');
        
        // Remise à zéro après 2 secondes
        setTimeout(function() {
          button.innerText = 'Copier';
          button.classList.remove('copied');
        }, 2000);
      }).catch(function(err) {
        console.error('Erreur lors de la copie : ', err);
      });
    });
  });
});
//]]></script>

Étape 3 : Comment l'utiliser dans vos articles ?

Vous n'avez absolument rien de nouveau à apprendre ! Dans l'éditeur HTML de vos articles Blogger, continuez d'utiliser simplement les balises standards :

<pre>Votre code HTML, CSS ou JS ici...</pre>

Le script JavaScript détectera automatiquement le <pre>, l'enveloppera dans le design sombre et ajoutera le bouton "Copier" interactif.

Conclusion et Structure SEO

Optimiser un blog technique ne s'arrête jamais à la simple publication de contenu. C'est l'addition de ces petites fonctionnalités (Micro-interactions) qui fidélise votre audience.

Pour parfaire la structure technique de votre site, une excellente expérience utilisateur doit toujours être couplée à une architecture d'exploration claire. Si vous ne l'avez pas encore fait, je vous recommande vivement de déployer un Sommaire Automatique JavaScript pour organiser la lecture de vos longs tutoriels, et d'implémenter notre récent Guide sur le Fil d'Ariane (Breadcrumbs) JSON-LD afin d'obtenir vos Rich Snippets sur Google. Cette trinité (Copie de Code + Sommaire + Fil d'Ariane) fera de votre blog une forteresse technique inébranlable.

Testez le bouton sur cet article même (essayez de copier le code ci-dessus !) et dites-moi en commentaire si cette automatisation vous a fait gagner du temps.