Saturday, 21 October 2017

How to Add A Parse AdSense Html Widget to your Blogger blog

Tags

Add Parse AdSense Hmtl code Widget To your blogger blog

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 Here
The 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 ‘&lt;’
  • ‘>’ becomes ‘&gt;’
  • ‘”‘ (double quote) becomes ‘&quot;’
  • ”’ (single quote) becomes ‘&#039;’
  • ‘&’ becomes ‘&amp;’

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
Blogger Dashboard
7.Add below java script code before </head>
<script type='text/javascript'>
//<![CDATA[
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"&lt;";if(">"==a)return"&gt;";if('"'==a)return"&quot;";if("'"==a)return"&#039;";if("&"==a)return"&amp;"};
//]]>
</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.

After dropping your comment, keep calm, it may take minutes before it appears after moderation.
Your comment(s) are appreciated.

You want to get notified when i reply your comment? Kindly tick the Notify Me box.

EmoticonEmoticon