How to Host CSS or JavaScript Files in Blogger using Google Drive

To host css and JavaScript files for you blogger blog has always been a matter of concern a beginner's webmaster. Blogger has some limitations and not allow you to host your own css and JavaScript files. Many people ask me that "How we can host files on blogger? ",So today i show you guys how to host css and JavaScript files on Google drive and use in blogger.

What are the main reasons to Host files on Google Drive?

Plenty of space: Google Drive provides you 5 GB storage to regular accounts so you can easily upload lots of documents. However, if your disk space is full, then you can upgrade your account from basic to premium.

Create & collaborate: Google Drive provides you the flexibility to create and host different kinds of spreadsheets and presentations. Make some edits in the documents and see real-time changes as they appear.

Reliable & Dependable: With 100% uptime, it provides you the freedom to host anything that you like. It has unlimited bandwidth, but you have to take care of your disk space it should not exceed 5GB mark or you can upgrade your account.

revise your changes: Google drive tracks almost all the change that you make to your document - so whenever you will save a document, a new revision also gets save. You can take a glance back and can make revision accordingly.

public or private options : You can share your files and folders with anyone. Select whether others can comment, share, view or edit your stuff. You can handle everything instantly from your dashboard.

Security at its best: Google Drive has always proven to be the most reliable free hosting service with unlimited bandwidth. Moreover, to provide full proof security Google drive has utilized HTTPS encryption to keep your documents secure.

Free of cost : All these impressive features for free.

How to Host CSS Files with Google Drive in Blogger:

There are several third-party apps that could help you to host files in blogger including Google Apps, Google Code, and Google App bot. Google Drive is perfect and works better than Appbot because there is no need to worry about the bandwidth.

Copying CSS Coding From You Template:

To host your CSS file with Google Drive in Blogger, first thing you need to do is to copy your all StyleSheet coding from your template to an empty notepad. Go to Blogger » Your site » Template » Edit HTML » search for the CDATA[ tag. On finding this tag, you will see a large chunk of CSS coding, so copy all the CSS coding till the ]]></b:skin> tag. For more details see the following screenshot.

Preparing a style.css file

After copying the CSS coding, remove it from your template and paste the coding in an empty new notepad. Now save the document and name the file to style.css .

Hosting your style.css file on Google Drive:

The next step is to upload style.css file to your Google Drive account. First go to Google Drive and login into your Gmail Account. Now you have to create a new folder, so you can upload all the web hosting files at one place. Press the “Create” button and from the drop down list select “Folder”. Now name the folder to anything that you like such as webhost, web files and etc. In the end, press "Create" to conclude.

Now open the folder that you have created and select the upload icon present on the left side of your screen, a drop down list will appearwhich would provide you two choices i.e. File and Folder. Just select “File” and move to the next step.

Now it will request you to select the style.css documents that you created few moments a go. After selecting the file, press the open button and move to the next step.

Once uploading is done press the share button and make this file available for public. Press change and select public on the web , so anyone can find and access it , then press save button .

Now follow these simple steps :

After Copying the sharing Link from google drive, it would somewhat looks like this https://docs.google.com/file/d/your-file-code/. You have to change the copied link to https://googledrive.com/host/your-file-code. Remember: Make sure “your-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/0B31Vi6FGjarnQVlPdkJwdkUwWTg/ so I will change it to

https://googledrive.com/host/0B31Vi6FGjarnQVlPdkJwdkUwWTg. The only thing which remains the same is the file code.

Adding Google Drive Hosted CSS file in Blogger

After preparing a proper hosting link of your file, once again go to Blogger >> Your site >> Template >> Edit HTML >> and search the starting <head> tag and just above it paste the following code. Remember: Do not forget to replace https://googledrive.com/host/your-file-code with your Google drive hosting link, and make sure you have removed the CSS coding from the template as we have mentioned in the step 1. Once everything is done, press the “Save Template” button.

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

If i have left something uncovered, or noticed that i missed something then please leave a comment below.

THANKS .......................

Pages