How to Add Code Box in Blogger - Grablem

Hello friends, In this post we will discuss how we can use copy to clipboard button in our blogger website post so that user can copy all code in one click. 

Let's see how bloggers add a code box or copy button to a post. Follow the below steps to add this code box button in blogger post.

Steps 1: Copy the below code and paste in the blogger post HTML editior section.

<style>
      /* CSS for styling the code box */
      .code-box {
        background-color: #f1f1f1;
        padding: 10px;
        border-radius: 5px;
        font-family: monospace;
      }
    </style>

    <div class="code-box">
      <pre id="code">console.log('Hello, World!')</pre>
      <button id="copy-button" style="display: block; margin: 10px auto;">Copy to Clipboard</button>
    </div>

    <script>
      // JavaScript for adding the "Copy to Clipboard" functionality
      var copyButton = document.getElementById("copy-button");
      copyButton.addEventListener("click", function() {
        var code = document.getElementById("code").innerText;
        navigator.clipboard.writeText(code).then(function() {
          alert("Code copied to clipboard!");
        }, function(err) {
          console.error("Failed to copy code: ", err);
        });
      });
    </script>

Steps 2: Now you need to parse the HTML, CSS, or Javascript that you want to display in the code box. So,  you can see in the below image.

Steps 3: Paste the code into the given HTML Parse Code Tool and get the parse code for the code box. Then, Paste the HTML Parse Code Tool generated code from the place shown in the image.

Steps 4: So, Paste the code in between the pre-tag and save the blog post as shown in the above image. Now the code box with the Clipboard button will be added to your Website.

I hope if you have followed all the above steps correctly then you have successfully added code box or copy to click button in blogger. If you still have any problem, then comment below and I will solve your problem. Thank You