How to Add a Copy to Clipboard Button in Blogger (Modern Clipboard API + Fallback) - KodeRian

Sharing your post should be effortless—for you and your readers. A small Copy to Clipboard button that instantly copies the current post URL (or any text you choose) can seriously boost sharing on forums, group chats, WhatsApp communities, and internal teams. In this tutorial, you’ll learn a modern, reliable way to add a Copy Link button in Blogger using the Clipboard API, complete with a graceful fallback for older browsers, clean CSS, accessibility best practices, and optional extras like a toast notification.

We’ll start with a basic, copy-paste setup, then expand with options (copy URL, copy title + URL, copy selected text, add tooltips, change styles, and more). The goal: give your readers a frictionless way to share your content—especially when the social share you want isn’t available. While this isn’t a customize scrollbar Blogger tutorial, we’ll lean on the same attention to detail you’d use in a Blogger CSS scrollbar or any front-end polish: clean, fast, and user-friendly.

What You’ll Build

A compact share module placed below your post’s share icons (or anywhere you like) that:

• Shows a read-only input containing your current post URL (binds dynamically with data:blog.url).
• Provides a Copy button that writes the URL to the clipboard using navigator.clipboard.writeText().
• Falls back to a safe, compatible method for older browsers.
• Optionally copies Title + URL, shows a toast feedback, and supports keyboard/screen readers properly.

Before You Start

You only need your Blogger Theme editor. No external libraries are required. If you already use jQuery and prefer it, we’ll add a short jQuery variant later—though the modern vanilla solution is recommended.

Step-by-Step Tutorial: Add a Copy to Clipboard Button in Blogger

Step 1 — Add the HTML block where you want the feature

Place this block where you’d like the copy module to appear—commonly below your share icons in the post template. You can add it inside your post template or even within the post body (HTML view) if you prefer per-post placement.

<!-- Copy to Clipboard: Basic Share URL Module -->
<div class="permalink" role="group" aria-label="Copy post link">
  <input id="copy-link" name="shortlink" type="text" readonly
         expr:value="data:blog.url"
         aria-label="Post URL" />

  <button type="button" class="copy-btn" id="copy-btn"
          aria-label="Copy post link">
    <svg aria-hidden="true" viewBox="0 0 24 24" width="20" height="20">
      <path d="M16 1H4c-1.1 0-2 .9-2 2v12h2V3h12V1zm3 4H8c-1.1 0-2 .9-2 2v14c0 
      1.1.9 2 2 2h11c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2zm0 16H8V7h11v14z"></path>
    </svg>
    <span class="copy-label">Copy Link</span>
  </button>

  <span class="copy-toast" id="copy-toast" aria-live="polite" aria-atomic="true"></span>
</div>

Step 2 — Add the CSS styles

Paste the CSS into your theme’s stylesheet (inside <style> or <b:skin>). Adjust tokens to your brand. The default background uses a dark slate; change as you like.

/* ==== Copy to Clipboard (Blogger) ==== */
.permalink{
  position: relative;
  z-index: 1;
  display: flex;
  align-items: stretch;
  gap: 10px;
  margin-top: 24px;
  max-width: 100%;
}

#copy-link{
  flex: 1 1 auto;
  display: block;
  background: #1c2733;               /* <-- change to your brand color */
  border: 0;
  color: #fefefe;
  font: 15px/1.3 "Roboto","Helvetica","Arial",sans-serif;
  letter-spacing: .3px;
  padding: 12px 10px;
  height: 45px;
  width: 100%;
  margin: 0;
  box-sizing: border-box;
  border-radius: 10px;
  transition: box-shadow 300ms ease, background 300ms ease;
  outline: none;
}

#copy-link:focus{
  box-shadow: 0 0 0 3px rgba(59,130,246,.35);
}

.copy-btn{
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 45px;
  padding: 0 14px;
  border: 0;
  border-radius: 10px;
  background: #2f3b4a;
  color: #fefefe;
  cursor: pointer;
  font: 600 14px/1 "Inter","Roboto",system-ui;
  transition: transform 120ms ease, background 200ms ease, opacity 200ms;
}

