Before now, Google code was best choice to host your js and css files, but since Google have announced that they will no longer support creation of new files on Google Code starting from January 2015, Google drive increase in popularity, this was also recommended by Google.
Why Used Google Drive To Host Your JS and CSS Files?
Google Drive has ease of use when you compared it to other free file hosting service, Uploading your files and folders to Google Drive can be done in less than a minute.
When you decide to host your files with Google drive you get a massive free 15 gigabytes space to store all your files for free, most people do not even make use of half of this free 15 gigabytes. There is an option to buy more space for those (normally big company) who needed to host larger files.
As a blogger or website owner, it is important that you are careful about where you host your js, css and other files. Scattering your files all over the web can be confusing when you want to make use of a particular file. It is best to host all your files in one source like Googledrive to reduce your blog loading time.
Google has a trusted server and enough space to host your files, so when you host all your file in their drive, the browser don't have to go many places to fetch your files when somebody clicks on your website, this increases your blog loading speed and also increases user experience.
With Unlimited bandwith provided for you by Google servers, you can now have your files load faster than other online file hosting service
How To Host Your Blogger Js And Css files In Google Drive Easily and Effectively.
Now, we are going to see how you can host your js and css files in Google drive and how you can customize it to use in your template easily:
Step 1: Prepare Your JS And CSS Files
The first step in hosting your js file in Google drive is preparing the file in format that can easily be interpreted by browser when you add it to your template
1. Copy and Paste your js (or css) in a editor like "Notepad"
2. If your js or css codes are enclosed in <style>...codes.. </style>. Delete the <style> and </style> tags.
3. In the notepad, click on "File" > "Save As".
4. In same line as "File Name", name your file any name you want and attach .js at the end
Example: myjsfile.js
Note: If you have css file, attached .css at the end of your choice name:
Example: mycssfile.css
5. In the place where you have "Save as type": Click on the dropdown and select "All Files"
6. Click on "Encoding" dropdown and select: "UTF-8"
Click Save. (see image below)
Step 2: Upload Your CSS/Js Files To Google Drive.
1. Open Google drive to begin uploading your files.
2. Click on "My Drive" dropdown to create a new folder, Click "New Folder" from the dropdown.
3. Click on your new folder to open it.
4. Click on the button that says "New" > "Files Upload" (upload your js and css file)
5. Click on "Advanced Options" and set the file you uploaded to "Public", then copy the "share link" and paste it on your notepad.
Step 3: Prepare Your Share Link.
The share link you will get from Google drive will look may look this:
Example:
"https://drive.google.com/file/d/0B4dlkozNjd9reG5NYTVqd0xEYns/view?usp=sharing"
The part in blue is what you need, you are going to change the part in black colour and add it to the part in blue, then delete the part in red:
Change https://drive.google.come/file/d/ to https://googledrive.com/host/ then add your link
Example:
https://googledrive.com/host/0B4dlkozNjd9reG5NYTVqd0xEYns
The above example is how you will make the link you got from drive look like.
Step 4: How To Add Your Hosted File To Blogger Template
To add your javascript file or css file to blogger template, log on to your Blogger dashboard and click on "Template" > "Edit Template"
To Add CSS File To Blogger
Click anywhere inside your template html and use Cntrl F to find </head>.
Change your CSS code share link you got from Google drive to look like this:
<link rel="stylesheet" type="text/css"href="https://googledrive.com/host/0B4dlkozNjd9reG5NYTVqd0xEYns" />
Save Template
To Add Javascript File To Blogger
Click anywhere inside your template html and use Cntrl F to find </body>.Change your Javascript share link you got from Google drive to look like the one below:
<script src='https://googledrive.com/host/0B4dlkozNjd9reG5NYTVqd0xEujuk' type='text/javascript'></script>Add the code just above the </body>
Now view your blog to make sure everything is alright.
Tip: If you are using free template or template in which the designer has some css and javascript files he stored in his own drive, you can copy the address of the code storage and download it, then use the method above to host it on your own Google drive.
Example:
If you see something like this code below in your template:
<script src='https://googledrive.com/host/0B4dlkozNjd9reG5NYTVqd0xEujuk' type='text/javascript'></script>
All you have to do is copy the link (I highlighted in blue) paste it in your browser to download it, then use the method above to get your own link and change that blue part.
This can improve your blog loading speed.
Hope with this little tutorial, you are now understanding css and javascript code more.
Let me hear how it work out for you in comment section, you can ask questions if you need more explanation.
