Where to host Javascript for blogger blogs?

Blogger does not provide file hosting, (except for photos and videos, in Picasaweb). This poses problem if you want to add a widget or a feature that uses Javascript. Where do you put the scripts then?

Below are some of the options you have when adding Javascripts to your Blogger or blogspot blog.

 

1. Put it in a widget

If the script is small and used only for that particular widget then this is the preferred method. Just put the script in an HTML/Javascript gadget/widget together with the rest of the widget codes, like this:

<script type='text/javascript'>
put javascript code in here
</script>

Most of my hacks use this method. I like this method because it’s easier to install, uninstall and you don’t need to mess with your template code.

 

2. Put it in the template itself

Use this method if the script is accessed from outside of a widget or from more than one places in your template. Do it like this:

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

Then place the whole thing before the </head> tag in your template.

 

3. Host the javascript file externally (outside of Blogger server)

To be specific use Google Sites. Why Google Sites? Because it’s free first and foremost (that’s why you join Blogger in the first place right?) and it’s a  part of Google big family, so you don’t have to sign up or anything.

But Google Sites, like most free host doesn’t accept javascripts. Luckily there is a workaround -change the javascript file into a text file, by changing the file extension from .js to .txt.

Note: The external script must not contain the <script type='text/javascript'></script> tags.

After uploading the file to Google Sites, get the direct link to the file and use it in the code below (notice the .txt file extension).

<script src='filename.txt' type="text/javascript'/>

The direct link to the file will begin with https. To make it work, you need to change https to http when adding to the code, like in this example:

<script src='http://sites.google.com/site/bloggersentral/file-storage/shBrushXml.txt' type='text/javascript'/>

This code must be positioned exactly where you would want the script to be in your template.

 

Enjoy!