How to Add a Code box with copy button to your Blogger website

ByAbhishek padhi Updated on
How to add a code box with copy button

 In this Article, i will show you how you can add a code box with a Copy to Clipboard button. So, users can copy long codes provided by you with a single click. 

So, in this way, you can improve your user experience and share different HTML, CSS & Javascript codes easily with your readers. The same code box is used to provide codes to you. 🙂

So, without any delay, let’s check the process to add this Advanced code box. 

How to Add Code box with a copy to Clipboard button in Blogger

To Add the code box with the copy button, you need to follow the below steps. 

Log in to your Blogger dashboard and create a New Blog post. 

Now switch to HTML view, copy the below HTML code, and add your code inside the <pre> Tag. 

<!-- Code Box 1 -->
<div class="code-container">
  <div class="code-header">
    <h3>HTML Code</h3>
    <button class="copy-button" data-target="code-content1">
      <svg xmlns="http://www.w3.org/2000/svg" class="copy-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
        <rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect>
        <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path>
      </svg>
    </button>
  </div>
   <!--Add Your Parse HTML, CSS and Js code Here-->
  <div id="code-content1" class="code-block">
    <pre>&lt;p&gt;This is a simple HTML code&lt;/p&gt;</pre>
  </div>
</div>

<!-- Code Box 2 (Remove if you don't need) -->

<div class="code-container">
  <div class="code-header">
    <h3>CSS Code</h3>
    <button class="copy-button" data-target="code-content2">
      <svg xmlns="http://www.w3.org/2000/svg" class="copy-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
        <rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect>
        <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path>
      </svg>
    </button>
  </div>
  <div id="code-content2" class="code-block">
    <pre>&lt;style&gt;
/* Container */
.code-container {
  position: relative;
  background: #ffffff;
  border: 1px solid #dcdcdc;
  border-radius: 8px;
  padding: 10px;
  margin: 20px 0;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
&lt;/style&gt;</pre>
  </div>
</div>

<!-- Copy Notification -->
<div id="new-toast" class="new-toast"></div>

Now copy the CSS and JavaScript code and paste it just below it. (Note: You can also add it in your theme editor just above </body> tag )

<style>
.code-container {
  position: relative;
  background: #ffffff;
  border: 1px solid #dcdcdc;
  border-radius: 8px;
  padding: 10px;
  margin: 20px 0;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.code-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 8px;
  border-bottom: 1px solid #eaeaea;
}

.code-header h3 {
  margin: 0;
  font-size: 1.2rem;
  font-family: system-ui;
  font-weight: 700;
  color: #333;
}

.copy-button {
  background-color: transparent;
  border: 1px solid #dcdcdc;
  border-radius: 4px;
  cursor: pointer;
  padding: 5px;
  transition: background-color 0.3s ease, border-color 0.3s ease;
  display: flex;
  align-items: center;
}

.copy-button:hover {
  background-color: #f9f9f9;
  border-color: #ccc;
}

.copy-button.copied {
  background-color: #28a745;
  border-color: #28a745;
  color: #fff;
}

.copy-icon {
  width: 18px;
  height: 18px;
  color: currentColor;
}

.code-block {
  padding: 10px;
  border-radius: 4px;
  font-family: 'Courier New', monospace;
  font-size: 0.9rem;
  color: #333;
  overflow-x: auto;
  margin-top: 10px;
}

.new-toast {
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  background-color: #333;
  color: white;
  padding: 12px 20px;
  font-size: 1rem;
  border-radius: 6px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.5s ease, visibility 0s 0.5s;
  z-index: 9999;
}

.new-toast.show {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.5s ease;
}

.new-toast.success {
  background-color: #28a745;
}

.new-toast.error {
  background-color: #dc3545;
}

.new-toast.info {
  background-color: #17a2b8;
}
</style>

<script>
document.addEventListener("DOMContentLoaded", function () {
  const copyButtons = document.querySelectorAll('.copy-button');
  
  copyButtons.forEach(button => {
    button.addEventListener('click', function () {
      const targetId = button.getAttribute('data-target');
      copyCode(targetId, button);
    });
  });
});

function copyCode(contentId, button) {
  const content = document.getElementById(contentId);
  const range = document.createRange();
  const selection = window.getSelection();

  selection.removeAllRanges();
  range.selectNodeContents(content);
  selection.addRange(range);

  try {
    document.execCommand("copy");
    showToast("Code copied to clipboard!", "success");
    button.classList.add("copied");
  } catch (err) {
    console.error("Failed to copy", err);
    showToast("Failed to copy the code!", "error");
  }

  selection.removeAllRanges();
  setTimeout(() => button.classList.remove("copied"), 2000);
}

function showToast(message, type = "info") {
  const toast = document.getElementById("new-toast");
  toast.textContent = message;
  toast.classList.add("show", type);

  setTimeout(() => toast.classList.remove("show", type), 3000);
}

</script>

Now your code box is added to your Blogger website with the copy to clipboard button. If you want to add multiple code boxes on a single page then you have to copy the HTML code again and change the id on it.

Here is the Preview of the code box.

Code box with copy button for Blogger

Note: If you are using HTML or Javascript code then you have to parse the code before adding it to the pre-tag, otherwise, the code box will not show it properly. 

So, you can use a Free HTML parse tool to convert your codes and then paste them inside the pre-tag. ( <pre> Your_code_Here </pre> )

You can also further customize the code box by changing the background color, box shadow effects, etc.  You can get a variety of Box shadow effects here. 

By implementing these changes, you not only make the code easier to read but also improve the user experience, making it more likely that your visitors will share and engage with your content!

Watch the video tutorial

Did this solution work for you? Let us know in the comments below!

If you have any trouble during this process, then I recommend you watch the video carefully. Otherwise, you can also ask in our Telegram Group. 

You can Download the Old Style Code box with Copy button Code from here. 

Hello there. I am Abhishek Padhi, an Indian digital entrepreneur. With a handful of years of practice and experiment, I’m here to help bloggers like you to create an outstanding blog and earn money from it.

Related Articles..

How to Enable Double Click to Copy to Clipboard in Blogger

Enable Double Click to Copy Code to Clipboard in Blogger

ByAbhishek padhi

In this article, I will show you how you can enable double click to copy functionality in your Blogger website….

Leave a Reply

Your email address will not be published. Required fields are marked *

4 Comments