How to add a visual box such as a display box or horizontal scroll code to a blog post, with a "copy" button.
Ce type de fenêtre permet d'insérer un extrait de code, un poème, une citation ou un texte long sans prendre trop de place dans le corps de l'article de blog, et aussi permet de le copier d’un simple clic.
This type of window is a great way to add a long text excerpt, a code snippet, a poem, or a quote without taking up too much space in the body of your blog post, and it also lets readers copy it with just one click.
1ère étape : insérer le bloc dans un article :
- passer en mode HTML (cliquer sur le bouton < > Affichage HTML),
- coller le code suivant 👇 à l’endroit où vous voulez que la boîte apparaisse :
Step 1 : Insert the block into a blogpost:
- open the post in Blogger,
- switch to HTML mode (click on the < > HTML View button),
- paste the following code 👇 where you want the box to appear:
<div style="margin-bottom: 2em; position: relative;">
<!--📋 Bouton Copier / "Copy" Button -->
<button onclick="copyToClipboard(this)" style="
background-color: #f0f0f0; /* 🎨 Couleur de fond / Background color*/
border: 1px solid #ccc; /* 📏 Bordure grise sobre / Simple gray border */
border-radius: 6px; /* 🔳 Coins légèrement arrondis / Slightly rounded corners */
box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.1); /* 🩶 Ombre légère / Subtle shadow */
color: #333; /* 🎨 Couleur du texte / Text color */
cursor: pointer; /* 🖱️Curseur main au survol / Pointer cursor on hover */
font-family:system-ui, sans-serif; /* 🔠 Police moderne par défaut / Clean system font */
font-size: 13px; /* 🔠 Taille du texte / Text size */
padding: 6px 12px; /* 📏 Marges internes du bouton / Button padding */
position: absolute; /* 📌Position absolue dans le bloc / Absolute inside block */
right: 16px; /* ↔️ Distance du bord droit / Right distance */
top: 12px; /* ↕️ Distance du haut / Top distance */
z-index: 10; /* 📚 Priorité d'affichage / Display layer priority */
display: flex;
align-items: center;
gap: 6px;
transition: background-color 0.3s ease;
">
<svg width="16" height="16" fill="#333" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"
aria-hidden="true">
<path d="M16 1H4a2 2 0 0 0-2 2v14h2V3h12V1z"/>
<path d="M20 5H8a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7a2 2 0 0 0-2-2zm0 18H8V7h12v16z"/>
</svg>
Copier / Copy
</button>
<!-- 📄 Fenêtre de contenu / Content display box -->
<div style="
background:rgb(249, 249, 249); /* 🎨 Couleur de fond du bloc / Box background color */
border-radius: 8px; /* 🔳 Coins arrondis / Rounded corners */
border: 1px solid rgb(204, 204,204); /* 📏 Bordure grise légère / Light gray border */
font-family: Georgia, serif; /* 🔠 Police pour le texte / Monospace font */
font-size: 14px; /* 🔠 Taille de texte dans le bloc / Text size in box */
max-height: 400px; /* 📏 Hauteur max avec scroll / Max height with scrollbar */
overflow: auto; /* ☑️ Ajout du scroll si nécessaire / Scroll if needed */
padding: 1em; /* 📦 Espace intérieur du bloc / Inner spacing */
white-space: pre; /* 🔡 Respect des sauts de ligne et espaces / Preserve line breaks and spacing */
">
Texte de la fenêtre intégrée (code, citation, texte long,…)
Text of the embedded window (code, quote, long text, etc.)
</div>
</div>
Les commentaires en face des lignes de code indiquent ce qui peut être changé selon vos goûts.
Voir ici un exemple de personnalisation du bouton Copier.
Customization: the codes highlighted in yellow are the settings you can adjust according to your preferences. See here for the HEX code of the colors to copy and paste as replacements (for example, black: #000000 and light gray: #f0f0f0).
The comments next to the lines of code indicate what can be changed according to your preferences.
See here for an example of customizing the Copy button.
2e étape : ajouter le script suivant tout en bas de l'article :
Step 2: Add the following script at the very bottom of the post:
- still in HTML mode, paste this script 👇 once (it will work for all display boxes on the page if you insert several, as here):
<script>
function copyToClipboard(button) {
const pre = button.nextElementSibling;
const text = pre.innerText;
navigator.clipboard.writeText(text).then(() => {
const originalHTML = button.innerHTML;
button.innerText = "Copié ! / Copied!"; // ✅ Message de succès / Success message
button.style.backgroundColor = "#dcedc8"; //🟩 Vert doux confirmation / Soft green on success
setTimeout(() => {
button.innerText = original; // 🔄 Retour texte original / Restore original text
button.style.backgroundColor = "#f0f0f0"; // Retour au gris neutre / Return to neutral background
}, 2000);
}).catch(err => {
console.error('Erreur copie :', err); // ❌ Console log en cas d'erreur / Log if error
button.innerText = "❌ Erreur"; // 🔔 Message d’erreur / Error message
});
}
</script>
Commentaires