Live Code Editor Tool Script for Blogger

Hello Guys! How are you all? I hope you are all good. Welcome Freemium Tech website's today's article. Today we will share with you a live code editor tool script for Blogger Site. If you want to install it in your blogger website so read this article carefully.

We use different code editors for front end developing or web designing. Live code editor can be used on computer. Through this we can see the output of all HTML, CSS, JS code we typed live. But if I say that any How to use live code editor on mobile or PC without app?

You might be thinking that I am talking about a website's live code editor. There are many websites available online which have live code editor. Using them we can see the live output of our code. But today I will show you how to make live code editor in blogger.

Yes, you read that right. Live Code Editor in Blogger. Now we can create a live code editor in our Blogger blog with just a few lines of html, css and js. With which we can see the live output of html, css, js to design our website. Now we don't have to download any application separately or depend on any website. You can easily create a live code editor on your website and use it.

This live code editor is like w3school's Try it Editor. Where we can see the live output by typing HTML, CSS, JS.

Live code editor for blogger

If you follow the procedure shown below, you can easily create a live code editor in Blogger. In this Live Code Editor, you will find 4 boxes. In one, type HTML, CSS, Javascript in the other and in the remaining box, you can see the live output of your typed code.

Before Create This Page let's see a Preview

Demo

How to create Live Code Editor in blogger website?

For create this Tool you don't need any coding Knowledge because I have already make a script for you. You just copy and put it on your page. Follow below steps for create this Tool page.

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

Step 2: On Blogger Dashboard, click Manu bar.

Step 3: Go to the page or post or place which you want to add Showcase Website Link List.

Step 4: Then if you are doing this in page/post then don't forget to change Compose view to the HTML View <>

Step 5: Now paste the following Script or code to that empty place.

 <style type="text/css">

.pixlP{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 .pixlP{background-color:#000;color:#fff;box-shadow:0 0 0;}.iframe {bottom: 0;position: relative;width: 100%;height: 35em;}

.sidebar {display:none;}

</style>

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

<script type="text/javascript">

function compile(){var e=document.getElementById("html"),t=document.getElementById("css"),n=document.getElementById("js"),o=document.getElementById("code").contentWindow.document;document.body.onkeyup=function(){o.open(),o.writeln(e.value+"<style>"+t.value+"</style><script>"+n.value+"<\/script>"),o.close()}}compile();

</script>

Step 6: Then Save it and Publish.

Step 7: That's done! You are Successfuly create Live Code Editor tool.

Now Visit your published page/post to see your brand new Live Code Editor is ready like below.

OutPut

CONCLUSION

In this article, I shared with you Live Code Editor Tool Script for Blogger. I hope you have liked It. Please do share it with your friends and follow our blog for more.

Join our Telegram Channel to get the lastest posts updates daily.

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.