How to host CSS and javascript files in Google Drive
Template is a backbone of any website on any platform. Some scripts are so complicated, that they may land up in responding error and may cause the template to load much slower. Hosting CSS, javascript files externally reduces your template weight and help to load it faster. It also makes the template look neat and tidy. 

Furthermore, hosting scripts on an external server makes them secure, minimal clean template, help increasing page speed, reduced coding errors and much more. Blogger only alow us to upload images and videos, so if you want to put any external javascript or CSS it is only possible through linking it from an external source such as gdrive.

Google drive is the best-secured place to host our javascript/CSS files. G drive has a lot of space, its collaborative - meaning you can host any number of files, its reliable, you can edit them anytime, sharing is easy or you can make them private as well. 

Steps

Firstly login to your Google Drive. 

Select 'My Drive' and select 'New Folder'name it accordingly.


Upload your javascript or CSS files to this folder by clicking 'Upload files'


How to prepare .css file: Copy all your stylesheet from your blogger template in an empty notepad. Copy everything between <b:skin> upto ]]></b:skin>. Now rename your text notepad file to .css and make sure you remove these codes from your template as now you are going to connect it through gdrive.

Select link status and choose Sharing settings, select Advanced and select which sharing options you want to allow such as public etc.


In Link Sharing window, select 'On-Public on the web' to ensure anyone views your file content.


Add an External CSS / javascript files to Blogger


You need to edit the sharing link by replacing 


"https://drive.google.com/file/d" to "https://googledrive.com/host" and remove "view?usp=sharing" or "/edit?usp=sharing" from the link.


After replacing a new link must look like this.


https://googledrive.com/host/4B40VdOXXXlxfYTT3VNRRWwwzbp7


Log in to your blogger account > Go to Template > Edit HTML.


If you want to add CSS file, locate <head> and just below it add this link


<link href="https://googledrive.com/host/4B40VdOXXXlxfYTT3VNRRWwwzbp7" 

rel="stylesheet" type="text/css"></link>

If you want to add Javascript file, locate </body> tag and just above it add your similar look-alike link.


<script src="https://googledrive.com/host/4B40VdOXXXlxfYTT3VNRRWwwzbp7" 

type="text/javascript"></script>

There are also other apps which help you with this such as Google Apps, Google code, Google App bot but Gdrive method is much easier and works well all the time. 

For anything, just type in comments.
No more post found.