How to Add a Copy Link Button in Blogger Posts (HTML + CSS + JS)

Add a Copy Link Button in Blogger Posts

Want to let visitors easily copy the current post URL? This how to add a stylish Morden copy link button next to your share icons or anywhere in your Blogger website post.

📌 HTML Code:

<a href="javascript:void(0);" class="copy-link" onclick="copyPostLink(this)" title="Copy Link">
  <svg xmlns="http://www.w3.org/2000/svg" height="20" width="20" viewBox="0 0 24 24" fill="currentColor">
    <path d="M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm3 4H8c-1.1 0-2 .9-2 2v16h14c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2zm0 18H8V7h11v16z"/>
  </svg>
</a>

🎨 CSS Code:

<style>
.copy-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background: #e6e6e6;
  border-radius: 50%;
  box-shadow: 0 2px 4px rgba(0,0,0,0.15);
  margin-left: 5px;
  transition: all 0.3s ease;
}
.copy-link:hover {
  background-color: #cce6ff;
  transform: scale(1.05);
}
</style>

⚙️ JavaScript Code:

<script>
function copyPostLink(element) {
  const postUrl = window.location.href;
  navigator.clipboard.writeText(postUrl).then(() => {
    element.innerHTML = "✅";
    setTimeout(() => {
      element.innerHTML = `
        <svg xmlns="http://www.w3.org/2000/svg" height="20" width="20" viewBox="0 0 24 24" fill="currentColor">
          <path d="M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm3 4H8c-1.1 0-2 .9-2 2v16h14c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2zm0 18H8V7h11v16z"/>
        </svg>`;
    }, 1500);
  }).catch(err => {
    alert('Copy failed: ' + err);
  });
}
</script>

✅ Result:

After inserting these codes, your Blogger post will have a clean copy button that works perfectly on desktop and mobile. This button helps users share your post URL instantly.