Subscribe my YouTube channel: Click to Subscribe!

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 के साथ मेरे इस ब्लॉग में।
Please wait 0 seconds...
Scroll Down and click on Go to Link for destination
Congrats! Link is Generated
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 अच्छा लगा होगा। आप कमेंट करके ज़रूर बताइयेगा। ऐसे ही जानकारी भरे पोस्ट के लिए इस ब्लॉग को फॉलो करें। 

إرسال تعليق

Please don't enter any spam link in the Comment Section. All comments are reviewed by the Admin!
Cookie Consent
We serve cookies on this site to analyze traffic, remember your preferences, and optimize your experience.
Oops!
It seems there is something wrong with your internet connection. Please connect to the internet and start browsing again.
AdBlock Detected!
We have detected that you are using adblocking plugin in your browser.
The revenue we earn by the advertisements is used to manage this website, we request you to whitelist our website in your adblocking plugin.
Site is Blocked
Sorry! This site is not available in your country.