Text and Code Box With Click to Copy Button | Copy to Clipboard in Blogger

क्लिक टू कॉपी बटन के साथ टेक्स्ट और कोड बॉक्स जोड़ने के चरण | ब्लॉगर में क्लिपबोर्ड पर कॉपी करें

- सबसे पहले ब्लॉग पोस्ट को ओपन करें,

- हम इस पोस्ट का लिंक वीडियो डिस्क्रिप्शन में उपलब्ध कराते हैं।

- इस जे एस कोड को कॉपी करें।

- अब, अपने ब्लॉगर डैशबोर्ड पर जाएं।

- थीम पर क्लिक करें।

- कस्टमाइज़ पर क्लिक करें।

- एडिट html पर क्लिक करें।

- अब बस थीम कोड में कहीं भी क्लिक करें।

- अब, अपने कीबोर्ड पर कंट्रोल एफ दबाएं।

- अब, आप खोज बॉक्स देख सकते हैं।

- बस क्लोज हेड टैग टाइप करें

- प्रविष्ट दबाएँ।

- अब, आप क्लोज हेड टैग देख सकते हैं।

- बस इस क्लोज हेड टैग के ऊपर js कोड पेस्ट करें।

- सेव पर क्लिक करें।

- अब वापस पोस्ट पर जाएं।

- इस स्क्रिप्ट कोड को कॉपी करें।

- टेम्प्लेट पेज को एडिट करने के लिए हेड ओवर।

- अब हमें जेएस स्क्रिप्ट कोड को क्लोज बॉडी टैग के ऊपर पेस्ट करना होगा

- एक करीबी बॉडी टैग खोजने के लिए।

- बस थीम कोड में कहीं भी क्लिक करें।

- अब, अपने कीबोर्ड पर कंट्रोल एफ दबाएं।

- अब, आप खोज बॉक्स देख सकते हैं।

- बस क्लोज बॉडी टैग टाइप करें

- प्रविष्ट दबाएँ।

- अब, आप क्लोज बॉडी टैग देख सकते हैं।

- बस इस क्लोज बॉडी टैग के ऊपर js स्क्रिप्ट कोड पेस्ट करें।

- सेव पर क्लिक करें।

- अब वापस पोस्ट पर जाएं।

- इस सीएसएस कोड को कॉपी करें।

- ब्लॉगर डैशबोर्ड पर.

- लेआउट पर क्लिक करें।

- थीम डिजाइनर पर क्लिक करें।

- एडवांस पर क्लिक करें।

- अब ड्रॉप डाउन मेन्यू से "Add CSS" चुनें।

- अब CSS कोड पेस्ट करें।

- सेव पर क्लिक करें।

- अब वापस पोस्ट पर जाएं।

- html कोड पर जाएं।

- अब, इस कोड में, आप $ साइन देख सकते हैं।

- बस $ साइन हटा दें, और लेफ्ट पॉइंटिंग एंगल ब्रैकेट जोड़ें।

- अब इस कोड को कॉपी करें।

- अब इस कोड को उस पोस्ट में पेस्ट करें जहां आप कॉपी को क्लिपबोर्ड पर जोड़ना चाहते हैं।

- पोस्ट खोलें,

- html व्यू पर जाएं।

- अब कोड पेस्ट करें।

- अब, इस कोड में, आप इस टैग को देख सकते हैं,

- बस इसे हटा दें और अपना टेक्स्ट या कोड जोड़ें, जिसे आप क्लिपबोर्ड में रखना चाहते हैं।

- अब, हमें इस कॉपी के लिए क्लिपबोर्ड पर एक अनूठा टैग देना होगा।

- एक अद्वितीय टैग जोड़ने के लिए, आप इस पाठ को देख सकते हैं, बस इसे हटा सकते हैं और क्लिपबोर्ड पर इस प्रतिलिपि के लिए अपना स्वयं का अनूठा टैग जोड़ सकते हैं।

- सुनिश्चित करें कि यह क्लिपबोर्ड काम करने के लिए ये दो टैग समान हैं।

- कृपया ध्यान दें, जब भी आप क्लिपबोर्ड पर नई अलग कॉपी बनाते हैं, तो आपको अलग-अलग अद्वितीय टैग का उपयोग करना चाहिए।

- क्लिपबोर्ड की ऊंचाई बढ़ाने या घटाने के लिए पंक्तियों की संख्या बदलें।

- अब, पोस्ट को अपडेट करें।

- हमने कॉपी को क्लिपबोर्ड पर सफलतापूर्वक जोड़ दिया है।

- यह डिवाइस द्वारा भी उत्तरदायी है।

- जब हम क्लिक टू कॉपी पर क्लिक करते हैं, तो यह क्लिपबोर्ड टेक्स्ट और कोड को कॉपी कर देगा।

- अब, यदि आप इस टेक्स्ट क्षेत्र या कॉपी बटन को कस्टमाइज़ करना चाहते हैं

- इसके बाद बस अपने ब्लॉगर डैशबोर्ड पर जाएं।

- थीम पर क्लिक करें।

- कस्टमाइज़ पर क्लिक करें।

