Support Me India

  • ब्लॉग
  • ब्लॉग्गिंग
    • वर्डप्रेस
    • ब्लागस्पाट
    • वेब होस्टिंग
    • ऐडसेन्स
    • एफिलिएट मार्केटिंग
    • ईमेल मार्केटिंग
    • डोमेन रजिस्ट्रेशन
  • एसईओ
  • टेक्नोलॉजी
  • लाइफ सक्सेस
  • पैसा कैसे कमायें
  • अधिक
    • इन्टरनेट
    • बिज़नस स्टार्टअप
    • यूट्यूब
    • एजुकेशन
    • दिलचस्प तथ्य
    • सोशल मीडिया
    • सिक्यूरिटी टिप्स
  • सवाल पूछें
मुख्यपृष्ठ / ब्लॉग / ब्लॉग्गिंग / Try Editor Kya Hai HTML CSS JavaScript Try it Editor Kaise Banaye

Try Editor Kya Hai HTML CSS JavaScript Try it Editor Kaise Banaye

By: Jumedeen KhanLast Updated: 15 Nov, 2019

नमस्कार दोस्तों मेरा नाम है रहमान और मैं हूँ TryTechInfo का Founder तो चलिए शुरू करते है। दोस्तों इस पोस्ट में मैं आपको बताने वाला हूँ की Try Editor क्या है। Try it Editor कैसे और क्यों बनाते है। तो आइये जान लेते है हमारे इस पोस्ट में Tryit Edotor बनाने और उसे अपनी वेबसाइट ब्लॉग में add करने के बारे में।

Try Editor -Try it Editor

दोस्तों अक्सर आपने W3 School नामक वेबसाइट में एक Try Editor देखा होगा जहां पर आप कोई भी कोडिंग करके आसानी पूर्वक उसका Output यानि के उसका ( परिणाम ) देख सकते है।

  • Blogger Post Editor and Creator Top 10 Keyboard Shortcuts

लेकिन कुछ लोगो के मन में एक सवाल खलबली तो मचाता ही होगा। की आखिर यह Try Editor कैसे बनाया जाता है। तो यदि यह सवाल आपके मन में भी है, तो इस पोस्ट को पढ़ते रहिये।

विषय-सूची

  • Try Editor क्या है?
    • HTML सीखना चाहतें है, तो यहां प्रयास करें!
  • Try Editor कैसे और क्यों बनाते है?

Try Editor क्या है?

Try editor ek lightweight HTML Editor होता है जिसमे हम HTML, CSS, Javascript, jQuery etc. coding सिख सकते हैं। इसका इस्तेमाल Online Coding Design सिखने के लिए किया जाता हैं। Try editor को Try it editor या Tryit editor भी कहते हैं।

ये Online Coding सिखने और live design update करने का बहुत ही आसान और simple तरीका हैं। यहाँ मैं आपको Try Editor Demo दिखा रहा हूँ आप इसमें HTML, CSS, Javascript coding editing करके देख सकते हैं।

HTML सीखना चाहतें है, तो यहां प्रयास करें!





jQuery Insert HTML inside an iFrame






Try Editor source link

हैं न बहुत ही मजेदार तो चलिए अब जन लेते हैं की इसे कैसे बनाते हैं ताकि आप भी अपनी वेबसाइट और ब्लॉग में Try editor add कर सकें।

Try Editor कैसे और क्यों बनाते है?

दोस्तों सबसे पहले मैं आपको बता दूँ, की Try Editor उन लोगो के काम आता है जो अपनी वेबसाइट में कोडिंग सिखाते है। अब जाहिर सी बात है कुछ लोग बहुत अच्छा सिखाते है लेकिन उनकी एक नादानगी जो उनकी सबसे बड़ी सबसे बड़ी भूल बन जाती है।

वह यह है,की वह लोग अपनी वेबसाइट में Tryit Editor नहीं लगाते जिस कारण सीखने वाले अच्छे से सीख नहीं पाते और एक समय ऐसा भी आता है, की वह लोग उस वेबसाइट से सीखना ही बंद कर देते है।

