Comment ajouter une boîte d'affichage de code dans un article de Blogger ?

ajouter une boîte d'affichage de code dans un article

Pour ajouter une boîte d'affichage de code à un article Blogger, il existe plusieurs façons de le faire. Mais il est important de choisir les meilleurs afin qu'ils n'aient pas d'impact négatif sur votre blog.

Remarque: Le code fonctionnera s'il est inséré dans un article ou une page Blogger standard.

Cette fonction est utilisée pour afficher des codes pour empêcher que quelque chose se produise.

L'élément "<pre>" dans la section d'affichage du code de Blogger est utilisé pour afficher le code sur la page afin que le visiteur puisse le voir.

Nous inclurons également un bouton de copie pour permettre aux visiteurs de copier plus facilement les code depuis l'article.

Si vous souhaitez publier des codes sur votre blog de blogueur, cette boîte vous sera utile.

Cette boîte de présentation de code sur le blog est la meilleure de tous les temps. Parce qu'elle est innovante, compétente et unique. De plus, il a un bouton pour copier le code.

Comment configurer l'affichage du code dans votre blog ?

1. Pour commencer vous devez faire une sauvegarde de votre modèle de blogueur avant d'y apporter des modifications, pour le faire : Allez dans Tableau de bord Blogger Thème > Apparence > Cliquez sur le menu déroulant à côté de Personnaliser > Sauvegarder.
2. Allez dans Tableau de bord Blogger > Apparence > Cliquez sur le menu déroulant à côté de Personnaliser > Modifier le code HTML
3. Effectuez une recherche en saisissant []>/b:skin> dans la fenêtre de recherche qui s'affiche lorsque vous appuyez sur les touches Ctrl + F de votre clavier et collez le code suivant juste au dessus :
   Code source : /*-- codebox by jistweb.com --*/ .code-box{border:1px solid #ccc;border-radius:4px;padding:16px;position:relative;margin:10px 0;} .code-box pre{background-color:#f8f8f8;border:0;margin:0;overflow:auto;padding:16px} .copy-button{background-color:#6cc060;border:0;border-radius:2px;color:#fff;cursor:pointer;font-size:12px;outline:0;padding:5px 13px;position:absolute;right:16px;top:16px;transition:background-color .2s} .copy-button:hover{background-color:#5ca751} .post-body pre, pre.code-box {direction: ltr;display: block;background-color: #9b9b9b0d;font-family: Monospace;font-size: 13px;color: #444444;white-space: pre-wrap;line-height: 1.4em;padding: 20px;border: 1px solid #9b9b9b1a;border-radius: 5px;}
4. Recherchez le code en saisissant "/body" dans le champ de recherche : Juste au dessus, collez le code suivant :
   Code source : <script type="text/javascript"> //<![CDATA[ const codeBoxes=document.querySelectorAll(".code-box");codeBoxes.forEach(t=>{const e=t.querySelector(".copy-button");e.addEventListener("click",()=>{var e=t.querySelector("code");const o=window.getSelection(),c=document.createRange();c.selectNodeContents(e),o.removeAllRanges(),o.addRange(c),document.execCommand("copy"),o.removeAllRanges()})}); //]]></script>
5. Cliquez sur Enregistrer le thème.

Comment afficher les code ajouter dans l'article

1. Vous devez visiter l'article où vous souhaitez afficher le code.
2. Cliquer sur le symbole du stylo dans le coin supérieur droit, sélectionner afficher HTML pour le faire.
3. Collez le code suivant à l'emplacement où vous souhaitez qu'il apparaisse :

<div class="code-box">

  <label for="code-source">Code source :</label>

  <textarea id="code-source" cols="50" name="textarea" rows="5" style="background: rgb(51, 51, 51); color: #6eff33; height: 250px; width: 100%;">Mettez ici le code que vous souhaitez afficher</textarea>

  <button class="copy-button">Copier</button>

</div>

Vous devez utiliser ce dernier code et saisir à chaque fois le code que vous souhaitez y afficher.

Comment ajouter le code a afficher

1. vous devez revenir au mode d'écriture normal en cliquant sur le symbole < > et en choisissant d'affichage "Rédiger" en haut à gauche.
2. Vous pouvez maintenant coller le code pour l'afficher à la place du texte affiché (mettez ici le code que vous souhaitez afficher). 

L'inclusion de la zone d'affichage du code avec le bouton de copie est maintenant entièrement expliquée.