Inserting any JavaScript codes into HTML editor of your blog is very tricky. To insert JavaScript codes into blogger template, follow these steps:
- Step-1: Login to blogger.com and visit the dashboard of your blog.
- Step-2: Now, click on template menu from the left sidebar.
- Step-3: From template window, click on Edit HTML.
- Step-4: Finally, you have to decide where the JavaScript codes should be inserted. In maximum cases JavaScript codes works fine by adding it within tag.
But, I personally advise you that paste your codes where it will be required and not anywhere as said by any third party. I mean some codes are only useful for a particular static page and therefore it should not be place in the blogger template. To get fast speed of your blog and to prevent rendering unnecessary blocking script resources, you should paste the code in HTML editor of that particular static page itself.
Similarly, if any JavaScript code is necessary for article/post pages then you may insert the script codes within conditional tag as shown below and paste the whole codes just above/before closing
tag.
Similarly, if any JavaScript code is necessary for article/post pages then you may insert the script codes within conditional tag as shown below and paste the whole codes just above/before closing
<b:if cond='data:blog.pageType == "item"'>
Paste Your JavaScript Here for post page
</b:if>
The above conditional tag will help to load the script for your blog posts pages only and therefore the other page like home page, label/index page and static page etc. will be fast. Accordingly, you may apply these conditional tags for rendering your JavaScript codes as per requirements.
<b:if cond='data:blog.pageType == "static_page"'>
<!-- Paste Your JavaScript Here for Static Page -->
</b:if>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<!-- Paste Your JavaScript Here for Homepage -->
</b:if>
<b:if cond='data:blog.pageType == "error_page"'>
<!-- Paste Your JavaScript Here for 404 Error Page -->
</b:if>
<b:if cond='data:blog.pageType == "index"'>
<b:if cond='data:blog.searchLabel'>
<!-- Paste Your JavaScript Here for Label Page -->
</b:if>
</b:if>
Most of queries generally I got for placing AdSense Unit codes into blogger template. So, if you are getting error while inserting AdSense codes then please read separate tutorial specifically deals with creating and adding AdSense Ad code to blog.
There are another error messages you may see while saving your blogger template:
Error parsing XML, line 646, column 15: Attribute name “async” associated with an element type “script” must be followed by the
‘ = ‘
character.
OR
Error parsing XML, line 2119, column 3: The element type “script” must be terminated by the matching end-tag “
”
I would strongly refer my free online tool for Encoding and Decoding codes that may solve most of your codes related errors. But if you are facing again problem then please try these guidelines:
<script type='text/javascript'> tag or the closing </script>
end-tag or both. As a result of which your all codes will appear on live webpage and shall not work properly.
JavaScript Codes Errors
Sometimes in scripts we use ampersands (&), less-than (<) or greater-than (>) sign, single quote (‘) and double quotes (“) and that results errors like –Error parsing XML, line 1681, column 18: The content of elements must consist of well-formed character data or markup.
<script type="text/javascript">
function swtJavaErrors(){
document.getElementById("Showeblogin");
var e=document.createElement("script");
e.type="text/javascript";
e.async=false;
(document.getElementsByTagName("SWT");
document.write("<");}
</script>
In the above codes you may notice the last line that contain (“<“) which results error message. Now, simply we place CDATA markers with comments in this JavaScript codes and it will work fine for blogger HTML documents.
<script type="text/javascript">
//<![CDATA[
function swtJavaErrors(){
document.getElementById("Showeblogin");
var e=document.createElement("script");
e.type="text/javascript";
e.async=false;
(document.getElementsByTagName("SWT");
document.write("<");}
//]]>
</script>
Thus, we have added //<![CDATA[ after <script type="text/javascript"> and //]]> just before/above closing </script> tag.
Therefore, you should use any third party (all websites or blogs except blogger) JavaScript codes within this standard frame.<script type='text/javascript'>
//<![CDATA[
Place your JavaScript codes here
//]]>
</script>
tag in HTML editor of your blogger blog template and paste that file just above
tag using the following standard format:<script src='Your-External-JavaScript-File.js' type='text/javascript'/>
2) Add JavaScript codes within widget of blogger blog
Yes, this is very easy and risk free trick because you may add or remove JavaScript codes into your blog without touching blogger template. Follow these simple process to add JavaScript codes or files within a gadget provided by blogger itself.- Step-1: Go to layout of your blogger blog.
- Step-2: Click on Add a Gadget text link where you want to appear the result of that JavaScript codes.
- Step-3: Now, scroll down and select HTML/JavaScript (Add third-party functionality or other code to your blog).
- Step-4: Finally, insert your JavaScript codes into the content field and save it. If you are facing another problem then please fill free to ask me through making a comment below.
Post a Comment