Enable Double Click to Copy Code to Clipboard in Blogger
In this article, I will show you how you can enable double click to copy functionality in your Blogger website.
Adding a double-click functionality to copy content to the clipboard offers several benefits, particularly in the context of user experience and convenience. It will be helpful for Mobile Users as it is quite challenging to highlight a long piece of Text or code and then copy it to the clipboard.
Here is the code to Enable Double click to Copy to Clipboard on the Blogger website.Â
<style>
.bottom-alert {
position: fixed;
bottom: 20px;
left: 50%;
transform: translateX(-50%);
background-color: #204ecf;
color: #fff;
padding: 10px;
text-align: center;
display: none;
width: 200px;
border-radius: 5px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
z-index: 999999;
}
</style>
<div class='bottom-alert' id='bottomAlert'>Code Copied!</div>
<script>
var codeElements = document.querySelectorAll(".copyableCode");
codeElements.forEach(function(element) {
element.addEventListener("dblclick", function() {
copyToClipboard(element);
});
});
function copyToClipboard(element) {
var tempTextArea = document.createElement("textarea");
tempTextArea.value = element.textContent;
document.body.appendChild(tempTextArea);
tempTextArea.select();
tempTextArea.setSelectionRange(0, 99999);
document.execCommand("copy");
document.body.removeChild(tempTextArea);
showBottomAlert();
}
function showBottomAlert() {
var bottomAlert = document.getElementById("bottomAlert");
bottomAlert.style.display = "block";
setTimeout(function() {
bottomAlert.style.display = "none";
}, 3000);
}
</script>Don’t forget to assign the Class (copyableCode) on the Code box as shown in the video. You can use multiple Code boxes within the same page and it will work seamlessly.Â
If you have any doubts, Please ask in the Comment section or Our Telegram Group.
