How to Host JavaScript or CSS Files on Google Drive

Many bloggers use a custom template for their blog and a custom template sometimes requires an external JavaScript file, but sadly we can't host the JavaScript or CSS file on Blogger because Blogger only allows us to upload images and videos.

Previously, most bloggers would use Google Code (http://code.google.com/hosting) to host these files because Google Code's project hosting feature is very simple to use and free. But since Google announced that they are deprecating almost all download options for Project hosting on Google Code, we have to switch 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 is not so hard to use Google Drive, just create a folder, upload the JavaScript file (or any other file like images, videos, documents including PDFs and Microsoft Office files) and then change the file's sharing settings from "private" to "public on the web", or simply change the folder's sharing settings from "private" to "public on the web" and all files inside that folder will have the same sharing permissions, but the tricky part is getting the proper direct link for the JavaScript or CSS files, so we can use it on the blogger template. Please follow the steps below to host your JavaScript or CSS file using Google Drive:

Method 1

With this method you can get the proper link with the file name:
https://googledrive.com/host/folder-id/filename

Example:
https://googledrive.com/host/0B47Pdqj--olfUENkNGhtX3lSN0U/example.js
https://googledrive.com/host/0B47Pdqj--olfUENkNGhtX3lSN0U/example.css

How to add an external JavaScript to a web page (blogger template)?
<script type='text/javascript' src='https://googledrive.com/host/folder-id/filename.js'></script>

How to add an external CSS to a web page (blogger template)?
<link href='https://googledrive.com/host/folder-id/filename.css' rel='stylesheet' type='text/css'>

Step 1:
Login to your Google Drive account > Click Create > Select Folder

Step 2:
Type a name for the folder and click Create button

Step 3:
Select the folder and then click the Share button

Step 4:
Click Change...

Step 5:
Change the sharing settings from "Private" to "Public on the web" > Click Save > Click Done

Step 6:
Now click on the folder's name to go into it

Step 7:
Click the Upload button > Select Files...

Step 8:
Select file > Click Open

Step 9:
The item will have the same sharing permissions as the selected folder.... Click Upload and share

Step 10:
Copy the string characters after #folders/

Step 11:
Open a new browser tab > paste that string (folder id) into the address bar after
https://googledrive.com/host/ 
Example: https://googledrive.com/host/0B47Pdqj--olfUENkNGhtX3lSN0U

Step 12:
To get the direct link to the file, right click on example.js > Select Copy Link Location (Firefox)

Method 2

With this method you can get the proper link without the file name:
https://googledrive.com/host/file-id

Example: 
https://googledrive.com/host/0B47Pdqj--olfcUNkV3o3SjdoVGM
https://googledrive.com/host/0B47Pdqj--olfVVg3MFgxVlpqd0k

How to add an external JavaScript to a web page (blogger template)?
<script type='text/javascript' src='https://googledrive.com/host/file-id'></script>

How to add an external CSS to a web page (blogger template)?
<link href='https://googledrive.com/host/file-id' rel='stylesheet' type='text/css'>

Step 1:
Login to your Google Drive account > Click Create > Select Folder

Step 2:
Type a name for the folder and click the Create button

Step 3:
Click on the folder's name to go into it

Step 4:
Click the Upload button > Select Files...

Step 5:
Select file > Click Open

Step 6:
Select the checkbox to select the file > Click the Share button

Step 7:
Click Change...

Step 8:
Change the sharing settings from "Private" to "Public on the web" > Click Save

Step 9:
Copy the link > paste in Notepad

Example:  

https://docs.google.com/file/d/0B47Pdqj--olfVVg3MFgxVlpqd0k/edit?usp=sharing
File ID: 0B47Pdqj--olfVVg3MFgxVlpqd0k

Paste the file id after: https://googledrive.com/host/

Direct link to the file:
https://googledrive.com/host/0B47Pdqj--olfcUNkV3o3SjdoVGM

Another article you might be interested in: How to Host a Website on Google Drive
If you found this article helpful, then please share it with someone else by using the buttons below. Thank you!

Read more: http://www.komku.org

Host CSS, HTML or JavaScript Files in Blogger Using Google Drive 

Number of websites available which you can use to upload your CSS, HTML or JavaScript files. Bloggers and webmasters prefers to add their entire StyleSheet coding in single file. But, blogger has not this kind of feature to upload CSS and JavaScript files. Recently one of our readers asked us how he can host files on blogger? Good news, Google Drive has ability to host your CSS, JavaScript and HTML Files for FREE. In this short tutorial, we will show you How to Host CSS Files with Google Drive in Blogger?

Advantages Of Google Drive

• Google Drive Service is Free, Secured and Safe.
• Google Drive Provides 5 GB Storage With Unlimited Bandwidth.
• Create and Host Many Kinds Of Spreadsheets and Presentations.

Also See - Capture and Share Screenshots Easily With Dropbox

How to Host CSS Files with Google Drive in Blogger.

Step#1: Copy CSS Code From Blogger Template

Go to Blogger Dashboard » Template » Edit HTML and search for the <b:skin><![CDATA[ tag. Now, you will see a full CSS coding, copy this coding till the ]]></b:skin> tag. See screenshot below:

Step#2: Make a style.css File

Remove the entire CSS code from your blogger template after copying it and paste the coding in a new notepad. Now save the document and name the file to style.css (the extension of the file should be in .css).

Step#3: Host Your CSS File On Google Drive:

Go to Google Drive and login into your Gmail Account. Create a new folder. Click on “Create” button and from the drop down list select “Folder”. Now name the folder to anything that you like such as HostingFiles, my files and etc. In the end, press "Create" to conclude.  

Click on the new folder. Now, choose the upload icon present on the left side of create button. Select “File”.

In this step select the style.css file that you created few moments ago. Press the open button.

When you will click on open button then you will see a small upload wizard on the right side of your screen. It will take some time.

Press the “Share” button. Make this file public. Press change, and select “public on the web”. Now, click on Save button.

Step#4: Getting a Proper Hosting Link

Right click on the uploaded file and select “Share”. Copy the whole URL present in the text area under “Link to share”. See screenshots:

Now, we will modify hosting link. In link to share section it would somewhat looks like this https://docs.google.com/file/d/your-upload-file-code/.

Replace that link to this format https://googledrive.com/host/your-upload-file-code.

Note:
Make sure “your-upload-file-code” remains the same before and after the changes are made. For Example, if the link of my file is 

https://docs.google.com/file/d/0B66hLK2d2x4VVl9SaXNvb2dPRVU/ so I will change it to 

https://googledrive.com/host/0B66hLK2d2x4VVl9SaXNvb2dPRVU.

Step#5: Adding Google Drive Hosted CSS file in Blogger
Again, go to Blogger » Template » Edit HTML. Now search for the starting <head> tag and just above it paste the following code.

<link href='https://googledrive.com/host/your-uploaded-file-code' rel='stylesheet'/>

Please replace https://googledrive.com/host/your-uploaded-file-code with your own Google drive hosting link

If you want to give your suggestion or you want to ask anything related to this tutorial then please leave a comment below.

Resource http://www.blogsdaddy.com