Saturday, 14 March 2015

Martins Oputa

How To Host Your CSS And Javascript Files In GoogleDrive

As a blogger, sometimes you may need to make some changes to your template, either to add some features or to improve some features of your template and your blog. You need to add Css (Cascading style sheet) and JS (Javascript) file to your blog, a third party free online data hosting service like Google drive is your best choice.

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.

how+to+host+css+and+javascripts+file+online



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)


googledrive+unlimited+online+storage


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.


how to store files online googledrive


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" />
add hosted file to blogger template

Add the code above just just </head> tag in your template.
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>



online free hosting

Save Template
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.

Martins Oputa

About Martins Oputa -

Martins is a passionate blogger who enjoys writing articles on techs, blogging tips and reviews. He is a "Gold Star" contributor to many top blogs and also a freelance writer.

Subscribe to this Blog via Email :