How To Install HTML Editor on Blogger Blog?
Hei! guys listen to me very carefully, this tool is not any kind free
available tool, but a Premium "HTML Editor Tool" which i'm
delivering you all for free. If you want to get this tool now and show
it by your post on your blog, then you must at-least give a credit to
us. We don't take any money for this tool but one thing is you just
subscribe our regular email updates by clicking here and help us to serve you always
update with the latest blogging tips and tricks of wbt.
Installation Procedure Here
1. First of all go to blogger and log-in your account2. Now click on new post button and write your targeted heading first
3. Now click on "HTML" button after "Compose" and paste the following code inside the post editor targeted field
<style>5. Now publish it and you're done successfully
.maintable
{
width:100%;
background-color:#e5eecc;
color:#000000;
border:solid #c3c3c3 1px;
margin-left:0px;
}
.maintable td
{
padding-left:5px;
padding-right:5px;
}
.code_input, .result_output
{
border:1px solid #c3c3c3;
width:100%;
height:400px;
background-color:#ffffff;
color:#000000;
}
.toptext
{
color:#617f10;
font-family:verdana;
margin-top:0px;
margin-bottom:8px;
font-size:120%;
}
.result_header
{
color:#617f10;
margin-top:0px;
font-family:verdana;
font-size:90%;
}
.bottomtext_div
{
margin-right:3px;
}
.bottomtext
{
color:#617f10;
font-family:verdana;
margin-bottom:0px;
margin-top:6px;
font-size:90%;
}
.toprect_txt a:link,.toprect_txt a:visited {text-decoration:none;color:#900B09;background-color:transparent}
.toprect_txt a:hover,.toprect_txt a:active {text-decoration:underline;color:#FF0000;background-color:transparent}
div.toprect_txt
{
font-family:verdana,helvetica,arial,sans-serif;
position:absolute;
left:0px;top:0px;
width:225px;height:84px;
padding:0px;margin:0px;padding-top:4px;
border:1px solid #c3c3c3;
color:#606060;
text-align:center;
font-size:12px;
}
div.toprect_img
{
font-family:verdana,helvetica,arial,sans-serif;
position:absolute;
left:0px;top:0px;
width:227px;height:90px;
margin:0px;padding:0px;
color:#606060;
text-align:center;
font-size:12px;
}
#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;
}
input.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;
}
</style>
<form style="margin:0px" action="http://www.w3schools.com/html/tryit_view.asp" method="post" target="view" id="tryitform" name="tryitform" onsubmit="validateForm();">
<table border="0" class="maintable">
<tr>
<td width="50%">
<input class="send" type="button" value="Submit »" onclick="submitTryit()">
<button id="send"onclick="window.document.tryitform.code.value='';preview.document.write (document.getElementsByTagName ('TEXTAREA')[0].value); preview.document.close(); preview.focus()">
Clear </button>
<div style="clear:both;"></div>
</td>
</tr>
<tr>
<td valign="top">
<textarea class="code_input" width="100%" height="400px" id="pre_code" wrap="logical">
<!DOCTYPE html>
<html>
<body>
The content of the body element is displayed in your browser.
</body>
</html>
</textarea>
<input type="hidden" name="code" id="code" />
<input type="hidden" id="bt" name="bt" />
</td>
<td valign="top">
<iframe id="viewIFRAME" class="result_output" width="100%" height="400px" frameborder="0" name="view" src="http://www.w3schools.com/html/tryit_view.asp?filename=tryhtml_basic"></iframe>
<script>
function resizeHeight(elmnt)
{
if (window)
{
var x=window.innerHeight
if (x)
{
var y=(x-205);
if (y>400)
{
document.getElementById("pre_code").style.height=y + "px";
document.getElementById("viewIFRAME").style.height=y + "px";
}
}
}
}
resizeHeight()
window.onresize=function(){resizeHeight()}
</script>
</td>
</tr>
<tr>
</tr>
</table>
</form>
<script type="text/javascript">
function submitTryit()
{
var t=document.getElementById("pre_code").value;
t=t.replace(/=/gi,"w3equalsign");
var pos=t.search(/script/i)
while (pos>0)
{
t=t.substring(0,pos) + "w3" + t.substr(pos,3) + "w3" + t.substr(pos+3,3) + "tag" + t.substr(pos+6);
pos=t.search(/script/i);
}
document.getElementById("code").value=t;
document.getElementById("tryitform").action="http://www.w3schools.com/html/tryit_view.asp?x=" + Math.random();
validateForm();
document.getElementById("tryitform").submit();
}
function validateForm()
{
var code=document.getElementById("code").value;
if (code.length>5000)
{
document.getElementById("code").value="<h1>Error</h1>";
}
}
submitTryit()
</script>
Need Support?
This tool has an automatic configuration to fill its exact width
according to the post's width. It will expand up-to 100% in width inside
your post area and you don't need to customize its height and width
manually. But if you face any trouble immediately inform us through our
contact form or posting your comment throug comment form. Peace out...
Error Occurred?
I wish this tool works for you as it works for me, in spite of that having slow internet connection it might not response frequently or some of the functions might not execute accordingly. So in this case you need a kind editor which can function through slow connection. You can try out another HTML Editor, source code generated by MBT and developed by WBT. See below<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>
Filed Under: HTML Tutorials, Programming Guides
No comments:
Post a Comment