How to put JavaScript in Blogger Template

In Blogger you may sometimes need to use JavaScript to define various functionalities for your website.
But in many cases we run into a XML parse error while trying to include javascript inside our blogger template.
Below are two solutions to this problem.

OPTION 1:Using CDATA for including JavaScript in Blogger Template

Blogger uses XHTML for all its templates.
So if you are writing normal javascript inside the <script> tag then you will end up with a XML parse Error.

So in order to achieve this you need to put your javascript code inside the CDATA tag.
This is achieved in the following manner.

<![CDATA[
// Put your JavaScript here
]]>

So for Example:

<![CDATA[
   <script>
      var x = 5;
      var y = 6;
      document.getElementById("demo").innerHTML = x + y;
   </script>
]]>

If the 1st Option DOES NOT Work then try the 2nd.

OPTION 2:Use CDATA - Method 2

Another specification to use this is like this.

<script type="text/javascript">
//<![CDATA[

----JS CODE GOES HERE------


//]]>
</script>

OPTION 3:Using External JavaScript files.

Another way out of this is to use external JavaScript files.
For this you need to keep your javascript files online somewhere.
If you are hosting your own files, then you can take care of this.
If NOT then you can use many Online Javascript Hosting sites like "YourJavaScript.com"
to host the JavaScript files for you.

Example:
Suppose we are including our JavaScripts inside our <head> tag. Then this would look like this.

<head>
 <script src='http://yourjavascript.com/10232246114/XYZ123.js' type='text/javascript'/>
</head>

Blogger

How to do Session Timeout in BLOGGER Websites.

See a ONLINE DEMO PAGE first before proceeding.
CLICK HERE.

If you are a blogger and you want to add this to your own website then please follow the following steps.

1. Login to Blogger.
2. Go to Template.
3. Then select Edit HTML option from the right.
4. Copy and paste the following code just before the </head> tag.

<![CDATA[
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>
<script type="text/javascript">!function(a){jQuery.sessionTimeout=function(b){function c(b){switch(b){case"start":e=setTimeout(function(){a("#sessionTimeout-dialog").dialog("open"),d("start")},h.warnAfter);break;case"stop":clearTimeout(e)}}function d(a){switch(a){case"start":f=setTimeout(function(){window.location=h.redirUrl},h.redirAfter-h.warnAfter);break;case"stop":clearTimeout(f)}}var e,f,g={message:"Your session is about to expire.",keepAliveUrl:"/keep-alive",redirUrl:"/timed-out",logoutUrl:"/log-out",warnAfter:9e5,redirAfter:12e5},h=g;b&&(h=a.extend(g,b)),a("body").append('<div title="Session Timeout" id="sessionTimeout-dialog">'+h.message+"</div>"),a("#sessionTimeout-dialog").dialog({autoOpen:!1,width:400,modal:!0,closeOnEscape:!1,open:function(){a(".ui-dialog-titlebar-close").hide()},buttons:{"Log Out Now":function(){window.location=h.logoutUrl},"Stay Connected":function(){a(this).dialog("close"),a.ajax({type:"POST",url:h.keepAliveUrl}),d("stop"),c("start")}}}),c("start")}}(jQuery);</script>
		


		<script type="text/javascript">
				 $( document ).ready(function() {
					$.sessionTimeout({
					  warnAfter: 8000,
					  redirAfter: 13000,
					   redirUrl: 'timeout.html',
					   logoutUrl: 'logout1.html',
					});
				});
			</script>
]]>

After integration into the blogger template, code should look like this.
Please customize the $.sessionTimeout function values as per your requirement.

After this your blogger website will have session timeout functionality all throughout, among all the web pages.

Going Deeper: Some Explanation of the function call...and its customization as per requirement.
Customize this function call as per requirement.

Blogger