विषयसूची:
- चरण 1: एक पेन बनाएं
- चरण 2: संदर्भ जोड़ें
- चरण 3: कोड
- चरण 4: अपनी आवश्यकताओं के अनुरूप उस कोड को बदलना
- चरण 5: डेमो
वीडियो: वेबपेज पर क्लिपबोर्ड बटन पर कॉपी डालना: 5 कदम (चित्रों के साथ)
2024 लेखक: John Day | [email protected]. अंतिम बार संशोधित: 2024-01-30 09:21
यह सरल लग सकता है, और मैं इसे इंस्ट्रक्शंस पर डालने के लिए मूर्खतापूर्ण लग सकता हूं, लेकिन वास्तव में, यह इतना आसान नहीं है। CSS, Jquery, HTML, कुछ फैंसी जावास्क्रिप्ट है, और, ओह ठीक है, आप जानते हैं।
चरण 1: एक पेन बनाएं
कोडपेन नाम की यह शानदार साइट है। अतीत में, केवल HTML में कोड करने के लिए, मुझे यह करना पड़ता था
- फ़ाइल एक्सप्लोरर लॉन्च करें।
- मेरे दस्तावेज़ पर जाएँ।
- txt फ़ाइल बनाएँ।
- उस फ़ाइल का नाम बदलकर "MyHTMLDoc.html" कर दें।
- चेतावनी संवाद के लिए ठीक दबाएं।
- फ़ाइल एक्सप्लोरर बंद करें।
- विजुअल स्टूडियो खोलें, जिसमें पांच मिनट लगते हैं।
- फ़ाइल को Visual Studio में खोलें, जिसमें और पाँच मिनट लगते हैं। वीएस बहुत धीमा है।
- शुरू ।
- जब मेरा काम हो जाए, तो मुझे अपना काम देखने के लिए एज में फाइल खोलनी होगी।
अब, आपको बस इतना करना है
- लॉन्च एज।
- https://www.codepen.io पर जाएं।
- ऊपरी दाएं कोने में, नया पेन दबाएं।
- कोडिंग शुरू करें।
देखें कि यह कितना आसान है? बस अपने JS, CSS और HTML को उनके संबंधित बॉक्स में दर्ज करें। परिणाम स्वचालित रूप से दाईं ओर दिखाई देते हैं।
वास्तव में, कोडपेन बहुत बेहतर है, कि मैं आपको अभी अपना खाता बनाने की सलाह देता हूं। हाँ, मुझे एक विज्ञापन बनने से नफरत है, लेकिन मैं इसकी मदद नहीं कर सकता। यह बहुत बेहतर है।मैं इसके बारे में कुछ नहीं कर सकता।
या, यदि आप खाता नहीं बनाना चाहते हैं, तो आप बिना खाते के एक पेन बना सकते हैं। आप "कैप्टन एनोनिमस" यूजरनेम के तहत अपना पेन सेव कर सकते हैं।
चरण 2: संदर्भ जोड़ें
चूंकि हम jQuery का उपयोग करने जा रहे हैं और यह (वास्तव में) "बैलून.सीएसएस" नामक शांत चीज़जामी है, इसलिए हमें पहले संदर्भ जोड़ना होगा। यदि आप नए हैं, तो मैं आपको बताऊंगा कि कोडपेन में यह कैसे करना है।
- सेटिंग्स पर क्लिक करें।
- संदर्भ शैली-पत्रक है या स्क्रिप्ट के आधार पर, CSS या Javascript पर क्लिक करें।
- बाहरी जोड़ें (जावास्क्रिप्ट या सीएसएस) के तहत संदर्भ जोड़ें।
जोड़ें:
ब्ला ब्ला ब्ला: ब्ला ब्ला !!!!
अब इसे हटा दें और HTML टैग को Jquery और Balloon.css के लिए अपने पसंदीदा सीडीएन से लिंक करें।
चरण 3: कोड
उसके नीचे, इस कोड को जोड़ें।
codepen.io/slate-coding/pen/oepQpX
कोड को अपने पेन में कॉपी/पेस्ट करें।
चरण 4: अपनी आवश्यकताओं के अनुरूप उस कोड को बदलना
आप अपनी आवश्यकताओं के अनुरूप पेन से जितना चाहें उतना चक्कर लगा सकते हैं, फिर कोड को जहां चाहें वहां कॉपी-पेस्ट कर सकते हैं।
चरण 5: डेमो
codepen.io/alexvgs/pen/oepQpX
सिफारिश की:
मैग्नेट के साथ बोर्ड गेम में ध्वनि, प्रकाश और गति डालना: ३ कदम
मैग्नेट के साथ बोर्ड गेम में साउंड, लाइट और मूवमेंट डालना: यह प्रोजेक्ट एक बोर्ड गेम में इलेट्रोनिक्स घटकों को रखने का एक प्रयास है। मैग्नेट को प्यादों से चिपका दिया गया था और हॉल सेंसर बोर्ड के नीचे चिपके हुए थे। हर बार जब कोई चुंबक किसी सेंसर से टकराता है, तो एक ध्वनि बजती है, एक एलईडी रोशनी या एक सर्वोमोटर चालू हो जाता है। मैं माँ
सोडा कैन से ड्रॉप स्टॉपिंग डालना: 6 कदम (चित्रों के साथ)
सोडा कैन से ड्रॉप स्टॉपिंग पोर: "मुझे एक ग्लास वाइन पीना पसंद है… लेकिन मुझे इससे नफरत है जब वाइन मेज़पोश पर फैल जाती है और इसे हमेशा के लिए बर्बाद कर देती है … और फिर दाग को हटाने के लिए सभी असफल परेशानी, बस खर्च खत्म करने के लिए नया खरीदने के लिए अधिक पैसा… परिचित लगता है? उसके
अपने वेबपेज (गूगल पेज क्रिएटर) को Picasa ऑन लाइन एल्बम के साथ मर्ज करें: 5 कदम
पिकासा ऑन लाइन एल्बम के साथ अपने वेबपेज (Google पेज क्रिएटर) को मर्ज करें: नमस्कार, यहाँ मेरा पहला निर्देश है, इसका आनंद लें! इस निर्देश के साथ जारी रखें Google के पेज क्रिएटर के साथ एक वेबसाइट की स्थापना
अपनी पुरानी स्लाइड्स को आसान तरीके से कॉपी करें!: 8 कदम (चित्रों के साथ)
अपनी पुरानी स्लाइड्स को आसान तरीके से कॉपी करें !: मेरे पास वर्षों पहले की कई स्लाइड्स हैं और समय-समय पर उन्हें देखने में मुझे आनंद आता है। लेकिन मैं हमेशा चाहता था कि मैं उन्हें डिस्क, एक सीडी, फ्लैश ड्राइव, या जो कुछ भी हो, मैं उन्हें और अधिक बार देख सकूं। उन दिनों, स्लाइड्स p की तुलना में बहुत सस्ती थीं
योकोज़ुना निंजा धार्मिकता की बढ़ती पकड़ (कैमरा कॉपी स्टैंड तिपाई एडाप्टर): 5 कदम (चित्रों के साथ)
योकोज़ुना निंजा बूमिंग ग्रिप ऑफ़ राइटियसनेस (कैमरा कॉपी स्टैंड ट्राइपॉड एडेप्टर): निंजा स्वूपिंग क्रेन कैमरा सेटअप के साथ भ्रमित होने की नहीं, कैमरा कॉपी स्टैंड के रूप में अपने स्वयं के ट्राइपॉड का उपयोग करने के लिए इस आसान एडेप्टर का निर्माण करें। जब आप उन चीज़ों की तस्वीरें खींच रहे हों जिन्हें *जंक*/सामान की तरह सपाट रखा जाना चाहिए, जिन्हें आपको eb@y पर बंद करने की आवश्यकता है, तो आप प्राप्त करना चाहते हैं