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.
