How to Host CSS or JavaScript Files in Blogger using Google Drive

Advertisements
Hosting CSS and JavaScript files on your Blogger blog has always been a matter of concern for a webmaster. People prefers to add their entire StyleSheet coding in one file, so they can upload it to their hosting and can easily apply it on their website.  Unfortunately, blogger has quite a few limitations that stop you from hosting CSS and JavaScript files. Recently our user sent us an email asking: is there any way to host files on blogger? What are the advantages of hosting CSS (StyleSheet) files?  Luckily, Google Drive provides you the opportunity to host CSS, JavaScript and HTML Files for FREE. In this article, we will show you How to Host CSS Files with Google Drive in Blogger?

Why to Host files on Google Drive?

  • Lots of Space: Google Drive provides you 5 GB storage to regular accounts so you can easily upload lots of documents. However, if your disk space is full, then you can upgrade your account from basic to premium. 
  • Create & collaborate: Google Drive provides you the flexibility to create and host different kinds of spreadsheets and presentations. Make some edits in the documents and see real-time changes as they appear. 
  • Reliable & Dependable: With 100% uptime, it provides you the freedom to host anything that you like. It has unlimited bandwidth, but you have to take care of your disk space it should not exceed 5GB mark or you can upgrade your account.
  • Go back and revise: Google drive tracks almost all the change that you make to your document - so whenever you will save a document, a new revision also gets save. You can take a glance back and can make revision accordingly. 
  • Share or make files Private: You can share your files and folders with anyone. Select whether others can comment, share, view or edit your stuff. You can handle everything instantly from your dashboard. 
  • Security at its best: Google Drive has always proven to be the most reliable free hosting service with unlimited bandwidth. Moreover, to provide full proof security Google drive has utilized HTTPS encryption to keep your documents secure.
  • All This For Free: All these impressive features for free.

What are the Advantages of Hosting CSS/JavaScript in one File?

Blogger doesn’t provide its users the flexibility to host CSS or JavaScript files in one separate link. They are hosted within the website’s coding through HTML Tags. 

For StyleSheet, <style> tag is use to define the style information for an HTML document.  Between two <style></style> tags, CSS coding is placed which specify how HTML elements should render in the web browser. Each HTML document can contain multiple <style> tags. 

For JavaScript <script> tag is use to define the script, such as JavaScript. The <script> tag either contains the scripting statements or it points to an external file through src attribute. Each HTML document can contain multiple <script> tags. 

Combining all StyleSheet/JavaScript coding in 1 file helps a website to load faster. Furthermore, it helps search engine to crawl your site smoothly. 

How to Host CSS Files with Google Drive in Blogger:

There are several third-party apps that could help you to host files in blogger including Google Apps, Google Code, and Google App bot. At MyBloggerLab, we use App bot, but the process of hosting files on Appbot is a lot complex. Google Drive is perfect and works better than Appbot because there is no need to worry about the bandwidth. 

Step#1: Copying CSS Coding From You Template:
To host your CSS file with Google Drive in Blogger, first thing you need to do is to copy your all StyleSheet coding from your template to an empty notepad. Go to Blogger » Your site » Template » Edit HTML » Proceed and search for the <b:skin><![CDATA[ tag. On finding this tag, you will see a large chunk of CSS coding, so copy all the CSS coding till the ]]></b:skin> tag.  For more details see the following screenshot.
Step#2: Preparing a style.css file
After copying the CSS coding, remove it from your template and paste the coding in an empty new notepad. Now save the document and name the file to style.css (the extension of the file should be in .css so the browser can render it as StyleSheet). For more details see the following screenshot.
Step#3: Hosting your style.css file on Google Drive:
The next thing is to upload style.css file to your Google Drive account. First go to Google Drive and login into your Gmail Account. Now you have to create a new folder, so you can upload all the web hosting files at one place. Press the “Create” button and from the drop down list select “Folder”. Now name the folder to anything that you like such as webhost, web files and etc. In the end, press "Create" to conclude.  
Now open the folders that you have created a few moments ago (right click on the folder name and select open). On selecting the upload icon present on the left side of your screen, a drop down list will appear which would provide you two choices i.e. File and Folder. Just select “File” and move to the next step.
Now it will request you to select the style.css documents that you created few moments a go. After selecting the file, press the open button and move to the next step.
On pressing the open button a small upload wizard would appear on the right side of your screen. It usually takes a minute or two to upload, but it entirely depends upon the size of your file and the speed of your internet connection.
Once uploading is done, press the “Share” button. Now you have to make this file available for public. Press change, and select “public on the web” so anyone on the Internet can find and access. Finally, press the Save button to conclude the wizard. For detailed instructions, check out the following screenshot.
Step#4: Getting a Proper Hosting Link
The second last step is to prepare a proper hosting link of your style.css file. Right click on the file that you uploaded few moments a go and select “Share”. Copy the whole URL present in the text area under “Link to share”. For more details see the following screenshot. 
After Copying the sharing Link from google drive, it would somewhat looks like this https://docs.google.com/file/d/your-file-code/. You have to change the copied link to https://googledrive.com/host/your-file-code. Remember: Make sure “your-file-code” remains the same before and after the changes are made. 
let us do a small demonstration which would help you in explaining better. For Example, if the link of my file is https://docs.google.com/file/d/0B0WJjcJEFNzibXRyZWlwNktKcFk/ so I will change it to https://googledrive.com/host/0B0WJjcJEFNzibXRyZWlwNktKcFk. The only thing which remains the same is the file code.

