How can I host/upload css and javascript files on Google Drive?

Learn to host/upload CSS and JAVASCRIPT files on Google Drive easily

Storing Blogger CSS and JavaScript files with Google Drive will help to eliminate any of the problems mentioned above and reduce the clutter among your services. Taking this method can increase your site speed, increase the opportunities for a successful SEO campaign, and make your life so much easier.

Google Drive provides ample amount of space to store large files, and offers collaboration services so that you can work among different team members on the same project. Some of the files that you upload into the cloud services can remain unpublished and stay within the private site, whereas other files like blog posts can be published or stored to the public site.

Another beneficial feature of storing all your Blogger files on Google Drive is that it is highly secure. Google comes with the backing of one of the leading companies in the technical world so that you can be sure your content is safe from hackers and those looking to compromise your site.

This guide will provide you with step-by-step instructions on how to setup your Blogger site using Google Drive. It's completely free to take advantage of this strategy, and will provide you with a solid platform from which to build your blog.
host blogger css javascript files

Step 1. Prepare the CSS/JavaScript Files

  • First, we need to create the file that we need to host. To host a CSS file, open the Notepad and paste the CSS code (if it is enclosed within the tags, remove them). 
  • In the Notepad menu, select 'File' > 'Save as' and type the file name with the .css extension just like I did with mycssfile.css - see the screenshot below.
create a css file
  • In the same window, choose "All files" in the "Save as type" option and set the Character Encoding to UTF-8. 

  • If you want to host a JavaScript file, add the .js extension (instead of .css) at the end of your file name (remove the tags if you see them). Click "Save" and navigate to the location where you want to save the file. 

Step 2. Upload Your File on Google Drive

  • Access https://drive.google.com and log in with your Gmail account. After you logged in, click on the 'Create' button and add a new separate folder to upload your JavaScript and CSS files.

create folder in Google drive
  • Open the newly created folder, and click on the Upload button with the upward arrow to choose the files that you need to upload.

upload files using google drive
  • Now, navigate to the location where you saved the files, select them (to select multiple files, press and hold down the Ctrl key on your keyboard and then click on them) and press the Open button.
  • After the files have been successfully uploaded, right click on the file names (to select all your files in the folder, click on the checkbox) and select 'Share':

share google drive files
  • In the 'Sharing settings' window, click on the 'Change' link and choose the 'Public on the web' option. Press 'Save' and copy the link(s) of your uploaded file(s) from the 'Links to share' box highlighted in blue, then paste it into a Notepad to use it later.

javascript css file sharing

Step 3. How to Add an External CSS/JavaScript file to Blogger

Before you can use the links, you must replace 'https://drive.google.com/file/d' to 'https://googledrive.com/host' and remove '/edit?usp=sharing' in the link.

For example, the link to mycssfile.css that I copied looks like this:
https://drive.google.com/file/d/0B4n9GL3eVuV-TkphMkc3SFR2Slk/edit?usp=sharing
Notice the part in blue after the "/file/d/" part. That is the file ID which is used to access it via the new hosting service. It should start with the following URL:
https://googledrive.com/host/
Add the file ID like this (remove the '/edit?usp=sharing' part):
https://googledrive.com/host/0B4n9GL3eVuV-TkphMkc3SFR2Slk
Now log into your Blogger account, select your blog and go to Template > Edit HTML. Click anywhere inside the code area and press the CTRL + F keys to open the search box:
open blogger search box

If you want to add a CSS file, type the following tag inside the search box and hit Enter to find it:
Just BELOW the tag, add this line:
https://googledrive.com/host/0B4n9GL3eVuV-TkphMkc3SFR2Slk
" />
And replace https://googledrive.com/host/0B4n9GL3eVuV-TkphMkc3SFR2Slk with the link of your CSS file:
add external css to blogger

If you want to add a Javascript file, search for the following tag:
And add this line just ABOVE it:
Replace the line in blue with your URL:
add external javascript js to blogger

Finally, press the 'Save template' button to save the changes. And you're done!

JOIN US TODAY! with How To Learn Blog

Please note before commenting on this page.
1. Don't comment as for advertisement purpose.
2. Don't hyperlink your website inside comment box.
3. Abuses are strictly prohibited.
4. If necessary, you can post the only URL without any text hyperlink. ConversionConversion EmoticonEmoticon