How to Add Copy to Clipboard Button in Your Blogger Post - Satya ki Pathshala

नमस्कार आप सभी को और स्वागत है आज के टॉपिक How to Add Copy to Clipboard Button in Your Blogger Post के साथ मेरे इस ब्लॉग में। जो लोग नए नए ब्लॉगिंग के फील्ड में आये हैं वो हमेशा अपने ब्लॉगर के डैशबोर्ड को सुन्दर बनाना चाहते हैं। छोटी छोटी कुछ चीज़ें हैं जो आपके डैशबोर्ड को सुन्दर बनाने और यूजर फ्रेंडली बनाने में मदत करती है। 

इनमे से एक है "बटन स्टाइल"। तो मैं आज आपलोगों को यह बताने वाला हूँ की आप कैसे अपने ब्लॉगर पोस्ट पर Copy to Clipboard Button add कर सकते हैं। इसके लिए आपको थोड़ा सा HTML, CSS, और JavaScript की जानकारी होनी चाहिए। और अगर आपको इसके बारे में नहीं पोता तो मैं हूँ न। 

Copy to Clipboard Button क्या होता है:

Copy to Clipboard Button की मदत से आप किसी भी पैराग्राफ को एक सिंगल क्लिक के माध्यम से कॉपी कर सकते हैं जिससे ब्लॉग के विजिटर का यूजर एक्सपीरियंस अच्छा रहता है और उसका समय भी बचता है। आप जब कोई पोस्ट लिख रहे हैं तो उस पोस्ट के साथ मेरे दिए गए कोड को लगा देने से आपका काम हो जायेगा। 

यह उन सब ब्लॉग के लिए सबसे अच्छा काम करेगा जो शायरी, क्वोट्स, स्क्रिप्ट्स इन सब के ऊपर काम करते हैं। इस कोड के इस्तेमाल से उन पैराग्राफ को कॉपी करने में आसानी होती है। 

अपने ब्लॉग पोस्ट में Copy to Clipboard Button कैसे लगाए:

इसके लिए आप निचे दिए वीडियो को पूरा देखें:

डाउनलोड Copy to Clipboard Button Code:

<blockquote id="myInput">

  It is a long-established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here, making it look like readable English.

</blockquote>

<button class="copy-button" id="button">

  <svg aria-hidden="true" height="1em" preserveaspectratio="xMidYMid meet" role="img" viewbox="0 0 24 24" width="1em" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg">

    <g fill="none">

      <path d="M13 6.75V2H8.75A2.25 2.25 0 0 0 6.5 4.25v13a2.25 2.25 0 0 0 2.25 2.25h9A2.25 2.25 0 0 0 20 17.25V9h-4.75A2.25 2.25 0 0 1 13 6.75z" fill="currentColor">

        <path d="M14.5 6.75V2.5l5 5h-4.25a.75.75 0 0 1-.75-.75z" fill="currentColor">

          <path d="M5.503 4.627A2.251 2.251 0 0 0 4 6.75v10.504a4.75 4.75 0 0 0 4.75 4.75h6.494c.98 0 1.813-.626 2.122-1.5H8.75a3.25 3.25 0 0 1-3.25-3.25l.003-12.627z" fill="currentColor"></path>

        </path>

      </path>

    </g></svg>Copy

</button>

<style>

  .copy-button svg{margin-right: 10px;vertical-align: top;}

  .copy-button{

    height: 45px; width: 155px; color: #fff; background: #265df2; outline: none; border: none; border-radius: 8px; font-size: 17px; font-weight: 400; margin: 8px 0; cursor: pointer; transition: all 0.4s ease;}

  .copy-button:hover{background: #2ECC71;}

  @media (max-width: 480px) {#button{width: 100%;}}

</style>

<script>

    function copyFunction() {

    const copyText = document.getElementById("myInput").textContent;

    const textArea = document.createElement('textarea');

    textArea.textContent = copyText;

    document.body.append(textArea);

    textArea.select();

    document.execCommand("copy");

    button.innerText = "Text copied";

      textArea.remove();

  }

  document.getElementById('button').addEventListener('click', copyFunction);

</script>

अब आप इस कॉपी बटन पर जब क्लिक करेंगे तो आपका यह सब कोड कॉपी हो जायेगा। तो आशा करता हूँ आपको यह पोस्ट How to Add Copy to Clipboard Button in Your Blogger Post अच्छा लगा होगा। आप कमेंट करके ज़रूर बताइयेगा। ऐसे ही जानकारी भरे पोस्ट के लिए इस ब्लॉग को फॉलो करें। 

Go to Link