Live Code Editor Tool Scripts For Blogger

Hello, Bloggers! Welcome to Raghavendra Technic.

In this tutorial, we are going to show you Live Code Editor Tool Scripts For Blogger

A live code editor is a tool that allows developers to write and edit code in real-time and see the output immediately. It's an essential tool for web developers, as it allows them to quickly experiment with code, test ideas, and see how changes affect the overall layout and functionality of their web pages.

What is the Live Code Editor?

With a live code editor, developers can make changes to HTML, CSS, and JavaScript code and immediately see how those changes affect the page's appearance and behavior. This makes the development process more efficient and helps catch errors and bugs earlier in the development process. Live code editors are also commonly used in online coding courses and tutorials to provide learners with a hands-on experience of coding.

How to make Live Code Editor?

Before we start let's take a look at its Demo.

View Demo

Step 1: First of all Login to your Blogger Dashboard.

Step 2: On Blogger Dashboard, click Pages.

Step 3: Click on the new page to Create

Step 4: Click on the top pencil icon and choose "HTML view"

Step 5: Copy the code and paste after Publish your page.

<style>
.RP {
  padding: 16px 20px;
  background-color: #fefefe;
  box-shadow: 0 5px 35px rgb(0 0 0/7%);
  border: 0;
  border-radius: 10px;
  font-size: 14px;
}
  
.drK .RP {
  background-color: var(--darkBa);
  color: #fff;
  box-shadow: 0 0 0;
}
  
.iframe {
  bottom: 0;
  position: relative;
  width: 100%;
  height: 35em;
}
</style>

<div class="RP">
  <input class='tbIn hidden' id='fTabs-1' type='radio' name='postTabs' checked>
  <input class='tbIn hidden' id='fTabs-2' type='radio' name='postTabs'>
  <input class='tbIn hidden' id='fTabs-3' type='radio' name='postTabs'> 
  
  <div class='tbHd scrlH'> 
    <label for='fTabs-1' data-text='HTML'></label>
    <label for='fTabs-2' data-text='CSS'></label>
    <label for='fTabs-3' data-text='JAVASCRIPT'></label>
  </div>
  
  <div class='tbCn'> 
    <div class='tbText-1'>
      <a name='more'></a>  
      <textarea rows="10" id="html" placeholder="Type Your HTML"></textarea>
    </div> 
    
    <div class='tbText-2'>
      <textarea rows="10" id="css" placeholder="Type Your CSS"></textarea>
    </div> 
    
    <div class='tbText-3'>
      <textarea rows="10" id="js" placeholder="Type Your JAVASCRIPT"></textarea>
    </div>
  </div>
</div>  

<br>

<div class="RP">
  <h2 class="title">Output</h2>
  <iframe id="code"></iframe>
</div>

<script>
eval(function(p,a,c,k,e,r){e=function(c){return c.toString(a)};if(!''.replace(/^/,String)){while(c--)r[e(c)]=k[c]||e(c);k=[function(e){return r[e]}];e=function(){return'\\w+'};c=1};while(c--)if(k[c])p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c]);return p}('0 5=2.3("6");0 7=2.3("l");0 8=2.3("m");0 4=2.3("n");5.9("e",1);7.9("e",1);8.9("e",1);o 1(){0 a=5.f;0 b=7.f;0 c=8.f;0 d="<6><h><i>"+b+"</i></h><j>"+a+"<k>"+c+"</k></j></6>";4.g.p();4.g.q(d);4.g.r()}1();',28,28,'var|updateOutput|document|getElementById|outputIframe|htmlTextarea|html|cssTextarea|jsTextarea|addEventListener|||||input|value|contentDocument|head|style|body|script|css|js|code|function|open|write|close'.split('|'),0,{}));
</script>

Step 6: That's done!

---

Credit

Created by: STW-WEB.

Conclusion

In this article I have made a tutorial on Live Code Editor Tool Scripts For Blogger. I hope you have liked it and Please do share with your friends and follow our blog for more

If you face any problems in code or have any questions please feel free to ask in comments section or join our Telegram Group for discussion.

Our All Posts Are Protected By DMCA. So Don't Try To Copy Our Posts And Reproduction In Any Way Is Strictly Prohibited! Or else Legal Actions Will Be Taken. © Raghavendra Technic | All Rights Reserved

© Copyright:
raghavendratechnic.blogspot.com

Go to Link