Skip to main content

CODEPEN

 Table of Content👈

  • वह कोड जिसका उपयोग मैं ब्लॉग पोस्ट में कोडपैन जोड़ने के लिए कर सकता हूं
  • क्या हम अपने नंबर पर पेन आईडी दे सकते हैं?
  • कोडपैन आईडी कैसे और कहां से मिली?
  • मेरे पास पैन है लेकिन उसमें अपनी जानकारी कैसे लिखूं
  • क्या ऊपरी कोड से स्क्रॉलिंग बार के साथ कोड पेन मिल सकता है
  • स्क्रॉलिंग = "नहीं" क्या दर्शाता है? scrolling="no" represents what?
  • कुछ पूरी तरह से मुफ्त साइट का नाम
/>
आप एक कोड स्निपेट बनाने के लिए कोडपेन (https://codepen.io/) या JSFiddle (https://jsfiddle.net/) का उपयोग कर सकते हैं और फिर इसे अपने ब्लॉगर पोस्ट में एम्बेड किए गए HTML एम्बेड कोड का उपयोग करके एम्बेड कर सकते हैं। 



कोडपेन पर जाएं और वह पेन ढूंढें जिसे आप एम्बेड करना चाहते हैं। पेन के नीचे स्थित "embade" बटन पर क्लिक करें। "साझा करें" मेनू में, "एम्बेड करें" विकल्प चुनें। वांछित के रूप में एम्बेड सेटिंग्स को अनुकूलित करें। आप एम्बेडेड पेन का आकार चुन सकते हैं, कोड संपादक और अन्य विकल्प दिखाना है या नहीं। एक बार जब आप एम्बेड सेटिंग्स को अनुकूलित कर लेते हैं, तो "एम्बेड" अनुभाग में प्रदान किए गए एम्बेड कोड को कॉपी करें। एम्बेड कोड को अपने ब्लॉग पोस्ट के HTML में वहां पेस्ट करें जहां आप चाहते हैं कि CodePen दिखाई दे। अपने ब्लॉग पोस्ट को सहेजें और प्रकाशित करें। एम्बेड किया गया कोडपेन अब पोस्ट में दिखाई देना चाहिए। ध्यान दें कि आपके ब्लॉगिंग प्लेटफॉर्म के आधार पर, कोडपेन एम्बेड करने की प्रक्रिया थोड़ी भिन्न हो सकती है। हालांकि, अधिकांश प्लेटफार्मों को कोडपेन द्वारा प्रदान किए गए मानक एम्बेड कोड का उपयोग करके एम्बेडिंग कोडपेन्स का समर्थन करना चाहिए।

वह कोड जिसका उपयोग मैं ब्लॉग पोस्ट में कोडपैन जोड़ने के लिए कर सकता हूं

CodePen को अपने ब्लॉग पोस्ट में जोड़ने के लिए, आप निम्न HTML कोड का उपयोग कर सकते हैं:

एचटीएमएल
कॉपी कोड

<iframe height = "300" style = "width: 100%;" scrolling = "no" title = "Codepen Demo" src = "https://codepen.io/username/embed/pen/xxxXXX"></iframe>
"उपयोगकर्ता नाम" को अपने कोडपेन उपयोगकर्ता नाम से बदलें, और "xxxXXX" को उस पेन की आईडी से बदलें जिसे आप एम्बेड करना चाहते हैं। आप कोडपेन पर पेन पेज के URL में पेन आईडी पा सकते हैं।

आप अपने कोड स्निपेट के आकार में फ़िट होने के लिए iframe की ऊंचाई समायोजित कर सकते हैं।

उदाहरण के लिए, यदि आपका CodePen उपयोगकर्ता नाम "renu" है और पेन आईडी "abc123" है, तो HTML कोड ऐसा दिखाई देगा:

एचटीएमएल
कॉपी कोड

<iframe height = "300" style = "width: 100%;" scrolling = "no" title = "Codepen Demo" src = "https://codepen.io/renu/embed/pen/abc123"></iframe>
आप इस HTML कोड को अपने ब्लॉग पोस्ट में कहीं भी जोड़ सकते हैं जहाँ आप चाहते हैं कि कोडपेन दिखाई दे।

क्या अपने नंबर पर पेन आईडी दे सकते हैं?

नहीं, आप CodePen पर अपना खुद का कस्टम पेन आईडी असाइन नहीं कर सकते। जब आप एक नया पेन बनाते हैं तो कोडपेन द्वारा पेन आईडी अपने आप जेनरेट हो जाती है। आईडी अद्वितीय है और इसे बदला नहीं जा सकता।

हालाँकि, आप अपने पेन के लिए एक कस्टम स्लग बना सकते हैं, जिसे पेन के URL के अंत में जोड़ा जाएगा। उदाहरण के लिए, यदि आप "my-awesome-pen" स्लग के साथ एक पेन बनाते हैं, तो पेन का URL https://codepen.io/your-username/pen/pen-id/my-awesome-pen होगा।

अपने पेन के लिए कस्टम स्लग बनाने के लिए, आप पेन एडिटर में "चेंज यूआरएल" बटन पर क्लिक कर सकते हैं और अपना वांछित स्लग दर्ज कर सकते हैं। ध्यान रखें कि स्लग भी अनोखे होते हैं, इसलिए जब तक आपको कोई उपलब्ध नहीं हो जाता तब तक आपको अलग-अलग विविधताओं को आजमाने की आवश्यकता हो सकती है।

पैन आईडी  कैसे और कहां से मिली?

कोडपेन के लिए पेन आईडी प्राप्त करने के लिए, आप इन चरणों का पालन कर सकते हैं:

कोडपेन की वेबसाइट https://codepen.io/ पर जाएं।
नेविगेशन बार में "पेन" टैब पर क्लिक करें और उस पेन का चयन करें जिसे आप अपने ब्लॉग पोस्ट में एम्बेड करना चाहते हैं।
पेन एडिटर में, अपने वेब ब्राउजर के एड्रेस बार में URL देखें। पेन आईडी "/ पेन /" भाग के बाद URL के अंत में अल्फ़ान्यूमेरिक कोड है। उदाहरण के लिए, यदि URL https://codepen.io/username/pen/abc123 है, तो पेन आईडी "abc123" है।
एक बार आपके पास पेन आईडी हो जाने के बाद, आप इसे अपने ब्लॉग पोस्ट में कोडपेन एम्बेड करने के लिए HTML कोड में उपयोग कर सकते हैं, जैसा कि मेरे पिछले उत्तर में बताया गया है।

मेरे पास पैन है लेकिन उसमें अपनी जानकारी कैसे लिखूं

यदि आप अपने कोडपेन में अपना खुद का कोड जोड़ना चाहते हैं, जो आपको मिला है, तो आपको पहले इसे "फोर्क" करना होगा। किसी कोडपेन को फोर्क करने से उसकी एक प्रति बन जाती है जिसे आप अपनी इच्छानुसार संपादित और अनुकूलित कर सकते हैं।

कोडपेन फोर्क करने के चरण यहां दिए गए हैं:

वह कोडपेन खोलें जिसे आप फोर्क करना चाहते हैं।
पेन के ऊपरी दाएं कोने में "फोर्क" बटन पर क्लिक करें।
अपने कांटे को एक नाम दें और "फोर्क बनाएं" बटन पर क्लिक करें।
पेन को फोर्क करने के बाद, आप अपनी सामग्री जोड़ने के लिए पेन संपादक में HTML, CSS और JavaScript कोड को संशोधित कर सकते हैं।

पेन में अपनी स्वयं की जानकारी जोड़ने के लिए, आप पेन संपादक में HTML और CSS कोड संपादित कर सकते हैं। उदाहरण के लिए, आप HTML टैग्स का उपयोग करके टेक्स्ट या छवियां जोड़ सकते हैं, और आप उन्हें CSS गुणों के साथ स्टाइल कर सकते हैं।
यहां एक उदाहरण दिया गया है कि आप कोडपेन में शीर्षक और पैराग्राफ कैसे जोड़ सकते हैं:


See the Pen Untitled by Alan Jones (@Alan-Jones) on CodePen.


html
Copy code
<!DOCTYPE html>
<html>
  <head>
    <title>My CodePen</title>
    <style>
      /* Add CSS styles here */
      h1 {
        color: red;
      }
    </style>
  </head>
  <body>
    <h1>Hello World!</h1>
    <p>This is my CodePen.</p>
  </body>
</html>
इस उदाहरण में, HTML कोड पेन में एक शीर्षक और एक पैराग्राफ जोड़ता है, और CSS कोड शीर्षक के रंग को लाल रंग में सेट करता है।
पेन में अपनी जानकारी जोड़ने के बाद, आप इसे सहेज सकते हैं और दूसरों के साथ लिंक साझा कर सकते हैं। 

क्या मुझे ऊपरी कोड से स्क्रॉलिंग बार के साथ कोड पेन मिल सकता है

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

यहां एक उदाहरण दिया गया है कि आप CodePen में वर्टिकल स्क्रॉलिंग बार कैसे जोड़ सकते हैं:

html
Copy code
<iframe height="300" style="width: 100%; overflow-y: scroll;" scrolling="no" title="CodePen Demo" src="https://codepen.io/username/embed/pen/xxxXXX"></iframe>
इस उदाहरण में, overflow-y: scroll; शैली विशेषता में संपत्ति iframe में लंबवत स्क्रॉलिंग बार जोड़ती है। यदि आवश्यक हो तो क्षैतिज स्क्रॉलिंग बार जोड़ने के लिए आप आइफ्रेम की ऊंचाई और ओवरफ्लो-एक्स संपत्ति सेट करने के लिए ऊंचाई मान समायोजित कर सकते हैं।

"उपयोगकर्ता नाम" को अपने कोडपेन उपयोगकर्ता नाम से और "xxxXXX" को उस पेन की आईडी से बदलना सुनिश्चित करें जिसे आप एम्बेड करना चाहते हैं। आप कोडपेन पर पेन पेज के URL में पेन आईडी पा सकते हैं।


स्क्रॉलिंग = "नहीं" क्या दर्शाता है?scrolling="no" represents what?

iframe तत्व में स्क्रॉलिंग विशेषता नियंत्रित करती है कि ब्राउजर को एम्बेडेड सामग्री के लिए स्क्रॉलबार प्रदर्शित करना चाहिए या नहीं।

मेरे द्वारा प्रदान किए गए उदाहरण कोड में, स्क्रॉलिंग = "नहीं" का अर्थ है कि ब्राउजर को आईफ्रेम के भीतर कोई स्क्रॉलबार प्रदर्शित नहीं करना चाहिए। इसके बजाय, स्क्रॉलिंग व्यवहार को overflow-y: स्क्रॉल द्वारा नियंत्रित किया जाता है; CSS गुण जिसे मैंने शैली विशेषता में जोड़ा है।

यदि आप स्क्रॉलिंग = "नहीं" को स्क्रॉलिंग = "हाँ" में बदलते हैं, तो ब्राउज़र एम्बेडेड सामग्री के लिए अपने स्वयं के स्क्रॉलबार प्रदर्शित करेगा, और अतिप्रवाह-वाई: स्क्रॉल; सीएसएस संपत्ति को नजरअंदाज कर दिया जाएगा।

तो, यह आप पर निर्भर है कि आप एम्बेडेड सामग्री के स्क्रॉलिंग व्यवहार को नियंत्रित करने के लिए स्क्रॉलिंग एट्रिब्यूट या ओवरफ़्लो CSS प्रॉपर्टी का उपयोग करना चाहते हैं या नहीं।



कुछ पूरी तरह से मुफ्त साइट का नाम 

ज़रूर, यहाँ कुछ पूरी तरह से निःशुल्क साइटें हैं जिनका उपयोग आप वेब डेवलपमेंट के लिए कर सकते हैं:
CodeSandbox - https://codesandbox.io/
Repl.it - https://replit.com/
JSFiddle - https://jsfiddle.net/
StackBlitz - https://stackblitz.com/
Glitch - https://glitch.com/
JS Bin - https://jsbin.com/
CSS Deck - https://cssdeck.com/
Dabblet - https://dabblet.com/
Liveweave - https://liveweave.com/
Plunker - https://plnkr.co/
ये सभी साइटें एक कोड संपादक और पूर्वावलोकन विंडो प्रदान करती हैं जहां आप अपना HTML, CSS और JavaScript कोड लिख और परीक्षण कर सकते हैं। वे सभी अलग-अलग सुविधाओं और कार्यात्मकताओं का उपयोग करने और पेश करने के लिए स्वतंत्र हैं, इसलिए आप वह चुन सकते हैं जो आपकी आवश्यकताओं के अनुरूप हो।








Head1 Head2
Head1row1 column1 Head2row1 column2
Head1row2 column1 Head2row2 column2
Head1row3 column1 Head2row3 column2
Head1row4 column1 Head2row4 column2
Head1row5 column1 Head2row5 column2
1 column1 Row1 Description

Labels:

Comments

Post a Comment

Popular posts from this blog

RESPONSIVE TABLE CODE FOR BLOGGER TESTED

Steps to add this HTML CSS Responsive Grid Layout to your blogger post. Steps to add images to HTML CSS Responsive Grid Layout Generator for blogger post. Steps to add this HTML CSS Responsive Grid Layout to your blogger post. Go to your blogger dashboard and click on the new post. Create and design content for the first cell. After creating and styling the content for the first cell, click on Html Tab. Copy the content available in the HTML editor (Ctrl+A and Ctrl+C). Then come back to this site, click on Cell then paste the copied code into cell1. Repeat the same procedure for all cells. After creating content for all cells, customize the design for a responsive layout. Then copy the generated code and go back to your post editor. Click on the HTML tab then paste the copied code. Publish and view the post. Simple Grid Responsive Template will be added to your blogger post. Steps to add images to HTML CSS Responsive Grid Layout Generator for blogger post. Go to your blogger dashboard ...
Post a Comment
Read more

HOW TO ADD CSS CODE IN BLOG THEME CSS COUSTOM

  अपने ब्लॉगर पोस्ट के लिए सीमाओं और जवाबदेही के साथ एक तालिका जोड़ने के लिएः ब्लॉगर पोस्ट एडिटर खोलें और HTML मोड पर स्विच करें। तालिका के लिए HTML कोड को उस संपादक में कॉपी और पेस्ट करें जहां आप तालिका को प्रदर्शित करना चाहते हैं। अपने ब्लॉगर थीम संपादक के "कस्टम CSS" अनुभाग में CSS कोड को कॉपी और पेस्ट करें। यह सुनिश्चित करने के लिए कि तालिका सही ढंग से प्रदर्शित हो रही है, अपनी पोस्ट का पूर्वावलोकन करें। जब आप तालिका की उपस्थिति से संतुष्ट हों तो अपनी पोस्ट प्रकाशित करें। ध्यान दें कि यदि आप तालिका की उपस्थिति में परिवर्तन करना चाहते हैं, तो आपको तदनुसार HTML और CSS कोड को संपादित करने की आवश्यकता होगी। HOW TO GET CUSTOM CSS TEACH ME STEP BY STEP HOW TO PASTE IT THERE अपने ब्लॉगर थीम में कस्टम CSS जोड़ने के लिए, इन चरणों का पालन करेंः अपने Blogger Dashboard पर जाएं और बाएं हाथ के मेनू से "Theme" विकल्प पर क्लिक करें। उस थीम के बगल में "अनुकूलित करें" बटन पर क्लिक करें जिसे आप संपादित करना चाहते हैं। बाएं हाथ के मेनू में, "उन्नत" विकल्प पर क्लिक...
Post a Comment
Read more