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 helpful for Mobile Users as it is quite challenging to highlighting a long piece of Text or codes and then copy it to the clipboard.

How to Enable Double Click to Copy to Clipboard in Blogger

Here is the code to Enable Double click to Copy to Clipboard in 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. 

Note: Using our Tool, you can Parse your HTML Codes before using them in the code box.

If you have any doubts, Please ask in the video Comment section or in Our Telegram Group.