How to Add Stylish Code Blocks with Copy Button in Blogger

Want to display code snippets beautifully in your Blogger posts? Plain text code often looks dull and makes it hard for readers to copy. In this step-by-step guide, you'll learn how to create modern, responsive code blocks with a one-click copy button. This approach is lightweight, mobile-friendly, and follows Google AdSense content policies.

Features of This Code Block

Clean, dark-themed code box with rounded corners.
Floating copy button that works instantly.
Responsive on mobile and desktop screens.
Customizable colors and button text.
Lightweight — no heavy scripts required.

Step 1: Add CSS to Your Blogger Theme

Go to Blogger → Theme → Edit HTML, find <b:skin> and paste this:


code-box {
  --btn-copy: "Copy";
  --btn-copied: "Copied!";
  --bg-code: #2b2835;
  --txt-code: #9c92c0;
  --txt-comment: #7b7b7b;
  --txt-string: #ffd18a;
  --txt-selector: #a58fff;
  --txt-property: #a58fff;
  --txt-tag: #6c6886;
  --txt-tag-name: #efebff;
  --txt-attr: #c6b8ff;
  --txt-class: #f0ebff;
  --txt-number: #ffcf97;
  position: relative;
  font-family: SFMono-Regular, monospace;
}

code-box > code {
  background: var(--bg-code);
  color: var(--txt-code);
  display: block;
  overflow-x: auto;
  white-space: pre;
  padding: 1.5rem;
  border-radius: 0.5rem;
}

.copy-btn {
  position: absolute;
  inset: 0.5rem 0.5rem auto auto;
  padding: 0.5rem 0.75rem;
  background: rgba(0, 0, 0, 0.5);
  color: #fff;
  border: none;
  border-radius: 0.5rem;
  cursor: pointer;
  font-size: 14px;
  transition: background 0.3s;
}

.copy-btn:hover { background: rgba(0, 0, 0, 0.75); }
.copy-btn::before { content: var(--btn-copy); }
.copy-btn.active::before { content: var(--btn-copied); }

Step 2: Add JavaScript for the Copy Button

Paste this before the closing </body> tag:


<script>
(function () {
  async function loadHighlighter() {
    return new Promise((resolve, reject) => {
      const s = document.createElement('script');
      s.src = 'https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11/build/highlight.min.js';
      s.onload = resolve;
      s.onerror = reject;
      document.body.appendChild(s);
    });
  }

  function addCopyButton(block) {
    if (!navigator?.clipboard) return;
    const btn = document.createElement('button');
    btn.className = 'copy-btn';
    btn.addEventListener('click', () => {
      navigator.clipboard.writeText(block.textContent).then(() => {
        btn.classList.add('active');
        btn.disabled = true;
        setTimeout(() => {
          btn.disabled = false;
          btn.classList.remove('active');
        }, 2000);
      });
    });
    block.parentNode.insertBefore(btn, block.parentNode.firstChild);
  }

  async function initCodeBlocks() {
    const blocks = document.querySelectorAll('code-box > code');
    if (!blocks.length) return;
    await loadHighlighter();
    window.hljs?.highlightAll();
    blocks.forEach(addCopyButton);
  }

  document.addEventListener('DOMContentLoaded', initCodeBlocks);
})();
</script>

Step 3: Add a Code Block in Your Blogger Post

Use this format when adding code snippets to your posts:


<code-box>
<code class="language-html">
<h1>Hello World</h1>
</code>
</code-box>

Customization Tips

Change Button Text: Edit --btn-copy and --btn-copied.
Switch Colors: Modify --bg-code or --txt-code for light/dark themes.
Change Font: Update font-family to match your blog style.

FAQ – Frequently Asked Questions

1. Is this method safe for AdSense approval?

Yes, this method is fully compliant with Google AdSense policies. It does not interfere with ads, does not use intrusive scripts, and is lightweight.

2. Can I use this for multiple programming languages?

Absolutely. You can change the class name to language-html, language-css, language-js, or any language supported by Highlight.js.

3. Will it slow down my website?

No, it uses a single lightweight library loaded from a CDN and only activates on pages with code blocks.

Final Thoughts

Adding a copy button to code snippets improves user experience, keeps readers engaged, and helps your blog look more professional. With this setup, you can display your code cleanly without affecting your website’s loading speed or Google AdSense compliance.