Host Blogger JavaScript or CSS on Google Drive

By | 2:09 AM Leave a Comment
You may find many tutorials on how to host your JavaScripts on code.google.com, but this method doesn't work anymore, because the purpose of Google Code is not for this, and the site was abused by users. So Google decided to disable hosting of files on code.google.com. Here is the official news post "A Change to Google Code Download Service"

So, you have to look for alternative sites to host your blogger JavaScripts or CSS files. A good alternative is another popular product from Google: Google Drive.
As you may know, there is a method to host your JavaScript code directly inside Blogger (and i will show you how to do it bellow), it is a good method for small JavaScript code, but if you have multiple huge codes in your template they will make your blog to load slower, and the search engines may not be so happy with this.

How to host JavaScript or CSS codes on Google Drive

Step 1. Go to drive.google.com

Step 2. Make a New Folder called "Scripts" (or whatever name you want)

Step 3. Now you need to Share the folder (so that anyone can access is). First Select "Scripts" folder, than tap the first button on top, the one with a man and a plus sign.

Step 4. In the window that appeared click on "Change..." than chose "Public on the web" and Save.

Step 5. Go inside "Scripts" folder and upload there your JavaScript or CSS.

Step 6. Now that your codes are uploaded, you need to get the direct link to them. First thing you need is "Scripts" folder ID. The ID is in the link address.

Step 7. Now you can access the direct link of your JavaScrip or CSS by going to this addres:
https://googledrive.com/host/FolderID/filename
So in the current example the direct links for the 2 files inside "Scripts" folder are:
https://googledrive.com/host/0BxqfHzcHGf-5WEZCeFN4Q25SdEU/lightbox.css

https://googledrive.com/host/0BxqfHzcHGf-5WEZCeFN4Q25SdEU/lightbox.min.js

Step 8. Now you have to insert the JavaScript or CSS file inside Blogger. To do this copy this code in your template, usually above </head>.
<script type='text/javascript' src='https://googledrive.com/host/FolderID/filename'></script> 
 So in the current example it will look like this:
<script type='text/javascript' src='https://googledrive.com/host/0BxqfHzcHGf-5WEZCeFN4Q25SdEU/lightbox.css'></script>

<script type='text/javascript' src='https://googledrive.com/host/0BxqfHzcHGf-5WEZCeFN4Q25SdEU/lightbox.min.js'></script>

Step 9. Save the template and you are done.



I told you in the beginning of the post that you can also host your JavaScript code directly inside blogger, but as i said before you should use this method only if the script is small, or you're template doesn't use many scripts. I will show you below what you have to do if you want to host the JavaScript inside blogger.

How to host JavaScript inside Blogger template

Step 1. Open your JavaScript with notepad, and copy the whole code.

Step 2. Go to Template > Edit HTML and search for this line:
</head>

Step 3. Paste this code above </head>:
<script type='text/javascript'>
/*<![CDATA[*/

Paste JavaScript code here

/*]]>*/
</script>
Replace "Paste JavaScript code here" with your JavaScript.

Step 4. Save the template.

I hope this methods will help you host your JavaScripts on Google Drive or directly inside Blogger, and this way you will keep your template clean and good looking for search engines.

0 comments:

Post a Comment