1 September 2016

Google Drive Hosting: How to Host Blogger CSS & JavaScripts Files On Google Web Hosting

If you're ever worked as a web designer and web developer, then you must know about the importance of store your files and folders.

Every time when any one visit your site, the server or the host will access that location where your files and folders exists and display the results on the screen.

image : How to Host Blogger CSS & JavaScript Files in Google Drive Hosting
How to Host Blogger CSS & JavaScript Files in Google Drive Hosting

This is very important things because you upload your all files to that particular locations where server reaches easily and use at the time of need.

Whenever you uploading your files and folders to any web host or any other third party sites, this will have an impact on some important things like your website loading speed, your SEO ranking in search engine, your all other abilities to make all the important adjustments to your site.

Here in this article, I'll show you how to host your CSS and JavaScript files on Google Drive to blogger or any other CMS system. Not only host files but also you host your website on Google web hosting services.

Many bloggers use a custom template to their blogger blogs. They always use some external blogging widgets that needs some external CSS files and JavaScript files for their working.

But unfortunately, blogger doesn't provide the option to upload your separate CSS or JavaScript files to their server, they only provide to upload images and videos and texts.

Previously, almost every developers and bloggers would use the Google code which is look like their URL (http://code.google.com/host/files) etc to host their files because it's look like so simple and easy to use.

But Google announced many other features and deprecating all the other options like download for hosted projects, so I'll recommended you to use Google Drive is the best.

We have many other options to host our CSS and JavaScript related files like Dropbox, Google Apps, Google Codes, but Google Drive is the best options from them and I personally recommended you to use it.

Google Drive gives you free account which is used everyone with their Gmail ID, and Sign in to their account, they provide 15 GB free space for every users to use.

Why Should We Use Google Drive For Host Files?

Before going further more, the first question arise in your mind, of why should we host files and folders on Google Drive? and what are their benefits. So below I'll mention some important and useful benefits of Google Drive.

#1 - Freedom

Google Drive provide you the free space and freedom to use according to your taste and interest. You've a full freedom here to upload your files which you want and download them anytime.

#2 - Free Space

When Google launched this service with the name of "Google Drive" they only provide 5 GB free space to their users. But after that they allow 15 GB free space that helps us more to use them for our development projects and hosts our files on here.

#3 - Versatility

Google Drive provides you the free space not only to upload some specific kind of files, but also gives you the opportunity to upload any files which you want, whether it is text files, video files, audio files, CSS files, JavaScript files, software's, games etc.

#4 - Security

Security is the main and one of the important options for any kind of businesses. If you've a tightened security then there is no fear. So Google also provides you the full security to your files, they also use protocols and HTTPs connections that make it more secure.So without any hesitation you can use this service.

#5 - Reliability

As everyone know about the Google, and it's all services own by Google itself. So it is the most reliable and protective service which you use without any fear. It provides 100% up-time supports and access to your hosted files from anywhere in the world.

#6 - Public and Private Options

AS Google web hosting service provide us the options to whether we links our files publicly or privately. You are able to share your files and folders with anyone from all around the world through some unique links. Anyone can comments, share and view your all documents, files, folders if you make them public. But if you want, no one can see out your files then always make it private.

#7 - Free Service

This is the best option ever in time, because everyone wants to get something best but totally free. So Google Drive is totally free and gives you 15 GB free space to hosts your files and folders, and this is the service of Google, so it is fully trustworthy service.

Advantages of Google Drive Web Hosting to Hosts CSS & JavaScript Files

Because Blogger itself doesn't provide this facility to hosting your external CSS, HTML or JavaScript related files. They only provide to hosts within the blogger template HTML coding, where you can add, remove or change your code of files.

Storing blogger CSS , HTML or JavaScript files with Google web hosting will helps us a lot to eliminate the problems if any one exists and reduce out the clutter among your services. 

If you hosts your CSS , JavaScript files on other external web hosting service like Google Drive, then it helpful to you. It can increase your site speed, increasing your page loading time, getting different SEO benefits and campaigns and much more. 

If you use Blogger as a blogging platforms and your blog hosted on blogger, then you'll know that for CSS style sheet, the <style> tag will be used as a start and end with </style> tags. All the CSS coding placed between these two tags in blogger templates. 

For HTML files, we use <html> tag at the start and </html> at the end tags. All he coding of HTML will be placed in between these two tags. 

Similarly, for JavaScript coding, we use <script> tag to define the script that we use. This script tag either contains some scripting codes or it points to an external files through the src attribute

So if you combines all these separated files in a single 1 file then it helps you a lot. It increase your website speed and improve your page loading time. It also helps search engines robots to crawling and indexing your site easily and smoothly.

Host CSS, JavaScript, HTML Files in Google Drive Hosting

Blogger Work 

Step 1 - First of all go to "www.blogger.com" official website.

image : blogger png images
Step 2 - Sign in to your blogger dashboard and select your blog.

Step 3 - Go to your blog "Template" section and click on "Edit HTML" button.

image : go to template and click on edit html in blogger blogs

Before doing any task, first of all back up of your template and save into your PC hard drive.

Step 4 - Now click on anywhere inside code, and press CTRL + F to find below tag. 


Step 5 - Copy the whole CSS code which is written in between two tags <b:skin>......</b:skin> . Check the screenshot below.

image : copy the CSS codes from blogger templates

After copy the whole CSS code, simply go to your PC desktop and make a new text file and paste all the css code inside it and save this file with the name of style.css or anyname.css . (.css) is the extension of CSS files. Check the Screenshot below.

image : How to Host Blogger CSS & JavaScript Files in Google Drive Hosting

Log In to Your Google Drive Account

Step 6 - Now go to "Google Drive" site and log in to your account using your Gmail ID.

image : How to Host Blogger CSS & JavaScript Files in Google Drive Hosting

Step 7 - Now click on the "New" button at the left sidebar top upper corner and a drop down menu list open, here click on "Folder" option.

image : How to Host Blogger CSS & JavaScript Files in Google Drive Hosting

Step 8 - After clicking on "Folder" option, a pop up box appear, here enter your folder name and click on save button.

image : How to Host Blogger CSS & JavaScript Files in Google Drive Hosting

Step 9 - So you've successfully create new folder. Now we upload our files on this folder. Simply drag drop files here or simply use "NEW" button in the left sidebar and from them click on the "File Upload" link.

image : How to Host Blogger CSS & JavaScript Files in Google Drive Hosting

Step 10 - A pop up box appear, select your style.css file which we saved on our PC, and click on "Open" button.

image : How to Host Blogger CSS & JavaScript Files in Google Drive Hosting

Get Share Links in Google Drive Files

Step 11 - Now select your file and right click on it and select "Share" option or you can also go to your upper options bar and click on "Share" link as show below.

image : How to Host Blogger CSS & JavaScript Files in Google Drive Hosting

Change Shareable Link 

Step 12 - After clicking on share option, click on "Advanced" link and below type of pop up box appear. Here click on "Change" option to change it's setting.

image : How to Host Blogger CSS & JavaScript Files in Google Drive Hosting

Private to Public Share Link in Google Drive

Step 13 - Simply select the "On - Public on the web" option and hit on "Save" button.

image : How to Host Blogger CSS & JavaScript Files in Google Drive Hosting

Get the Link Address to Copy it

Step 14 - So after making it public, now simply copy the link address and change it with given below example.

Original Link :


Change With : 


As you copy the original link from your account. Simply change your link with this style that we use later. The blue color ID is the unique address for your file share link.Simply make your original link with this type and you're done your work.

Use External Links to Blogger Blogs 

Now here we use these external file links to our blogger blogs. For this purpose, follow below complete guide.

Step 1 - Go to your blogger blog and click on "Template" link and click on "Edit HTML" button.

image : How to Host Blogger CSS & JavaScript Files in Google Drive Hosting

Step 2 - Now copy the whole CSS code and delete it and simply replace with the below tags. In between this tag we use our external file which we uploaded on Google Drive hosting.

For using the above link to your blogger template, follow the below syntax.

<link href='Your-CSS-File-Link-Here' rel='stylesheet'/>

For Example : 
<link href='https://googledrive.com/host/0Byhbsy7JPmcPUURVN19fYUprYUk' rel='stylesheet'/>

Simply copy this tag and paste it just below the <head> tag in your blog template. 

You're done your work, simply save your template and go to your blog and refresh it and check whether it is working well or not. If YES then congratulations, and if not work, then don't worry, repeat the all steps carefully again, and check where you mistake.

But if you done all the work right but it doesn't work, then ask me in the comments section instantly. 

How to Host JavaScript Files in Google Drive

Now CSS file is done, we go to the next step to upload JavaScript files. Basically in our blogger template, JavaScript code will be used as <script src='Your-JavaScript-File-Link' type='text/javascript'></script> . 

Simply copy your JS code and paste it in new text file and save your file with any name and make it's extensions .JS . (.js) is the extension of JavaScript files and use the above methods to upload on Google Drive and getting it's public link. 

After that, use below syntax to make your JS Script file.

<script src='Your-JS-File-Link' type='text/javascript'></script>

For Example : 

<script src='https://googledrive.com/host/0Byhbsy7JPmcPUURVN19fYUprYUk' type='text/javascript'></script>

Now simply copy this tag and paste it just after the <head> tag and save your template and check your blog whether it will working or not. 

So in this way you can easily host your blogger CSS and JavaScript files in Google Drive web hosting service. It will increase your website speed, loading time improve, SEO beneficial, search engine friendly and also provides many benefits. 

If you need some more help, or you see some thing missing in this guide, then feel free to suggest me. I'll make this guide more and more useful for you and others. 

If you like this then please share with others too. Thanks ! ! ! 

Previous Post
Next Post

I'm Aamir Saleem, a professional blogger and SEO Consultant. I loves to write on blogging, SEO, Internet Marketing, Business, Social Media and Make Money Online. Connect Me Via !!!