How to create Enable Double Click To Copy Code To Clipboard In Blogger
To enhance user experience on your Blogger website, you can implement a feature that allows visitors to double-click on code snippets to copy them to the clipboard. Follow these steps to integrate this functionality:
1. Open your Blogger Admin Panel and navigate to the "Theme" section. Click the down arrow to reveal more options.
2. Select the "Edit HTML" option. Once the theme codes load, locate the </body> tag.
3. Copy and paste the following codes just before the </body> tag:
<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>
Note: Using our Tool, you can Parse your HTML Codes before using them in the code box.
Save your changes.
That's it! Your website now allows users to conveniently copy code snippets with a double-click. Ensure to save your changes for the modifications to take effect.