HTML Editor Tool for Blogger

There are many ways to edit and update existing websites to make them more visual and SEO-friendly. Hundreds of online and offline tools are available, which let users customize all type websites and blogs by providing WYSIWYG (What-You-See-Is-What-You-Get) interface without any special skill/knowledge of Web languages, such as HTML, CSS, JavaScript and many other platforms. Generally, An HTML editor is a tool or software application, used to create web pages. A good and professional HTML Editor offers a range of page customization functionalities and web technologies such as XML, JavaScript, CSS, or ECMAScript. There are 5 (Five) types of HTML Editors: (1) Text Editors (Windows Notepad), (2) Object Editors (Adobe GoLive), (3) WYSIWYG HTML Editors (Microsoft FrontPage, Adobe Dreamweaver), (4) WYSIWYG Editors, (5) Online Editors (TinyMCE, OpenBEXI).

Now we will discuss about HTML Editor for Blogger blog, and will learn how to configure it to use as a tool in Blogger blog. Specially, if you are a Blogger user then this tool will helps you in all the aspects. This HTML Editor can customize any HTML code for your blog template or Widget. HTML Editor allows you to see a demo (preview) of any blogger widget before implementing that widget in to your blog. If you are not satisfied with that widget then, you (omit) edit HTML or CSS code for that widget.

You might like these:

Sitemap Submitter
Google Page Rank Checker

Your blog readers can use this simple tool to customize HTML code for their blogs. Users, likely bookmark your HTML Editor tool for future use.

HTML Editor Tool for Blogger

Note: Don’t use post but use page to create HTML Editor and link it in your menu to use as an online tool to provide your users an HTML Editor.

1. First, go to Blogger and navigate to Blogger Dashboard » Pages » New page » Blank page.
2. After your new page’s editor opens, give title as “HTML Editor” or any other similar title.
3. Now paste below code in to HTML view:

<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>
<table style="padding: 2px; width: 850px;">
<tbody>
<tr><td valign="top"><form method="post" name="form1">
<textarea name="code" onclick="focus(this.code)" style="border: solid 1px #cccccc;  -moz-border-radius:10px;
-webkit-border-radius:10px;border-radius:10px; 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: 410px;">
<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="background: #ffffff; border: solid 1px #cccccc;  -moz-border-radius:10px;
-webkit-border-radius:10px;border-radius:10px; box-shadow: #CCC 0px 1px 3px; height: 400px; padding: 5px; width: 450px;">
</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>

Demo 

4. Write a unique and descriptive meta tag (description) in to Search Description section. Finally, click Publish button.

You are all done, and have created an HTML Editor for your blog to offer online HTML editing service to your blog visitors. View your newly created HTML Editor and edit it of you like. Feel free to ask/give any question/feedback/suggestion with comment form or contact form