.copy-btn:hover{ background: #344454; }
.copy-btn:active{ transform: translateY(1px); }

.copy-btn svg{ display: block; fill: currentColor; }
.copy-label{ display: inline-block; }

.copy-toast{
  position: absolute;
  top: -36px;
  right: 0;
  background: #10b981;               /* success green */
  color: #081016;
  padding: 6px 10px;
  font: 600 13px/1 "Inter","Roboto",system-ui;
  border-radius: 8px;
  transform: translateY(-10px);
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s ease, transform .25s ease;
}

.copy-toast.show{
  opacity: 1;
  transform: translateY(0);
}

/* Compact layout for small screens */
@media (max-width: 480px){
  .permalink{ flex-direction: column; }
  .copy-btn{ justify-content: center; }
}

Step 3 — Add the modern JavaScript (with fallback)

This script first tries the Clipboard API. If unavailable (old browsers or restricted contexts), it falls back to a selection-based copy method. Add the script right before </body>.

<script>
// Copy to Clipboard (Vanilla JS with fallback)
(function(){
  var btn = document.getElementById('copy-btn');
  var input = document.getElementById('copy-link');
  var toast = document.getElementById('copy-toast');

  if(!btn || !input) return;

  function showToast(msg, ok){
    if(!toast) return;
    toast.textContent = msg || (ok ? 'Link copied!' : 'Copy failed');
    toast.style.background = ok ? '#10b981' : '#ef4444';
    toast.classList.add('show');
    window.setTimeout(function(){ toast.classList.remove('show'); }, 1600);
  }

  function legacyCopy(text){
    try {
      var ta = document.createElement('textarea');
      ta.value = text;
      ta.setAttribute('readonly','');
      ta.style.position = 'absolute';
      ta.style.left = '-9999px';
      document.body.appendChild(ta);
      ta.select();
      var ok = document.execCommand('copy');
      document.body.removeChild(ta);
      return ok;
    } catch(e){
      return false;
    }
  }

  async function copyText(text){
    if(!text) return false;
    if(navigator.clipboard && navigator.clipboard.writeText){
      try {
        await navigator.clipboard.writeText(text);
        return true;
      } catch(e){
        return legacyCopy(text);
      }
    }
    return legacyCopy(text);
  }

  btn.addEventListener('click', function(){
    var value = (input && input.value) ? input.value.trim() : location.href;
    copyText(value).then(function(ok){
      showToast(ok ? 'Link copied!' : 'Copy failed', ok);
      if(ok) input.focus();
    });
  });

  // Optional: click input to select
  input.addEventListener('click', function(){
    input.select();
  });
})();
</script>

That’s the basic setup—done!

Open a post, click the button, and paste anywhere to confirm the link copies correctly. From here, you can customize styles, placement, and behavior.

Optional Enhancements (Pick What You Like)

1) Copy “Title + URL” instead of only the URL

Great for contexts where readers prefer a shareable line. Replace the button handler with this variant:

<script>
(function(){
  var btn = document.getElementById('copy-btn');
  var input = document.getElementById('copy-link');
  var toast = document.getElementById('copy-toast');

  function showToast(msg){ if(toast){ toast.textContent = msg; toast.classList.add('show'); setTimeout(()=>toast.classList.remove('show'),1600); } }

  async function copy(text){
    try { await navigator.clipboard.writeText(text); return true; }
    catch(e){
      var ta=document.createElement('textarea'); ta.value=text; ta.style.position='absolute'; ta.style.left='-9999px';
      document.body.appendChild(ta); ta.select(); var ok=document.execCommand('copy'); document.body.removeChild(ta); return ok;
    }
  }

  if(btn){
    btn.addEventListener('click', async function(){
      var title = document.title || '';
      var url = (input && input.value) ? input.value : location.href;
      var combined = title ? (title + ' — ' + url) : url;
      var ok = await copy(combined);
      showToast(ok ? 'Title + link copied!' : 'Copy failed');
    });
  }
})();
</script>

2) Copy selected text + URL (contextual sharing)

If the reader highlights a paragraph and taps Copy Link, you can append the URL under their selection:

<script>
(function(){
  var btn = document.getElementById('copy-btn');
  var toast = document.getElementById('copy-toast');

  function notify(ok){ if(toast){ toast.textContent = ok ? 'Selection + link copied!' : 'Copy failed'; toast.classList.add('show'); setTimeout(()=>toast.classList.remove('show'),1600); } }

  async function copy(text){
    try { await navigator.clipboard.writeText(text); return true; }
    catch(e){ var t=document.createElement('textarea'); t.value=text; t.style.position='absolute'; t.style.left='-9999px'; document.body.appendChild(t); t.select(); var ok=document.execCommand('copy'); document.body.removeChild(t); return ok; }
  }

  if(btn){
    btn.addEventListener('click', async function(){
      var sel = window.getSelection ? String(window.getSelection()) : '';
      var url = location.href;
      var payload = sel ? (sel + '\n\n' + url) : url;
      var ok = await copy(payload);
      notify(ok);
    });
  }
})();
</script>

3) jQuery version (if you already load jQuery)

Prefer a tiny jQuery handler similar to your original snippet? Here’s an updated one that uses the modern Clipboard API when possible:

<script>
$(function(){
  $('.permalink .copy-btn').on('click', function(){
    var val = $('#copy-link').val() || location.href;
    if(navigator.clipboard && navigator.clipboard.writeText){
      navigator.clipboard.writeText(val).then(function(){
        $('#copy-toast').text('Link copied!').addClass('show');
        setTimeout(function(){ $('#copy-toast').removeClass('show'); }, 1600);
      }).catch(function(){
        $('#copy-link').trigger('select');
        document.execCommand('copy');
        $('#copy-toast').text('Link copied!').addClass('show');
        setTimeout(function(){ $('#copy-toast').removeClass('show'); }, 1600);
      });
    } else {
      $('#copy-link').trigger('select');
      document.execCommand('copy');
      $('#copy-toast').text('Link copied!').addClass('show');
      setTimeout(function(){ $('#copy-toast').removeClass('show'); }, 1600);
    }
  });
});
</script>

