Google Drive: How to Host JavaScript or CSS Files on Google Drive for Blog of Blogger

Many bloggers use a custom template for his or her blog and a custom template generally needs an external JavaScript file, however sadly we will not host the JavaScript or CSS file on Blogger as a result of Blogger solely permits us to upload pictures and videos.

Previously, most bloggers would use Google Code (http://code.google.com/hosting) to host these files as a result of Google Code's project hosting feature is incredibly straightforward to use and free. however since Google proclaimed that they're deprecatory the majority download choices for Project hosting on Google Code, we've to change to Google Drive as recommended by Google itself.

Starting today, existing projects that do not have any downloads and all new projects will not have the ability to create downloads. Existing projects with downloads will see no visible changes until January 14, 2014 and will no longer have the ability to create new downloads starting on January 15, 2014. All existing downloads in these projects will continue to be accessible for the foreseeable future.
If your project is using downloads to host and distribute files and has a need to periodically create new downloads, we recommend you move your downloads to an alternate service like Google Drive before January 15, 2014.
-Google

Actually it's not therefore onerous to use Google Drive, simply produce a folder, transfer the JavaScript file (or the other file like pictures, videos, documents together with PDFs and Microsoft office files) so change the file's sharing settings from "private" to "public on the web", or just amendment the folder's sharing settings from "private" to "public on the web" and every one files within that folder can have a similar sharing permissions, however the difficult half is obtaining the correct direct link for the JavaScript or CSS files, therefore we will use it on the blogger template. Please follow the steps below to host your JavaScript or CSS file using Google Drive:

Note: You must have a Gmail account in order to get access to Google Drive.

Steps to implement:
1. Make sure you are signed-in to your Gmail account and visit drive.google.com.
2. Click on the upload icon beside the CREATE button >> Click on Files... >> choose the CSS or JavaScript file which you want to host.

3. After the file is uploaded, click on that file >> Click Share on the bottom right of the page.

4. Sharing settings will open up. Copy the link given under Link to share >> Click on Change...

In the Visibility options, select Public on the web >> Hit Save. You now have your file's sharing link (the link that you just copied). Also, that file is now public on the web (this is necessary).

6. The last step is a bit tricky. I will teach you how to prepare a proper hosting link for your CSS/JavaScript file, so that you can embed it in your website/blog's HTML code.

The link you just copied will be something like:

https://docs.google.com/file/d/file_code/edit?usp=sharing

Everything between https://docs.google.com/file/d/ and /edit?usp=sharing is your file's unique code. This code is what we need.

Now change the link to:

https://googledrive.com/host/file_code

The only thing that remains the same is your file's code.

Tip:

You can paste the sharing link in Notepad or any other text editor and then edit it.

Let me give you an example. Given below is the sharing link of my Search Bar JavaScript code which is hosted on Google Drive.

https://docs.google.com/file/d/0By-e_j-W4HZ1S0dwRTJLOHhyOE0/edit?usp=sharing

The code highlighted in red is my file's code. The proper hosting link is:

https://googledrive.com/host/0By-e_j-W4HZ1S0dwRTJLOHhyOE0

You're done! You have successfully hosted your CSS/JavaScript file on Google Drive. Also, you have it's proper hosting link. You just have to embed it or refer to it in your website/blog's HTML code.

How to embed external CSS/JavaScript code:

Since you read this tutorial till the end, I assume you will be knowing how to link or embed external CSS/Javascript files in HTML. If not, you can use the following tags.

To embed external CSS file:

<link rel="stylesheet" href="CSS_file_link"/>

To embed external JavaScript file:

<script src="JavaScript_file_link"></script>

You Also Like:
How to Host file in Google Code for Free