• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar
  • Skip to footer
SMI Logo

SupportMeIndia

इंटरनेट की जानकारी हिन्दी में!

  • ब्लॉग
    • ब्लॉगिंग
    • एसईओ
    • ब्लॉगस्पॉट
    • वर्डप्रेस
    • वेब होस्टिंग
    • डोमेन रेजिस्ट्रैशन
    • ईमेल मार्केटिंग
  • पैसा कमाए
    • अड़सेंस
    • अफिलीएट मार्केटिंग
    • मोबाईल मार्केटिंग
  • एजुकेशन
  • टेक्नोलॉजी
  • लाइफ सक्सेस
  • सिक्युरिटी टिप्स
  • और अधिक
    • यूट्यूब
    • बिजनस स्टार्टअप
    • हेल्थ
    • सोशल मीडिया
    • रिश्ते-नाते
    • स्पोर्ट्स
    • फेस्टिवल
    • दिलचस्प तथ्य
    • इंटरनेट
Home » Blog » Blogging » Try Editor Kya Hai HTML CSS JavaScript Try it Editor Kaise Banaye

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

March 12, 2022by: Jumedeen Khan

नमस्कार दोस्तों मेरा नाम है रहमान और मैं हूँ 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 कैसे बनाया जाता है। तो यदि यह सवाल आपके मन में भी है, तो इस पोस्ट को पढ़ते रहिये।

Table of Contents

  • 1 Try Editor क्या है?
    • 1.1 HTML सीखना चाहतें है, तो यहां प्रयास करें!
  • 2 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:
  • Facebook
  • Twitter
  • LinkedIn
  • More

You might also enjoy...

  • Blog Me Google Translate Widget Kaise Add Kare
  • CDN Kya Hai Aur Website Blog Ke Liye Kyu Jaruri Hota Hai
  • Facebook Whatsapp Par Chat Karne Wale Ki Location Kaise Pata Kare
  • वेबसाइट पर ऑर्गेनिक ट्रैफिक कैसे बढ़ाए - 10 टिप्स
  • Supportmeindia Mentioned By Patrika News Paper at 24 December 2022
  • Blog Ko Sahi Se Speed Up Karne Ke Liye 7 Jaruri Tips
Avatar for Jumedeen Khan

About Jumedeen Khan

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

Reader Interactions

Related Posts for You

  • Remove Youtube Sidebar, Ads and CommentsYouTube Sidebar, Ads and Comments Ko Remove Kaise Kare
  • Girl feel boring reading content on laptopBoring Content Ko Awesome Content Banane Ki 12 Tips
  • How to Create A Free Blog on BlogSpot - Beginner Guide 2022

Comments ( 20 )

Leave a Comment
  1. Avatar for AaryaAarya

    Bahut Bahut sukriya dost

  2. Avatar for AaftabAaftab

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

  3. Avatar for akhilesh kumarakhilesh kumar

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

  4. Avatar for Suneet SrivastavaSuneet Srivastava

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

  5. Avatar for SahinSahin

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

    • Avatar for Jumedeen khanJumedeen khan

      Check "SUMIT KUMAR GUPTA" comments.

      • Avatar for SahinSahin

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

        • Avatar for Jumedeen khanJumedeen khan

          No problem.

  6. Avatar for shabnam khanshabnam khan

    Nice information sir thank you

  7. Avatar for Deepesh pandoleDeepesh pandole

    Sir WordPress blog post me quiz kaise banaye

    • Avatar for Jumedeen khanJumedeen khan

      Plugin use karo

  8. Avatar for Shahid AfrideeShahid Afridee

    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.

    • Avatar for Jumedeen khanJumedeen khan

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

      • Avatar for Shahid AfrideeShahid Afridee

        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.

        • Avatar for Jumedeen khanJumedeen khan

          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.

    • Avatar for SUMIT KUMAR GUPTASUMIT KUMAR GUPTA

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

      • Avatar for Shahid AfrideeShahid Afridee

        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. Avatar for Mohan rajputMohan rajput

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

  10. Avatar for arjunarjun

    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

    • Avatar for Jumedeen khanJumedeen khan

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

Primary Sidebar

Latest Posts

  • Mega Giveaway: ये फोन और बाइक आपको फ्री मिलेंगे | जानिए कैसे?
  • Father Day पर अपने पिता को क्या गिफ्ट दें, कैसे खुश करें?
  • एक महीने में वजन कम कैसे करे - Weight Loss Tips
  • 10 Lines on Milk in English (10 Lines Essay on Milk Day 2022)
  • PM Kisan: किसानों को 6,000 के साथ अब हर महीने मिलेंगे 3,000 रुपये, जानिए कैसे?

Last Update

हमारे जीवन में डॉक्टर का महत्व - Doctor Importance in Hindi

ईद मुबारक शायरी - Eid Mubarak Shayari 2022

बकरीद शायरी - Eid Mubarak Shayari in Hindi

YouTube से पैसे कैसे कमाए? पूरी जानकारी हिंदी में

Internet Se Paise Kaise Kamaye - Puri Jankari

Categories

  • AdSense
  • Affiliate Marketing
  • Biography
  • Blogging
  • BlogSpot
  • Business Startup
  • Domain Registration
  • Education
  • Email Marketing
  • Entertainment
  • Festival
  • Health
  • Interesting Facts
  • Internet
  • Life Success
  • Make Money
  • Mobile Marketing
  • News
  • Relationship
  • Security Tips
  • SEO
  • Shayari
  • Social Media
  • Sports
  • Technology
  • Web Hosting
  • WordPress
  • YouTube

Footer

हमारे बारे में

यह एक हिंदी वेबसाइट है, जहां हम बिगिनर लोगों के लिए उपयोगी जानकारी साझा करते हैं, आपको यहां "कैसे क्या है… in Hindi? " लेख पढ़ने को मिलेंगे, जिनसे आप कुछ नया सीख सकते हैं।

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

  • ब्लॉग
  • फ्री ब्लॉग सेटअप
  • विज्ञापन
  • लेखक बनें
  • विकी
  • अस्वीकरण

हमारे साथ जुड़ें

Powered by: Mozedia.com

कॉपीराइट © 2022 - सर्वाधिकार सुरक्षित।

  • हमारे बारें में
  • संपर्क करें
  • गोपनीयता
  • शर्तें
  • साइटमैप
  • वापिस जाए ↑