Placement Ideas

• Below social share icons: Ideal for audiences who prefer copying a direct link.
• Inside a “Share” box: Pair with WhatsApp/Telegram buttons for a complete share panel.
• In a floating action bar: Keep it visible as readers scroll long tutorials.
• At the end of code snippets: Use a second copy button to copy code blocks (see variant below).

Bonus: Copy any code block

If your blog includes code, add a small “Copy code” button per block:

<script>
(function(){
  document.querySelectorAll('pre > code').forEach(function(block){
    var btn = document.createElement('button');
    btn.className = 'copy-code';
    btn.type = 'button';
    btn.textContent = 'Copy code';
    btn.addEventListener('click', async function(){
      var text = block.innerText;
      try{ await navigator.clipboard.writeText(text); btn.textContent = 'Copied!'; setTimeout(()=>btn.textContent='Copy code',1200); }
      catch(e){ btn.textContent = 'Failed'; setTimeout(()=>btn.textContent='Copy code',1200); }
    });
    block.parentNode.style.position = 'relative';
    block.parentNode.appendChild(btn);
  });
})();
</script>

<style>
.copy-code{
  position:absolute; top:8px; right:8px; z-index:2;
  padding:6px 10px; font:600 12px/1 "Inter",system-ui;
  border:0; border-radius:8px; background:#2f3b4a; color:#fff; cursor:pointer;
}
.copy-code:hover{ background:#344454; }
</style>

Performance & Accessibility Notes

• Lightweight: No external JS is required. The code runs only on user interaction.
• Accessible: The module uses aria-label, keyboard focus states, and a live region (aria-live) for status messages.
• Secure Context: The Clipboard API works best over HTTPS (your blogspot domain uses HTTPS by default).

Troubleshooting

The button does nothing

• Open DevTools > Console for errors. A missing id="copy-btn" or duplicate IDs can break the script.
• Ensure the script is added before </body> so elements exist when the code runs.

Clipboard API error

• Some browsers block clipboard writes on non-user gestures. Make sure copying runs inside a click handler.
• Older browsers: rely on the fallback (document.execCommand('copy')), already included.

URL is incorrect or empty

• Confirm your input uses expr:value="data:blog.url" to bind the current post URL.
• As a backup, the script falls back to location.href.

Styles look off on my theme

• Adjust the background: #1c2733, radius, and padding to match your brand system.
• If you use a dark theme, ensure text contrast remains accessible (WCAG AA or better).

“Copy code” button overlaps content

• Add extra padding-top in pre or move the button below with a different layout.

Frequently Asked Questions (FAQ)

Is this safe? Will it hurt SEO?

Yes, it’s safe. It simply copies text to the user’s clipboard and doesn’t alter your content. It won’t hurt SEO; in fact, easier sharing can increase organic traffic.

Do I need jQuery?

No. The modern vanilla setup is lean and future-proof. A jQuery version is included only if your theme already loads it.

Can I customize the text copied?

Yes—copy only the URL, title + URL, selected text + URL, or any custom template. It’s your call.

Will this work on mobile devices?

Yes. Modern mobile browsers support the Clipboard API; the fallback assists older ones. Always test on Android and iOS.

Can I add multiple copy buttons on one page?

Absolutely. Just ensure each button references the right target (e.g., different inputs or code blocks) and that IDs are unique.

Pro Tips (Make It Feel Premium)

• Add subtle micro-interactions: Button press states, toasts, and focus rings make the UI feel “alive.”
• Match your brand: Reuse your brand tokens (e.g., #3367d6) for background and focus outlines.
• Use semantic labels: aria-label and live regions improve screen-reader feedback.
• Pair with sharing UX: Keep social buttons + Copy nearby so users have both options.

With a tiny bit of front-end care—the same eye for detail you might apply in a custom scrollbar tutorial or a theme polish—you now have a copy link button in Blogger that looks great, works everywhere, and respects accessibility.

Conclusion

A Copy to Clipboard button for Blogger is one of those small enhancements that pulls more than its weight. It reduces friction, makes your site easier to share, and covers the gaps when a preferred social share isn’t available. You’ve now got a clean, modern, and accessible module with options to copy URLs, titles, or selections—plus a fallback so it works broadly. Tweak the styles to match your brand, place it where it helps your readers most, and you’re good.

Found this useful? Do us both a favor—bookmark this guide, share it with a friend who’s polishing their Blogger theme, and subscribe for more hands-on Blogger + front-end tutorials.