Enable Double Click To Copy Code To Clipboard In Blogger

Table of Contents
Enable Double Click To Copy Code To Clipboard In Blogger

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.

Post a Comment

Spam is not welcome here. Any form of unsolicited promotional content, repeated messages, or irrelevant comments will be removed. Please contribute meaningfully to the discussion. Failure to adhere to these guidelines may result in moderation, including the possibility of being blocked. Let's keep the conversation engaging and on-topic!