How To Host JavaScript And CSS Scripts On Google Drive

Embedding an external CSS or JavaScript file instead of writing the entire code has its advantages. However, Blogger doesn't provide the flexibility to host CSS or JavaScript files in one separate link. They are hosted within the blog's code through HTML tags. Hence, today I will teach you how to host scripts on Google Drive and then link them back to your website/blog so they work properly.
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 onChange...

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 back to top button's 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 blue 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: