Where to host Javascript for blogger blogs?

javascript hosting 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!

19 comments to "Where to host Javascript for blogger blogs?"

ocapta November 24, 2010 at 4:28 AM    

I think that your workaround mentioned in item 3 only works if the referrer is a Google domain. See http://www.google.com/support/forum/p/sites/thread?tid=4460cf8b5c19140f&hl=en

... doug

Greenlava November 24, 2010 at 4:27 PM    

@ocapta
The .js-to-.txt hack should work equally well in both Blogger custom domain and blogspot domain.
The help forum's thread above only discusses .js and .css files.

Lucrari de licenta April 27, 2011 at 1:51 AM    

Good info, thanks for sharing :)

Anunimi February 3, 2012 at 6:04 AM    

Thanks, It is a very helpful article, I did it and it seems to work. Peace

Ashley February 7, 2012 at 4:20 PM    

Thank you so much! I've been searching around so long on how to get emoticons into my posts and this helps soooo much!

Anonymous,  July 30, 2012 at 8:20 AM    

THANK YOU SO MUCH! this was what I was looking for, super helpful!

Techehub August 22, 2012 at 7:13 PM    

how to use JavaScript in post ?? i want to use it blogger post not in widget nor in template. please help me !!!

Greenlava August 23, 2012 at 12:12 AM    

@Techehub
Put the script in a script tag, like so:
<script>
PUT SCRIPT HERE
</script>

and place it in your post's HTML.

Patil Makarand August 29, 2012 at 12:56 AM    

Thanks a lot for this solution..worked for me perfectly. Now I can use that gadget easily.

open source developer October 13, 2012 at 4:13 PM    

Thanks for sharing. Its good to see fresh content always.

George Sruthin October 13, 2012 at 9:48 PM    

plz tell me how to add code box to blogger my mail id gsruthin@gmail.com

Unknown November 9, 2012 at 8:10 PM    

i dont i don kow .what went wrong i need your help
pls
my emaila

Anonymous,  November 30, 2012 at 9:19 AM    

thanks for sharing your javascript tutorial

Sagar Kudu January 1, 2013 at 12:40 PM    

thx

Anonymous,  June 5, 2013 at 4:55 PM    

This doesn't work in Chrome any longer (and probably related browsers), because it now enforces strict MIME types for security and refuses to execute text files as JavaScript

Unknown June 8, 2013 at 1:23 AM    

THANKS! This helped me so much!
<3

David July 16, 2013 at 1:51 PM    

Thanks for sharing! I've used it in http://d-chords.blogspot.com

Some feedback:
1. There is typo in the article "text/javascript' (double quote and quote)
2. I uploaded the javascript to google sites using TXT file extension and it is not working. I tried using JS file extension and it works perfectly (of course I updated file extension in the src as well).

Unknown September 4, 2013 at 5:28 PM    

MAST.........

Anonymous,  September 7, 2013 at 2:26 PM    

JS2TXT, you say? First, any pastebin-like website with "raw download" link will also do fine. Second... There is a way to upload your JS to an image hosting (luckily, most image hostings do not perform image preprocessing, at least they keep the raw original available for download) by making it a valid GIF image. How? Just put the string GIF89a=\t0\t;;;; (it's in C notation, the \t is actually tab character, %09) in the very beginning of your script and save it as a GIF file. Then upload and use the "original link" or "raw link" or "direct link", whatever it's called depending on the image hosting of your choice (i personally use imgur, it's called "direct link" there). Try to include these GIFs in the script tags - and voila, they work.

Post a Comment

We love to hear from you! Leave us a comment.

To ensure proper display, HTML/XML/Javascript need to be escaped first using this escape tool.