How to Host, Run and Optimize JavaScript on Blogger

Learn how to add JavaScripts on Blogger blogs and how to optimize the loading of JavaScripts so that your Blogger blog loads fast in browsers.

For several reasons, you may need to use JavaScript on your Blogger blog. There are many additional element required for your blog but Blogger do not give you that option. Widgets and functionalists like label wise recent post, related post section below post, 3rd party comments section, social sharing buttons and more.

You have to edit your blog’s template and add the JavaScript for them as there are no plugins like WordPress for Blogger. Using JavaScript helps you to provide a friendlier experience for the visitors of your Blogger blog.
Also you know that blogger do not allow uploading JavaScript files in the blogger so you are forced to load JavaScript from external server unlike WordPress or self-hosted blogs and websites.

Just adding JavaScripts in you blogger blog will not help you blog as they are going to use precious bandwidth of the visitors. You also need to know ways to optimize them properly in your template as it is NOT OK to sprinkle script tags through your html.

In this post we will look at:-

• Several Methods to use JavaScript in your blogger blog.
• Ways to load JavaScript from the Blogger template itself.
• Few tips that will help you to properly optimize these JavaScripts so that they do not make your blog slow.

So let’s see the methods and tips for using scripts in Blogger blogs.

Method-1: Using External JavaScripts on Blogger

As Blogger do not allow any file uploading in its server you have to use a external script.

<script src='http://example.com/script.js' type='text/javascript'/>

This way you are loading an external JavaScript in you blog. In this way you can add JavaScript both in the widget and template itself.

It is good for loading the large and heavy JavasSripts like, jQuery. But if the scripts are short and small sized and you want to load them from the Blogger blog itself then follow the Method-2 for widgets and Method-3 for template.

Method-2: Host and run JavaScript from Widget/Gadget of Blogger

For hosting and running JavaScript from you widget/gadget of the blog;

<script type='text/javascript'>
javascript code goes here
</script>

Explanation: As you can see the difference from the method-1; no src attribute is used. Just add the entire JavaScript code inside it (line-2,) and it will run from your widget.

Method-3: Host and run JavaScript from Blogger Template

For hosting and running you script from your Blogger template;

<script type='text/javascript'>
//<![CDATA[
javascript code goes here
//]]>
</script>

Explanation: See on the above code the parts //<![CDATA[ and //]]> are added. As you know that the blogger template is a XHTML format which can parse all the snippets as XML. So characters like “<” and “&” inside a script will not be allowed. And will generate an error while saving your template in Blogger. To avoid this problem //<![CDATA[ and //]]> are added.

Just add the entire JavaScript code between //<![CDATA[ and //]]> (line-3,) and it will load in your template.

Need to Remember: Always paste your JavaScript code after //<![CDATA[ is a new line. If you do not then your script will be treated as a XML comment and the scrip will not load.

An example of this error:-

<script type="text/javascript">
//<![CDATA[ document.write("< my js code >");
//]]>
</script>

If you do this your script will not load in Blogger.

When to use: You can use it for any JavaScript large or small sized. Use it specially for small and medium sized JavaScript files.