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

Add Parse AdSense Hmtl code Widget To your blogger blog

 Daniel Jat  2 months ago  Blogging help,Tutorials,

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

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.

Tweet

Do not miss the best of the post Joynaija. Subscribe via email now:

Delivered by FeedBurner

Related Posts:

By Suresuch on Saturday, October 21, 2017