Google Drive Hosting: How to Host Blogger CSS & JavaScripts Files On Google Web Hosting

If you’re ever worked as a web designer and web developer, then you must know about the importance of store your files and folders.

Every time when any one visit your site, the server or the host will access that location where your files and folders exists and display the results on the screen.

How to Host Blogger CSS & JavaScript Files in Google Drive Hosting

This is very important things because you upload your all files to that particular locations where server reaches easily and use at the time of need.

Whenever you uploading your files and folders to any web host or any other third party sites, this will have an impact on some important things like your website loading speed, your SEO ranking in search engine, your all other abilities to make all the important adjustments to your site.

Here in this article, I’ll show you how to host your CSS and JavaScript files on Google Drive to blogger or any other CMS system. Not only host files but also you host your website on Google web hosting services.

• 16 Best Web Hosting Services to Start a Website
• 16 Helpful Tips You Must Know Before Choosing a Web Hosts

Many bloggers use a custom template to their blogger blogs. They always use some external blogging widgets that needs some external CSS files and JavaScript files for their working.

But unfortunately, blogger doesn’t provide the option to upload your separate CSS or JavaScript files to their server, they only provide to upload images and videos and texts.

Previously, almost every developers and bloggers would use the Google code which is look like their URL (http://code.google.com/host/files) etc to host their files because it’s look like so simple and easy to use.

But Google announced many other features and deprecating all the other options like download for hosted projects, so I’ll recommended you to use Google Drive is the best.

We have many other options to host our CSS and JavaScript related files like Dropbox, Google Apps, Google Codes, but Google Drive is the best options from them and I personally recommended you to use it.

• Get Free Dropbox Space for Upload Your Personal Files

Google Drive gives you free account which is used everyone with their Gmail ID, and Sign in to their account, they provide 15 GB free space for every users to use.

Why Should We Use Google Drive For Host Files?

Before going further more, the first question arise in your mind, of why should we host files and folders on Google Drive? and what are their benefits. So below I’ll mention some important and useful benefits of Google Drive.

#1 – Freedom

Google Drive provide you the free space and freedom to use according to your taste and interest. You’ve a full freedom here to upload your files which you want and download them anytime.

#2 – Free Space

When Google launched this service with the name of “Google Drive“ they only provide 5 GB free space to their users. But after that they allow 15 GB free space that helps us more to use them for our development projects and hosts our files on here.

#3 – Versatility

Google Drive provides you the free space not only to upload some specific kind of files, but also gives you the opportunity to upload any files which you want, whether it is text files, video files, audio files, CSS files, JavaScript files, software’s, games etc.

#4 – Security

Security is the main and one of the important options for any kind of businesses. If you’ve a tightened security then there is no fear. So Google also provides you the full security to your files, they also use protocols and HTTPs connections that make it more secure.So without any hesitation you can use this service.

#5 – Reliability

As everyone know about the Google, and it’s all services own by Google itself. So it is the most reliable and protective service which you use without any fear. It provides 100% up-time supports and access to your hosted files from anywhere in the world.

#6 – Public and Private Options

Because Blogger itself doesn’t provide this facility to hosting your external CSS, HTML or JavaScript related files. They only provide to hosts within the blogger template HTML coding, where you can add, remove or change your code of files.

Host CSS, JavaScript, HTML Files in Google Drive Hosting

<b:skin>

Log In to Your Google Drive Account

Step 6 – Now go to “Google Drive” site and log in to your account using your Gmail ID.

Step 7 – Now click on the “New” button at the left sidebar top upper corner and a drop down menu list open, here click on “Folder” option.

Step 8 – After clicking on “Folder” option, a pop up box appear, here enter your folder name and click on save button.

Step 9 – So you’ve successfully create new folder. Now we upload our files on this folder. Simply drag drop files here or simply use “NEW” button in the left sidebar and from them click on the “File Upload” link.

Step 10 – A pop up box appear, select your style.css file which we saved on our PC, and click on “Open” button.

• How to Copy Entire Folder in Google Drive

Get Share Links in Google Drive Files

Step 11 – Now select your file and right click on it and select “Share” option or you can also go to your upper options bar and click on “Share” link as show below.

Change Shareable Link 

Step 12 – After clicking on share option, click on “Advanced” link and below type of pop up box appear. Here click on “Change” option to change it’s setting.

Private to Public Share Link in Google Drive

Step 13 – Simply select the “On – Public on the web” option and hit on “Save” button.

Get the Link Address to Copy it

Step 14 – So after making it public, now simply copy the link address and change it with given below example.

Original Link :

https://drive.google.com/file/d/0Byhbsy7JPmcPUURVN19fYUprYUk/view?usp=sharing

Change With : 

https://drive.google.com/host/0Byhbsy7JPmcPUURVN19fYUprYUk

As you copy the original link from your account. Simply change your link with this style that we use later. The blue color ID is the unique address for your file share link.Simply make your original link with this type and you’re done your work.

Use External Links to Blogger Blogs 

Now here we use these external file links to our blogger blogs. For this purpose, follow below complete guide.

Step 1 – Go to your blogger blog and click on “Template” link and click on “Edit HTML” button.

Step 2 – Now copy the whole CSS code and delete it and simply replace with the below tags. In between this tag we use our external file which we uploaded on Google Drive hosting.

For using the above link to your blogger template, follow the below syntax.

<link href=’Your-CSS-File-Link-Here’ rel=’stylesheet’/>

For Example : 

<link href=’https://googledrive.com/host/0Byhbsy7JPmcPUURVN19fYUprYUk‘ rel=’stylesheet’/>

Simply copy this tag and paste it just below the <head> tag in your blog template. 

You’re done your work, simply save your template and go to your blog and refresh it and check whether it is working well or not. If YES then congratulations, and if not work, then don’t worry, repeat the all steps carefully again, and check where you mistake.

But if you done all the work right but it doesn’t work, then ask me in the comments section instantly. 

How to Host JavaScript Files in Google Drive

Now CSS file is done, we go to the next step to upload JavaScript files. Basically in our blogger template, JavaScript code will be used as <script src=’Your-JavaScript-File-Link’ type=’text/javascript’></script> . 

Simply copy your JS code and paste it in new text file and save your file with any name and make it’s extensions .JS . (.js) is the extension of JavaScript files and use the above methods to upload on Google Drive and getting it’s public link. 

After that, use below syntax to make your JS Script file.

<script src=’Your-JS-File-Link’ type=’text/javascript’></script>

<script src=’https://googledrive.com/host/0Byhbsy7JPmcPUURVN19fYUprYUk‘ type=’text/javascript’></script>