Step#5: Adding Google Drive Hosted CSS file in Blogger 
After preparing a proper hosting link of your file, once again go to Blogger » Your site » Template » Edit HTML » Proceed. Now search for the starting <head> tag and just above it paste the following code. Remember: Do not forget to replace https://googledrive.com/host/your-file-code with your Google drive hosting link, and make sure you have removed the CSS coding from the template as we have mentioned in the step#1. Once everything is done, press the “Save Template” button. 

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

If you are still confused about the process then check out this in-depth video tutorial

We hope that answered all the related questions like why to host files on blogger, what are the advantages of hosting CSS (StyleSheet) files, and more. If we have left something uncovered, or noticed that we missed something then please leave a comment below.
Advertisements

The Editorial Team of MyBloggerLab consists of a group of Professional Blogger geeks Led by Syed Faizan Ali (Founder of MyBloggerLab).

Comment With:
OR
Choose Wisely!

65 comments

April 1, 2013 at 10:44 AM

WOWW. Thanks. I always looking for this tut.

April 1, 2013 at 10:53 AM

thank you very much fot this tutorial...is perfect...but if i wanna host .js files what is the code that i have to write to blogger template?

Editorial Team MOD
April 1, 2013 at 11:20 AM

For JavaScript you can use this code.

<script src='javascript.js' type='text/javascript'></script>

April 1, 2013 at 7:04 PM

Thankyou Syed :)

April 1, 2013 at 7:18 PM

Hello thank you very much for the tutorial. I would like to ask how to host java script files on Google. Could you please write a post on it?

April 1, 2013 at 7:52 PM

Thanks for the guide! However, you forgot to mention that you can paste the folder ID on GDrives in order to shorten the URL for free.

April 1, 2013 at 11:54 PM

I°m sorry again...but at google drive the link of js file in adress bar is as is the link of css file.i have to do the same with the link and as extension to add a .js or not?

Editorial Team MOD
April 2, 2013 at 2:19 AM

Don't worry about the Link, it would be similar to the CSS one. But make sure, when you upload the JavaScript file to Google Drive, it should be in .js extension.

Editorial Team MOD
April 2, 2013 at 2:21 AM

You can follow the same steps, But instead of uploading style.css, upload yourscript.js or something like that. After getting the Link, use the same method to host it on Google Drive and then add it on your template through this code.

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

Editorial Team MOD
April 2, 2013 at 2:22 AM

Yes, this is a great tip but this service is not part of Google, so you never know when they would stop serving for free.

April 2, 2013 at 2:24 AM

Very Informative article!

April 2, 2013 at 2:33 AM

Can we combine multiple javascript files?

Editorial Team MOD
April 2, 2013 at 2:39 AM

Yes you can combine, but make sure they don't conflict with each other because it would end up in not working.

April 2, 2013 at 7:54 PM

Nice article. Would you like to share with us how to host .css and .js files on https://code.google.com/.

Editorial Team MOD
April 3, 2013 at 2:23 AM

Sure but on Google Code you can only host JavaScript.

April 3, 2013 at 6:46 AM

Thank You Syed ! But I Think You Forgot to Tell that What are The Benefits Of Hosting CSS and Javascripts ? I mean What Are The Benefits of
Doing This ? Improving Speed ?

