While writing tutorials or asking a question, sometimes it becomes necessary to post HTML and javascript codes in your blog comment forms powered by Blogger. In order to help you to do that we will need to change/encode the same code into a text and then post it effectively without any error.In This Tutorial, i show you how to add this tool in your blog.Check Working Demo
HereThe Tool below will help you to change HTML characters to simple text, which could be easily inserted in your blogger template and comment form. You can also use it to convert your Adsense code into an embeddable form Check.
It converts special characters in this way,
- ā<ā becomes ā<ā
- ā>ā becomes ā>ā
- āāā (double quote) becomes ā"ā
- āā (single quote) becomes ā'ā
- ā&ā becomes ā&ā
Tutorial
1.Create a Page.
2.Paste Below Code in Your Page.
.
<form>
<textarea name="data1" style="width: 590px; height: 200px"></textarea>
<input class="tec2" type="button" value="Convert" onclick="html2entities(this.form.data1)" onmouseout="this.className='tec2'" onmouseover="this.className='tec2 tec2hov'">
<input class="tec2" type="reset" value="Clear" onmouseout="this.className='tec2'" onmouseover="this.className='tec2 tec2hov'">
</form>
3.Change width: 590px and height: 200px with your Requirement.
4.Go to Blogger dashboard.
5.Go to Template Section.
6.Click on Edit HTML and Tick on Expand Widget Templates.
Blogger Dashboard
7.Add below java script code before </head>
<script type='text/javascript'>
function html2entities(){var a=/[(<>"'&]/g;for(i=0;i<arguments.length;i++)arguments[i].value=arguments[i].value.replace(a,function(a){return replacechar(a)})}function replacechar(a){if("<"==a)return"<";if(">"==a)return">";if('"'==a)return""";if("'"==a)return"'";if("&"==a)return"&"};
</script>
8.Find ]]></b:skin> and add below css code above it.
input.tec2{background:none repeat scroll 0 0 #888;border:1px dotted #888;color:#FFF;font:bold 13px ātrebuchet msā,helvetica,sans-serif}
input.tec2hov{background:none repeat scroll 0 0 #aaa;border:1px dotted #aaa;color:#FFF;font:bold 13px ātrebuchet msā,helvetica,sans-serif}
textarea{width:100%;color:#3D72C0;font:14px verdana;background:#fff;border:1px dotted #ff0000}
textarea:hover{border:1px dotted #222}
If you have any comments or question about this tutorial, ask in below comment form.
If this article helps you, share it with your friends or in your social circle. Sharing is caring.
There has been no response to "How to Add A Parse AdSense Html Widget to your Blogger blog"
Post a Comment