जिसका परिणाम शब्दों में बया नहीं किया जा सकता । लेकिन दोस्तों अगर आप भी कोडिंग सिखाते है, तो कही आपके साथ ऐसा न हो जाए इससे पहले ही हम आपको Try it Editor बनाना सीखा देंगे। तो आइये जान लेते है, की एक Try Editor कैसे बनाया जाता है।

दोस्तों वैसे तो इस समय वेबसाइट में Try Editor प्रयोग करने हेतू कोई Plugins उपलब्ध नहीं है। परन्तु इसे कोडिंग के माध्यम से आसानी पूर्वक बनाया जा सकता है, जो के निम्न प्रकार है।

<div style="border:1px solid #333;padding:20px;margin-bottom:10px">
<div style="background:#f1574d; color: white;">
<h3 style="color:white;padding:10px;text-align:center">HTML सीखना चाहतें है, तो यहां प्रयास करें!</h3></div>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery Insert HTML inside an iFrame</title>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<style type="text/css">
br { display: none; }
 textarea, iframe{display: block;margin: 10px 0;width:100%;border: 1px solid #333;}
</style>
<script type="text/javascript">
 function updateIframe(){
 var myFrame = $("#myframe").contents().find('body');
 var textareaValue = $("textarea").val();
 myFrame.html(textareaValue);
 }
</script>
</head>
<body>
<textarea rows="5" cols="50" placeholder="Type HTML or text here..."></textarea>
<button style="border:0" type="button" onclick="updateIframe()">Run Code </button>
<iframe id="myframe"></iframe><a style="text-align: right; display: block; margin-bottom: -30px;" href="https://www.supportmeindia.com/try-editor-kya-hai-html-try-it-editor-kaise-banaye/" target="_balnk">Try Editor source link</a></body>
</html>
</div>

तो दोस्तों इस प्रकार से आप अपनी वेबसाइट में Try Editor लगाकर अपनी वेबसाइट के माध्यम से लोगो को और भी अच्छी तरह से सीखा सकते है।

तो दोस्तों उम्मीद करता हूँ, की अब आप Try it Editor बनाना सिख चुके होंगे। और अगर आपको यह पोस्ट पसंद आया या फिर आपका कोई भी सवाल एवं सुझाव है, तो आप हमें नीचे कमेंट बॉक्स में बता सकते है।

  • Blog Ko Sahi Se Speed Up Karne Ke Bare Me 7 Jaruri Tips

और हो सके तो इस पोस्ट को अपने दोस्तों के साथ शेयर करें ताके वह भी Try Editor के बारे में जान सके, धन्यवाद्

शेयर
  • Share on Facebook
  • Tweet on Twitter

लेखक: Jumedeen Khan

मैं इस ब्लॉग का संस्थापक और एक पेशेवर ब्लॉगर हूं। यहाँ पर मैं नियमित रूप से अपने पाठकों के लिए उपयोगी और मददगार जानकारी शेयर करता हूं। ❤️

आपको ये भी पढना चाहिए

  • Blog Sitemap Ko Google Search Console Me Submit Kaise Kare

    Blog Sitemap Ko Google Search Console Me Submit Kaise Kare

  • 10 false things about blogging that misguide blogger

    Blogging Ke Bare Me 12 Jhoothi Bate Jo Blogger Ko Misguide Karti Hai

  • Best Blogging Platform

    ब्लॉग बनाने के लिए सबसे अच्छा ब्लॉग्गिंग प्लेटफार्म कौनसा है और क्यूँ?

Reader Interactions

टिप्पणियाँ ( 20 )

एक टिप्पणी जोड़ें
  1. Aarya

    14 Nov, 2019 at 11:49 am

    Bahut Bahut sukriya dost

    जवाब दें
  2. Aaftab

    12 Jan, 2019 at 7:08 am

    Hello Bhai Ek help kro | Online script kese banate hai batao Jess TBK Tricks Apni website pe Dalta hai please help me

    जवाब दें
  3. akhilesh kumar

    01 Feb, 2018 at 10:03 am

    Wah!
    ye to bahut achha widget hai, maine apne website par iska use kiya...
    thanks

    जवाब दें
  4. Suneet Srivastava

    01 Feb, 2018 at 7:39 am

    Thank you bhai kb se ye pata karna chah rha tha aaj mil hi gya

    जवाब दें
  5. Sahin

    31 Jan, 2018 at 7:16 pm

    sir sabko "Earnings at risk – One or more of your ads.txt files doesn’t contain your AdSense publisher ID” ye message mil raha hai adsense ki traf se ye kya hai, aur ads.txt file missing hai ya nahi kaise pata kare kaise is problem se bache plz ek post kariye na....

    जवाब दें
    • Jumedeen khan

      31 Jan, 2018 at 8:07 pm

      Check "SUMIT KUMAR GUPTA" comments.

      जवाब दें
      • Sahin

        31 Jan, 2018 at 9:31 pm

        ha comment karne ke bad ye problem thik ho gaya but mera ek sawal hai aapse main jab blogger dashboard ke earning menu se adsense ke liye apply kiya tha tab mere galti ke karan adsense disapproved ho gaya tha bad me main direct dusre site se adsense ke liye apply kiya tha aur mere pahle wala site ko bhi add kar liye tha usi adsense ke sath aur aabhi me dono se earning karta hu.. to mera sawla hai is update se mere disapproved wala blog ka koi problem to nahi hoga na... 2 saal se istemal kar raha hu....

        जवाब दें
        • Jumedeen khan

          31 Jan, 2018 at 10:37 pm

          No problem.

          जवाब दें
  6. shabnam khan

    31 Jan, 2018 at 6:47 pm

    Nice information sir thank you

    जवाब दें
  7. Deepesh pandole

    31 Jan, 2018 at 5:12 pm

    Sir WordPress blog post me quiz kaise banaye

    जवाब दें
    • Jumedeen khan

      31 Jan, 2018 at 5:22 pm

      Plugin use karo

      जवाब दें
  8. Shahid Afridee

    31 Jan, 2018 at 2:26 pm

    Earnings at risk - One or more of your ads.txt files doesn't contain your AdSense publisher ID. Fix this now to avoid severe impact to your revenue.

    ACTION

    Bhai mere AdSense account me ye new red colour ka Notification show ho raha Hai so iska kya matlav details me bata sakte Hai jaldi batana Bhai.

    जवाब दें
    • Jumedeen khan

      31 Jan, 2018 at 5:04 pm

      Check karo ki aapke sabhi ads m publisher ID same hai agar haa to no worry ye issue apne aap fix ho jayega.

      जवाब दें
      • Shahid Afridee

        01 Feb, 2018 at 6:58 am

        Bhai sabhi Ads ki publisher I'd same Hai,Lekin mai us code p - I'd Ko jab add custom robot.txt me save karta hu to error aa raha Hai.matlav save nahi ho raha Hai.

        जवाब दें
        • Jumedeen khan

          01 Feb, 2018 at 10:50 am

          Shahid koi solution btaye to use sahi se fix kiya karo maine aapke blog me check kiya hai ek se jyada publisher id hai. Aap blog ke view page source code me "pub-" search karke id check karo.

          जवाब दें
    • SUMIT KUMAR GUPTA

      31 Jan, 2018 at 7:52 pm

      @sahid afreedi agar aapka blog blogger par hai to google ne ek nya option add kiya hai custom ads.txt ka usme ye code add kare
      google.com, pub-0000000000000000, DIRECT, f08c47fec0942fa0

      0000000000000000 ke jagah par apna published id add kare.

      जवाब दें
      • Shahid Afridee

        31 Jan, 2018 at 10:02 pm

        Sumit Kumar Gupta Jee,ACTION par click karne Ke baad Jo code diya Hai usko blogger settings > search performance> custom robot.txt me add karne Ko kah rahe Hai kya

        जवाब दें
  9. Mohan rajput

    31 Jan, 2018 at 12:56 pm

    Wao Sir main jankari ka kab se intjar kar raha tha. thanks.

    जवाब दें
  10. arjun

    31 Jan, 2018 at 12:20 pm

    jumedin jaise hamne YouTube audio library se koi music download kiya to kya ham us music ko apne har video me use kar sakte h ya sirf ek hi video me ek hi music use karna hota hai

    जवाब दें
    • Jumedeen khan

      31 Jan, 2018 at 5:09 pm

      Aap ek music ko kitni bhi video me use kar sakte ho.

      जवाब दें

अपनी प्रतिक्रिया दें। Cancel reply

Primary Sidebar

शुरुआती गाइड

ब्लॉगिंग के माध्यम से पैसे कमाने के 3 तरीका।
#पहला एक ब्लॉग बनाएँ।
#दूसरा ट्रैफिक बढ़ाएँ।
#तीसरा कमाना शुरू करें।
-: पैसे कमाना शुरू करें :-
सिर्फ ₹99/mo में होस्टिंग खरीदें!

नयी पोस्ट

  • घर में बरकत क्यों नहीं होती? (गरीबी की वजह)
  • मिया बीवी का रिश्ता - Miya Biwi ka Rishta
  • सच्चे प्यार के 20 गुण (True Love Qualities in Hindi)
  • Fitness Trainer कैसे बने? इसके लिए योग्यता और सैलरी
  • सारी जिंदगी जवान और सेहतमंद रहने के 10 नियम

अपडेटेड पोस्ट

  • घर में बरकत क्यों नहीं होती? (गरीबी की वजह)
  • मिया बीवी का रिश्ता - Miya Biwi ka Rishta
  • सच्चे प्यार के 20 गुण (True Love Qualities in Hindi)
  • Fitness Trainer कैसे बने? इसके लिए योग्यता और सैलरी
  • सारी जिंदगी जवान और सेहतमंद रहने के 10 नियम

पोपुलर पोस्ट

  • Main Blogging Kyu Karta Hu Paise Ke Liye Ya... (Chalo Jante Hai)
  • Mobile Phone Ki Battery Ko Damage Hone Se Kaise Bachaye 7 Tips
  • आरोग्य सेतु ऐप क्या है और इसका इस्तेमाल कैसे करे?
  • YouTube की History कैसे डिलीट करें
  • नयी ब्लॉग पोस्ट इंडेक्स होने पर गूगल से सूचना कैसे प्राप्त करें

टॉपिक चुनें

  • इन्टरनेट
  • ईमेल मार्केटिंग
  • एजुकेशन
  • एफिलिएट मार्केटिंग
  • एसईओ
  • ऐडसेन्स
  • टेक्नोलॉजी
  • डोमेन रजिस्ट्रेशन
  • दिलचस्प तथ्य
  • पैसा कैसे कमायें
  • फेस्टिवल
  • बिज़नस स्टार्टअप
  • ब्यूटी टिप्स
  • ब्लागस्पाट
  • ब्लॉग्गिंग
  • मोबाइल मार्केटिंग
  • यूट्यूब
  • रिश्ते-नाते
  • लाइफ सक्सेस
  • वर्डप्रेस
  • वेब होस्टिंग
  • सिक्यूरिटी टिप्स
  • सोशल मीडिया
  • स्वास्थ्य

Footer

थोडा ब्लॉग के बारे में

यह एक हिंदी ब्लॉग है, जिसका मकसद है लोगो को हिंदी भाषा में विभिन्न जानकारी उपलब्ध कराना।

इसके अलावा हमारा एक Ask SMI फोरम भी है, जहाँ हम नए ब्लॉगर्स की मदद करते है।

अन्य महत्वपूर्ण लिंक

  • ब्लॉग
  • फ्री ब्लॉग बनाये
  • डील्स
  • पैसे कैसे कमाए
  • विज्ञापन दें
  • होस्टिंग कहा से लें
  • अस्वीकरण
  • शब्दकोश

ब्लॉग न्यूज़लेटर सब्सक्राइब करें

हमारी नवीनतम पोस्ट की सुचना पाने के लिए अभी ब्लॉग को सब्सक्राइब करे!

Powered by: Mozedia.com

कॉपीराइट © 2015–2021हमारे बारे मेंसम्पर्कगोपनीयता नीतिसाइटमैपवापस जाएँ।