Editorial Team MOD
April 3, 2013 at 8:38 AM

There are many, Example

1. Speed
2. You can Edit Them without editing your Template.

and many more.

April 26, 2013 at 6:57 AM

Nice tutorial. I'm trying to host my files on Google drive now so let's see what will happen!

May 20, 2013 at 12:20 AM

short n sweet .10/10

May 31, 2013 at 7:48 PM

VERY NICE. IT'S WORK. THANK'S

June 3, 2013 at 4:55 AM

Hello I have hosted my file and follow your instructions on Google Drive https://docs.google.com/host/0B1VsaS4NUyvhay14RVdaMUZtZE0/
but somehow it is not working...
The script is Publitweet which is now opensource https://github.com/storify/publitweet/tree/c17c28bac59005546d6a0238a611d3c73bc9b30f

June 4, 2013 at 1:13 PM

Thank you! Great post.

June 5, 2013 at 5:54 AM

Thank you Syed, i have try this method and its work in my template.

June 6, 2013 at 10:48 AM

Thanks alot, can you tell me how to host java script files on google code .?
Because Google removed the Download tab on Google Code, So now is there anyway to host the javascript on google code ?
and yeah Thanks alot for this tutorial ..

Editorial Team MOD
June 6, 2013 at 1:12 PM

Yes you can. Here is the tutorial for hosting JavaScript on Google Code

http://www.mybloggerlab.com/2013/04/how-to-host-files-on-google-code-in-blogger.html

June 19, 2013 at 11:08 AM

Hi mybloggerlab team,

i tried code and it looked perfect on chrome. but Mozilla wasn't able to render css files. i added
"type='text/css'/>"

this solved my problem. wondering why nobody has experienced such problem.

June 24, 2013 at 6:37 AM

Is hosting files remaining in Google Drive forever ? Do they remove the codes in any day? Thanks!

Editorial Team MOD
June 24, 2013 at 9:17 AM

No, they won't remove until you violate any rules

SIN
June 30, 2013 at 2:20 PM

thanks for this!!!
i already applied this...by the way just want to ask
can i also host chitika ads script? cause its to slow to
load and it has error script sometimes..
when i saw this tutorial i thought of hosting the script.but it doesn't work..what do you think of that?
here my site
http://sellerfriend.blogspot.com/

July 12, 2013 at 2:59 AM

Hello
I can not get a result.
I created a blank blog, on a template Simple:
http://pixs.ru/showimage/Clipboard0_5439958_8440416.jpg
After completing the steps:
http://pixs.ru/showimage/Clipboard0_6146237_8440438.jpg
CSS does not work. Tell me what I did right.
http://anythingsliderdx.blogspot.ru/
Thank you.

July 16, 2013 at 12:37 AM

Tried posting JavaScript on Google Sites, it do redirects.
Tried posting JavaScript on Google Code, it's fine, but file hosting service will end early next year.

Tried posting JavaScript on Gdrive, the cache is only 20 seconds (tested using Google Page Speed). Is there anyway to increase cache?

Tom
July 21, 2013 at 3:25 AM

Hi, great article.....

Was wondering if I could use this method to host an html file and display the content of that file in my blogger using the HTML/Javascript gadget. I have several different blogs that I would like to place identical HTML code in.

Thanks.

July 31, 2013 at 6:59 PM

Works great, now how do I edit my css without having to reupload the file each time? It opens on doc, but it's read only, despite the fact that the file is shared.

August 13, 2013 at 3:45 AM

Hi

Nice post . But this technique is not working for me. I have a doubt.
my css code is like this
body {
font: $(body.font);
color: $(body.text.color);
background: $(body.background);
padding: 0 $(content.shadow.spread) $(content.shadow.spread) $(content.shadow.spread);
$(body.background.override)
}

html body $(page.width.selector) {
min-width: 0;
max-width: 100%;
width: $(page.width);
}

i think problem is with the $ symbol .
Please help

Regards,
Ranadheer

August 19, 2013 at 12:51 PM

Is it really possible to edit in drive?
I can only view the document.

Editorial Team MOD
August 20, 2013 at 5:44 AM

This feature is currently Missing!

August 26, 2013 at 9:23 PM

Thank you so much ! This is what i have been looked for a long time ^_^

August 29, 2013 at 7:43 AM

