How to Enable Copy Code To Clipboard In Blogger

How to Enable Copy Code To Clipboard In Blogger to show you and you can enable double click to copy functionality in your Blogger website. Adding the ability to copy content to the clipboard with a double-click provides various advantages, particularly in terms 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-clicking to copy to the clipboard on the Blogger website. Double Click to Copy Code below:

<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 (copyable code) to the code box as shown in the video. You can use multiple code boxes on the same page, and it will work seamlessly.
Note: Using our Tool, you can parse html code before using them in the code box with this Free Prase Tools.

X

Credit for Abhishek padhi