Blogger में Code Box में Copy Option कैसे जोड़ें?

Blogger में code box में copy option जोड़ने के लिए आप एक साधारण HTML और JavaScript का उपयोग कर सकते हैं। इस प्रक्रिया में, आपको एक code box बनाने के लिए HTML और JavaScript का एक छोटा सा script जोड़ना होगा, जो उपयोगकर्ताओं को code को आसानी से copy करने की सुविधा प्रदान करेगा।

यहाँ एक कदम-दर-कदम तरीका है:

1. Code Box HTML Structure:

सबसे पहले, आपको Blogger के पोस्ट में HTML editor में कोड बॉक्स का HTML structure डालना होगा। नीचे एक उदाहरण दिया गया है:

<div class="code-container">
    <pre><code id="codeBlock">
        // यहाँ आपका कोड आएगा
        function helloWorld() {
            console.log("Hello, World!");
        }
    </code></pre>
    <button class="copy-btn" onclick="copyCode()">Copy Code</button>
</div>

यहां:

• <pre><code> का उपयोग कोड को अच्छे से प्रदर्शित करने के लिए किया जाता है।
• <button> को एक copy-btn class दी गई है, जो JavaScript द्वारा काम करेगी।

2. CSS Styling:

कोड बॉक्स और बटन को बेहतर बनाने के लिए कुछ CSS जोड़ सकते हैं:

<style>
    .code-container {
        position: relative;
        margin: 20px 0;
        background-color: #f4f4f4;
        padding: 10px;
        border-radius: 5px;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    }

    pre {
        background-color: #333;
        color: #fff;
        padding: 15px;
        border-radius: 5px;
        white-space: pre-wrap;
        word-wrap: break-word;
    }

    .copy-btn {
        position: absolute;
        top: 10px;
        right: 10px;
        background-color: #4CAF50;
        color: white;
        padding: 8px 12px;
        border: none;
        border-radius: 5px;
        cursor: pointer;
    }

    .copy-btn:hover {
        background-color: #45a049;
    }
</style>

यह CSS:

• Code box के लिए background और text color सेट करता है।
• Copy बटन के लिए styling करता है और hover effect देता है।

3. JavaScript for Copying Code:

अब, कोड को clipboard में कॉपी करने के लिए JavaScript जोड़ें:

<script>
    function copyCode() {
        var copyText = document.getElementById("codeBlock");

        // Select the text field
        copyText.select();
        copyText.setSelectionRange(0, 99999); // For mobile devices

        // Copy the text inside the text field
        document.execCommand("copy");

        // Alert the user that the text has been copied
        alert("Code copied to clipboard!");
    }
</script>

यह JavaScript:

• document.getElementById("codeBlock") के जरिए कोड को सेलेक्ट करता है।
• document.execCommand("copy") का उपयोग clipboard में कोड को कॉपी करने के लिए किया जाता है।
• एक alert देता है, जो उपयोगकर्ता को बताता है कि कोड कॉपी हो गया है।

4. Blogger में जोड़ना:

1. Blogger में Post Editor खोलें।
2. HTML view में जाएं।
3. ऊपर दिए गए HTML, CSS, और JavaScript को पोस्ट में जोड़ें।
4. Publish पर क्लिक करें और आपके पोस्ट में code box के साथ copy button दिखाई देगा।

परिणाम:

अब आपके ब्लॉग में code box होगा, जिसमें एक Copy Code बटन होगा, जो उपयोगकर्ताओं को आसानी से कोड कॉपी करने की अनुमति देगा।