» » » » Host JavaScript Files on Blogger
Host JavaScript Files on Blogger - If you have a template that uses JavaScript files, usually those files located on another host (not on your blog). To execute the file, you should refer to the file through the template you're using. Examples as follows:
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<html b:version='2' class='v2' expr:dir='data:blog.languageDirection' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>
  <head>
    <meta content='IE=EmulateIE7' http-equiv='X-UA-Compatible'/>
    <b:if cond='data:blog.isMobile'>
      <meta content='width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0' name='viewport'/>
    <b:else/>
      <meta content='width=1100' name='viewport'/>
    </b:if>
    <b:include data='blog' name='all-head-content'/>
    <title><data:blog.pageTitle/></title>
 
 <script src='http://www.somewherehost.com/folder/subfolder/javascriptfile1.js' type='text/javascript'/>
 <script src='http://www.somewherehost.com/folder/subfolder/javascriptfile2.js' type='text/javascript'/>
 <script src='http://www.somewherehost.com/folder/subfolder/javascriptfile3.js' type='text/javascript'/>

    <b:skin><![CDATA[/*

Why You Should Host JavaScript Files on Blogger?

Host JavaScript Files on Blogger
There are are some obstacles that may occur when you use the JavaScript files that located outside of your blog. The most common is the limit of bandwidth and server downtime where those files hosted. Therefore, it would be better for you to host JavaScript files on Blogger.

How to Host JavaScript Files on Blogger?

Using the example above (row 14-16), you can see that the template using 3 JavaScript files (javascriptfile1.js, javascriptfile2.js, javascriptfile3.js) located at www.somewherehost.com.

Now we will integrate these JavaScript files into the template. Follow these steps:
  1. Go to your template editor (HTML editor) on your blog. Make sure to backup your blogger template first.
  2. Visit the URL of each file is located and copy the entire contents of each of these JavaScript files.
  3. Referring to the example above, replace lines 14-16 with the following code:
    <script type='text/javascript'>
    //<![CDATA[
    paste the entire contents of the javascriptfile1.js file here
    //]]>
    </script>
    
    <script type='text/javascript'>
    //<![CDATA[
    paste the entire contents of the javascriptfile2.js file here
    //]]>
    </script>
    
    <script type='text/javascript'>
    //<![CDATA[
    paste the entire contents of the javascriptfile3.js file here
    //]]>
    </script>
    
  4. The end result of this process will be as follows:
    <?xml version="1.0" encoding="UTF-8" ?>
    <!DOCTYPE html>
    <html b:version='2' class='v2' expr:dir='data:blog.languageDirection' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>
      <head>
        <meta content='IE=EmulateIE7' http-equiv='X-UA-Compatible'/>
        <b:if cond='data:blog.isMobile'>
          <meta content='width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0' name='viewport'/>
        <b:else/>
          <meta content='width=1100' name='viewport'/>
        </b:if>
        <b:include data='blog' name='all-head-content'/>
        <title><data:blog.pageTitle/></title>
     
     <script type='text/javascript'>
     //<![CDATA[
     paste the entire contents of the javascriptfile1.js file here
     //]]>
     </script>
     
     <script type='text/javascript'>
     //<![CDATA[
     paste the entire contents of the javascriptfile2.js file here
     //]]>
     </script>
     
     <script type='text/javascript'>
     //<![CDATA[
     paste the entire contents of the javascriptfile3.js file here
     //]]>
     </script>
    
        <b:skin><![CDATA[/*
    
  5. Preview and Save your template
Use this method to integrate any JavaScript file into your blogger template. By host JavaScript files on Blogger, your blog will load faster because the file is located in your blog. Do not worry about bandwidth limit and server downtime anymore.

Got something to say?