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.
html encoder widget generator


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(http://4.bp.blogspot.com/_WoCJXgXotb8/Sukp3YuPVuI/AAAAAAAABUE/IDKvtV1TS-8/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(http://4.bp.blogspot.com/_WoCJXgXotb8/Sukp3YuPVuI/AAAAAAAABUE/IDKvtV1TS-8/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:
tilt  hover effect
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

No comments :

Post A Comment!

Post A Comment!
We love to hear your feedbacks and suggestions. We will try our best to reply to your queries as soon as time allows. Please keep in mind that all comments are moderated manually by our editors team to minimize spamming, and all the links are nofollow.

Note:
1. To add HTML code in the box, please use our HTML editor generator.
2. Please do not spam. Those type of comments will be deleted upon our review.
3. We should appreciate an individual and suggestive discussion.

Best Regards,

GOLDEN WORKS TV

Related Posts Plugin for WordPress, Blogger...