How to install a Online HTML editor tool in blogger blog - Use this free online HTML editor to create HTML codes for your website or blog. This is a Live editor so you can see the results as you edit. Click on the "Preview" button at any time to view the generated code. This free Live HTML editor program allows you edit your source code online without downloading any application.
For those who want to add this tool on their blog, Make sure to take a look of this tool by clicking on the below demo button.
After watching the demo of this tool, if you're ready to install it, then follow the below simple steps.
How to Add Online Html Editor Tool In Blogger
At the first, visit to your blogger dashboard - Login
Create a new Post/Page.
Switch to HTML mode.
Copy and paste the below code.
<style>
#sidebar-wrapper, #midsidebar-wrapper, .gapad2, .blog-pager, .post-header-line-1, .post-footer { display:none !important;}
#main-wrapper { width:98%!important;}
.post { width:98%!important; }
</style>
<div class="post-body entry-content">
<br />
<div dir="ltr" style="text-align: left;" trbidi="on">
<br />
<style>
#send{
font-family: Calibri, Verdana, Helvetica, sans-serif;
background: #6f9ff1;
color: #fff;
font-weight:bold;
font-size: 14px;
border: 0;
cursor: pointer;
height:30px;
width:80px;
border-radius:4px;
box-shadow: 5px 5px 5px #CCCCCC;
border:1px solid #79a7f1;
}
.textbox{
background:#fff;
border:1px solid #3697F7;
border-radius:4px;
-moz-border-radius:4px;
-webkit-border-radius:4px;
padding:4px;
font:normal 15px verdana, arial;
color:#FBB468;
margin:0px;
height:25px
}
</style>
<br />
<table style="padding: 2px; width: 450px;">
<tbody>
<tr><td valign="top"><form method="post" name="form1">
<textarea name="code" onclick="focus(this.code)" style="-moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; border: solid 1px #cccccc; box-shadow: #CCC 0px 1px 3px; color: #0080ff; font-family: arial, verdana, Tahoma; font-size: 12px; font-weight: bold; height: 400px; margin: 0px; padding: 5px; scroll: auto; width: 454px;"><style>
Add CSS Code Here
</style>
Add HTML Code Here</textarea>
</form>
</td><td valign="top"><iframe frameborder="0" name="preview" src="about:blank" style="-moz-border-radius: 10px; -webkit-border-radius: 10px; background: #ffffff; border-radius: 10px; border: solid 1px #cccccc; box-shadow: #CCC 0px 1px 3px; height: 400px; padding: 5px; width: 454px;">
</iframe>
</td>
</tr>
</tbody></table>
<br />
<button id="send" onclick="preview.document.write (document.getElementsByTagName ('TEXTAREA')[0].value); preview.document.close(); preview.focus()">
Preview</button>
<button id="send" onclick="window.document.form1.code.value='';preview.document.write (document.getElementsByTagName ('TEXTAREA')[0].value); preview.document.close(); preview.focus()">
Clear </button></div>
<br />
<div style="clear: both;">
</div>
</div>
</div>
All Done, Publish your post and see the magic.
That's it! I hope you like this tool! Stay tuned for more cool plugins! Thanks for reading +Prince Chaudhri
0 Comment to "How to Add Online Html Editor Tool In Blogger"
Post a Comment