Just a note to say thank you. I've been trying to work my css with Google Drive for months now. Didn't realize I had to change the url. Now it works! *happydance!*

September 13, 2013 at 5:38 AM

Can't we host CSS and JavaScript codes in Skydrive ?

Editorial Team MOD
September 15, 2013 at 3:36 PM

Yes, you can.

September 30, 2013 at 7:13 AM

Oh my god thank you so much! I was looking the whole day for a way to do this, and finally it worked :)

October 15, 2013 at 12:38 PM

greetings perfect explanation

October 25, 2013 at 6:15 AM

Hey you are really done a very Hard Work. Hats up to you
Blog of Blogger.com

October 26, 2013 at 4:49 AM

sir i have done every thing according to above but my java script code is not working this is my java script source code ("https://drive.google.com/file/d/0B6uC-YCtVqHeY0wzYUhFOHdlMm8/edit?usp=sharing")
and this is my blog code("http://sadpeotry.blogspot.com/")

Editorial Team MOD
October 27, 2013 at 4:26 PM

https://googledrive.com/host/0B6uC-YCtVqHeY0wzYUhFOHdlMm8

This is the working one

October 31, 2013 at 2:00 AM

Oh my God you just ended my days of torment!!! You don't know how much this article would help me! Keep writing!!!

November 2, 2013 at 12:47 AM

thank a lot for this information

December 14, 2013 at 11:46 AM

Many thanks :)

February 12, 2014 at 5:59 AM

PLEASE HELP ME AT http://blogmajaribio.blogspot.com DOESNT work. HELP ME HELP ME friend

Editorial Team MOD
February 12, 2014 at 12:36 PM

You are not adding the < link > CSS Files correctly. Review your code again.

February 28, 2014 at 1:38 PM

thanks a lot, I had to upload a script but with https, this helped solved my issue.

April 28, 2014 at 11:54 PM

It works like a charm as of today 4-29-2014 in my site @ bubblegag.com. So anyone who said that its not working then please read and understand the tutorial thoroughly and also take your time so that you won't miss a single step.

Regards,
Derek
http://www.bubblegag.com/
http://www.bubblegag.com/

July 8, 2014 at 12:49 AM

thanks for this post, the same will work as a website host too, if a folder is shared and contain an index.html file

August 2, 2014 at 2:03 PM

hi, this is good but trying to add php codes give me problems. where do i add the codes is it in the edit template or some where else

August 11, 2014 at 8:40 AM

Hi

May I recommend our script YetiShare.com as an alternative for hosting files.
Apologies if you regard this comment as spam, Please delete it if you do.

Kind regards,
YetiShare

October 13, 2014 at 2:23 AM

can we use google code now to host javascripts ? because google has ended the service of google Code ?

i want to host javascripts for http://hamariapps.blogspot.com

Editorial Team MOD
October 13, 2014 at 6:37 AM

Yes you can,

October 13, 2014 at 2:30 PM

but how ? can you tell me ? because Google Code has end his service so how can i use it ?

Editorial Team MOD
October 14, 2014 at 4:39 AM

Use Google Drive. Apply above tutorial.

April 11, 2015 at 10:28 AM

Does it work now? Looks like I have made everything as explained here but it failed. GDrive doesn't have "Public on the Web" option anymore. I just opted an "anyone with the link can edit option". And I changed the default path to "https://googledrive.com/host/". Doesn't work :(

April 22, 2015 at 1:01 AM

Nice Work
.................

December 17, 2015 at 9:24 PM

Hello,

i m a beginner. how to host .php files in Google Drive?

April 22, 2016 at 10:38 PM

hello, can i add many java files to a folder on drive and link the folder adress to to my blog???

Editorial Team MOD
April 27, 2016 at 7:03 AM

Yes you can host any files on Google Drive and then link it to Blogger.

June 2, 2016 at 1:48 AM

its not https://docs.google.com/host/[code], changes it into https://googledrive.com/host/[code]

Post a Comment

We’re eager to see your comment. However, Please Keep in mind that all comments are moderated manually by our human reviewers according to our comment policy, and all the links are nofollow. Using Keywords in the name field area is forbidden. Let’s enjoy a personal and evocative conversation.

Helping You to do Cool Things With Blogger Since 2012™.

© Copyright 2012 - 2016. MBL Networks, All Rights are Strictly Reserved.