HTML Encoder Widget Generator For Blogger

In order for a blogger/web designer to have an HTML Encoder widget in one of his pages, he must install  special javascript  code in order to parse properly  the encoded texts. Please follow the steps below in installing this tool in your template.

Live Demo

HTML Encoder Widget Generator For Blogger

Installing the Javascript and CSS code in your Template
Step 1. Go to your Blogger Dashboard
Step 2. Click Template
Step 3. Hit the Edit HTML button
Step 4. Look for the code </head> and just above it paste the code below,

<script type='text/javascript'>
//<![CDATA[
function html2entities(){
var re=/[(<>"'&]/g
for (i=0; i<arguments.length; i++)
arguments[i].value=arguments[i].value.replace(re, function(m){return replacechar(m)})
}
function replacechar(match){
if (match=="<")
return "&lt;"
else if (match==">")
return "&gt;"
else if (match=="\"")
return "&quot;"
else if (match=="'")
return "&#039;"
else if (match=="&")
return "&amp;"
}
//]]>

</script>

Step 5. Find the code ]]></b:skin and paste the CSS stylish below just before or above this tag,

/********HTML Converter And Counters CSS*****/
input.wbt2 {
color:#333;
font: bold 14px  Calibri,Rockwell,helvetica,sans-serif;
border:1px solid #a2ccdb;
background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj3q83BalAUx-DNE5DmWBRWECgaIhse6lxVTjY-T_LWQ3i6ufPkT7fjJSG55bZkrPYFW3jwSdFYBaIp45V24llFc0BIKdMo6d6v-EaTxhy-ygQ2-er7avNk_uQRwF4NeZZ6cdLZMypjNGo/s1600/postbg.png) repeat-x scroll left top;
cursor:pointer;
}
input.wbt2hov {
border:1px solid #a2ccdb;
background:#0090ff;
color: #fff;
}
/******Text Area of All Tools*******/
textarea {
background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj3q83BalAUx-DNE5DmWBRWECgaIhse6lxVTjY-T_LWQ3i6ufPkT7fjJSG55bZkrPYFW3jwSdFYBaIp45V24llFc0BIKdMo6d6v-EaTxhy-ygQ2-er7avNk_uQRwF4NeZZ6cdLZMypjNGo/s1600/postbg.png) repeat-x scroll left top;
width:100%;
color:#666;
font: normal 13px Georgia,Times,sans-serif, verdana;
border:1px solid #a2ccdb;
}

Step 6. Save your Template and Enjoy!

---

Everytime you need to use this widget  in your posts or in your new post, just paste the code below in your blogger editor page (switch it to HTML mode).

<form>

<textarea name="data1" style="height: 200px; width: 590px;"></textarea> <input class="wbt2" onclick="html2entities(this.form.data1)" onmouseout="this.className='wbt2'" onmouseover="this.className='wbt2 wbt2hov'" type="button" value="Convert It" /> <input class="wbt2" onmouseout="this.className='wbt2'" onmouseover="this.className='wbt2 wbt2hov'" type="reset" value="Clear" /> </form>

About the Author:

Hello folks! This is GOLDEN WORKS TV, the admin of this blog. No words could described my grateful appreciations to all newbie and professional bloggers around the world and most especially to Almighty God who gave me the wisdom...Read More

Follow him @ Twitter |Facebook