Beautiful CSS Java HTML Editor Widget to Blogger (Tryit Editor)

try-it-editor

Hello Friends! How are you? In my Previous post i have already mentioned How to Add Related Post Widget with Thumbnails to Blogger Blog. After that in this post i am going to share Beautiful CSS Java HTML Editor Widget to Blogger (Try it Editor). Often you have seen a Try it Editor on a website such as W3 School, where you can easily see the output result of any coding like CSS Java Script and HTML. It is very helpful to learn HTML CSS Java Coding. In this post i will tell you how you can create your own Try it Editor and publish it on your Website.

HTML Editor Widget

If you want to Learn CSS Java Script and HTML Coding then this Tryit Editor is very useful to you, So Friends let’s started.

What is Try it Editor?

Before starting the tutorial, we need to know what is try it editor, Do you know Try it Editor is a Lightweight HTML Editor which you can use to learn HTML CSS and Java coding. It’s highly use to learn online coding design such html css and java coding for web designing. you can see the demo of try it editor.

You can add this try it editor widget on your website and share help to other for learn online code designing.

How to Add HTML Editor Widget to Blogger

It is very easy to add this widget on your website, Before that I would like to tell that the this widget work on any platform of web designing like Blogger WordPress and any other platform, for this just you need to add the widget code where you want to show on your website.

Code of Try it HTML Editor widget

<div style=”border:1px solid #333;padding:20px;margin-bottom:10px”>
<div style=”background:#16920E; color: white;”>
<h3 style=”color:white;padding:10px;text-align:center”>Try this HTML CSS JAVA Script Editor</h3></div>
<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;}
button.btnt{
background-color:green;
color: white;
width: 120px;
height: 40px;
font-weight:bold;
}
</style>
<script type=”text/javascript”>
function updateIframe(){
var myFrame = $(“#myframe”).contents().find(‘body’);
var textareaValue = $(“textarea”).val();
myFrame.html(textareaValue);
}
</script>
<textarea rows=”5″ cols=”50″ placeholder=”Type HTML or text here…”></textarea>
<button class=”btnt” 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.banshidharinfo.com/beautiful-css-java-html-editor-widget-to-blogger-tryit-editor/” target=”_balnk”>Get this Widget</a>
</div>

So Friends, Copy the above widget code and past it on your website.

I hope this CSS Java HTML Editor Widget (Try it Editor) is very useful to all of you, If you like this widget please share it with your friends via social networking and if you have any question regarding this post then you can ask me in below comment box.

About Akhilesh Kumar 76 Articles
Hi Guys, I am Akhilesh Kumar, a professional-blogger from Jharkhand, India. Here at BanshidharInfo I write about Blogging, SEO, WordPress, Social-media, Technology and Making Money online.

Be the first to comment

Leave a Reply

Your email address will not be published.


*