How to Host CSS or JavaScript in Blogger Using Google Drive

Sometimes we need to host our codes on some external source for our blogger templates but unfortunately blogger doesn't provides the flexibility to host CSS or JavaScript files in a separate link. That's why hosting CSS and JavaScript files on your Blogger Blog has always been a matter of concern for bloggers. Embedding external files instead of writing the entire code has its advantages. Blogger doesn't provides any option for hosting external files but luckily Google Drive provides you an opportunity for hosting CSS or JavaScript files. Hosting your codes on external sources reduces your template size and your blog loads faster. Today in this tutorial we'll learn that How to Host CSS or JavaScript in Blogger Using Google Drive.

Features of Google Drive

There are many features for hosting your files on Google Drive and some of them are:-

Lots of Space: Google drive provides you 5Gb of free space, and its enough for hosting codes. If your drive is full, you can get more space by upgrading.

100% Security: Google Drive provides you full proof security for your hosted files, you don't have to worry about your files security.

Privacy: Google drive lets you keep your files private, if you don't want to share your files with others you can change its privacy to Private and no one will be able to access except you.

Create and collaborate: Google drive provides you the flexibility to host different kinds of spreadsheets.

All this for Free: Yes all this is for free, you don't have to pay a penny for hosting you files on Google Drive.

How to Host CSS in Blogger Using Google Drive

Step 1. First of all you've to create the CSS file. To do this, copy the CSS code from your template that you want to upload. Log in to your Blogger Account >> Template >> Edit HTML >> Search (Ctrl+F) for <b:skin><![CDATA[ tag and copy the code till the ]]></b:skin>.

Step 2. Prepare your style.css file After copying the CSS code paste it in the notepad and remove that code from your template. Now save the notepad and name it as style.css. Note: The file extension must be in .css

Step 3. Now you've to host your CSS file. Go to Google Drive and log in to your Gmail account. Click Create >> create a new Folder >> Name it whatever you like such as mycodes or myscripts etc. and click Create button

Step 4. Open that folder >> Click Upload button and choose Files >> Now it will request you to choose your files, so select you file and click the Open button. A wizard would appear on the right side of your screen displaying your upload status.

Step 5. Once the file is uploaded, click the Share button >> Click the Get Shareable Link and choose Anyone Can View the File option. It will provide you the sharing link

Step 6. The sharing link would be something like https://drive.google.com/file/d/your-unique-file-code but you have to change it to https://googledrive.com/host/your-unique-file-code. For example if my file link is https://drive.google.com/file/d/0B43vwjPtKakCODMzcEc2amM3ZTQ so i will change it to https://googledrive.com/host/0B43vwjPtKakCODMzcEc2amM3ZTQ, Hope you got it.
Step 7. Its Time to Add your File/Link to Blogger. Log in to your Blogger Account and go to Template >> Edit HTML. Now search for the <head> tag and paste the below code just above/before it. Note: Don't forget to replace https://googledrive.com/host/your-unique-file-code with your file link that we created in the previous step and make sure that you've removed the CSS code from your template as we mentioned in the step 2.

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

Step 8. Click the Save Template button and you're done!

How to Host JavaScript in Blogger Using Google Drive

To host JavaScript on Google Drive, you have to follow the same steps, the changes are that the file Extension must be in .js form in case of JavaScript and for adding it to blogger use the code below

<script src='your-googledrive-javascript-link-here' type='text/javascript'></script>

Congratulations: You've successfully hosted your CSS and JavaScript in blogger using Google drive.

From Editors Desk

We hope that you've learned How to Host CSS or JavaScript in Blogger Using Google Drive. Share this tutorial with your friends and don't forget to subscribe us!
Got a Question? Please don't hesitate and ask us in the comments section below. If we missed something, then leave a comment below.