- एडिट html पर क्लिक करें।

- अब बस थीम कोड में कहीं भी क्लिक करें।

- अब, अपने कीबोर्ड पर कंट्रोल एफ दबाएं।

- अब, आप खोज बॉक्स देख सकते हैं।

- बस टाइप करें .copyarea

- अब, आप टेक्स्ट एरिया और कॉपी बटन के लिए CSS देख सकते हैं।

- अगर आप टेक्स्ट एरिया का बैकग्राउंड कलर बदलना चाहते हैं तो इस हेक्स कोड को बदल दें।

- अब, यदि आप कॉपी बटन का रंग बदलना चाहते हैं, तो इस हेक्स कोड को बदलें।

- अगर आप कॉपी बटन होवर इफेक्ट कलर बदलना चाहते हैं तो इस हेक्स कोड को बदलें।

- एक बार जब आप कर लें, तो सेव पर क्लिक करें।

- अब, अगर आप ग्रेडिएंट कॉपी बटन बनाना चाहते हैं।

- फिर पोस्ट पर वापस जाएं।

- इस सीएसएस कोड को कॉपी करें।

- टेम्प्लेट पेज को एडिट करने के लिए हेड ओवर।

- .copyarea . के लिए खोजें

- बटन डॉट क्लिक टू कॉपी बटन पर जाएं।

- अब, इस बैकग्राउंड टैग को हटा दें और CSS ग्रेडिएंट बैकग्राउंड टैग पेस्ट करें।

- अब, बस पहला रंग टैग हटा दें और अपना पहला रंग जोड़ें।

- दूसरा रंग टैग हटाएं और अपना दूसरा रंग जोड़ें।

- एक बार जब आप कर लें, तो सेव पर क्लिक करें।

- अब, हमें कॉपी बटन के लिए होवर रंग बदलने की जरूरत है।

- उसके लिए, पोस्ट पर वापस जाएं।

- इस सीएसएस कोड को कॉपी करें।

- टेम्प्लेट पेज को एडिट करने के लिए हेड ओवर।

- बटन पर जाएं। ClickToCopyButtonhover

- अब, इस बैकग्राउंड टैग को हटा दें और होवर पर ग्रेडिएंट कलर के लिए CSS पेस्ट करें।

- अब, बस दूसरा रंग टैग हटा दें और अपना दूसरा रंग जोड़ें।

- पहला रंग टैग हटाएं और अपना पहला रंग जोड़ें।

- एक बार जब आप कर लें, तो सेव पर क्लिक करें।

- हमने ब्लॉगर में ग्रेडिएंट बटन के साथ क्लिपबोर्ड पर कॉपी सफलतापूर्वक जोड़ दी है।

- पूर्ण।

1. Copy This JS Code and Paste it Above close Head Tag in Blogger Theme file

<script src='https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js'/> <script src='https://clipboardjs.com/dist/clipboard.min.js'/>

2. Copy This script Code and Paste it Above close Body Tag in Blogger Theme file

<script> $(function() { var clipboard = new ClipboardJS('.ClickToCopyButton'); $(".ClickToCopyButton").click(function() { $(this).html('Copied!!'); var that = $(this); var intrvrl = setInterval(function(){ that.html('Click to Copy'); clearInterval(intrvrl); }, 2000); }); }); </script>

3. Copy This CSS and Paste it in Blogger Theme file
Go to: Blogger Dashboard -> Layout -> Theme Designer -> Advanced -> Add CSS

/*-------Click-to-copy-------*/ .copyarea { display: flex; position: relative; width: 100%; height: auto; } .copyarea textarea { width: 100%; box-sizing: border-box; border: none; padding-top: 34px; padding-bottom: 34px; padding-right: 11px; padding-left: 11px; background: #f5f6f7; } .copyarea textarea:focus-visible { outline: -webkit-focus-ring-color auto 0px; } button.ClickToCopyButton { width: 30%; height: auto; position: absolute; top: 0; right: 0; border: none; padding-top: 5px; padding-bottom: 5px; color: #fff; background: #0066ff; } button.ClickToCopyButton:hover { background: #000; } @media screen and (max-width: 500px) {button.ClickToCopyButton { width: 100%; }} /*----xx------------Click-to-copy-------------xxxx---*/

Above one time process only

4. Copy This Code and Paste it in Your Post
You Must Give Unique Tag for Every Different Copy to Clipboard
Remove $ sign from Following code and Add < (Left-Pointing Angle Bracket Symbol)

5. CSS for Gradient Color on Copy to Click Button

background: #first-color; /* fallback for old browsers */ background: -webkit-linear-gradient(to right, #first-color, #second-color); /* Chrome 10-25, Safari 5.1-6 */ background: linear-gradient(to right, #first-color, #second-color); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */

6. CSS For Hover Gradient Color on Copy to Click Button

background: #second-color; /* fallback for old browsers */ background: -webkit-linear-gradient(to right, #second-color, #first-color); /* Chrome 10-25, Safari 5.1-6 */ background: linear-gradient(to right, #second-color, #first-color); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */