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

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

Try Editor -Try it Editor

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

लेकिन कुछ लोगो के मन में एक सवाल खलबली तो मचाता ही होगा। की आखिर यह 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 करके देख सकते हैं।





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 बनाना सिख चुके होंगे। और अगर आपको यह पोस्ट पसंद आया या फिर आपका कोई भी सवाल एवं सुझाव है, तो आप हमें नीचे कमेंट बॉक्स में बता सकते है।

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

Avatar for Jumedeen Khan

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

Comments ( 20 )

  1. Bahut Bahut sukriya dost

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

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

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

    Reply
  5. 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....

    Reply
    • Check "SUMIT KUMAR GUPTA" comments.

      Reply
      • 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....

        Reply
        • No problem.

          Reply
  6. Nice information sir thank you

    Reply
  7. Sir WordPress blog post me quiz kaise banaye

    Reply
    • Plugin use karo

      Reply
  8. 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.

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

      Reply
      • 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.

        Reply
        • 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.

          Reply
    • @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.

      Reply
      • 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

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

    Reply
  10. 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

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

      Reply

Leave a Comment

×