Monday, July 22, 2013

Host CSS, HTML or JavaScript Files in Blogger Using Google Drive

Number of websites available which you can use to upload your CSS, HTML or JavaScript files. Bloggers and webmasters prefers to add their entire StyleSheet coding in single file. But, blogger has not this kind of feature to upload CSS and JavaScript files. Recently one of our readers asked us how he can host files on blogger? Good news, Google Drive has ability to host your CSS, JavaScript and HTML Files for FREE. In this short tutorial, we will show you How to Host CSS Files with Google Drive in Blogger?

How to Host CSS Files with Google Drive in Blogger.

Step#1: Copy CSS Code From Blogger Template

Go to Blogger Dashboard » Template » Edit HTML and search for the <b:skin><![CDATA[ tag. Now, you will see a full CSS coding, copy this coding till the ]]></b:skin> tag. See screenshot below:

Step#2: Make a style.css File

Remove the entire CSS code from your blogger template after copying it and paste the coding in a new notepad. Now save the document and name the file to style.css (the extension of the file should be in .css).

Step#3: Host Your CSS File On Google Drive:

Go to Google Drive and login into your Gmail Account. Create a new folder. Click on “Create” button and from the drop down list select “Folder”. Now name the folder to anything that you like such as HostingFiles, my files and etc. In the end, press "Create" to conclude.

Click on the new folder. Now, choose the upload icon present on the left side of create button. Select “File”.

In this step select the style.css file that you created few moments ago. Press the open button.

When you will click on open button then you will see a small upload wizard on the right side of your screen. It will take some time.

Press the “Share” button. Make this file public. Press change, and select “public on the web”. Now, click on Save button.

Step#4: Getting a Proper Hosting Link

Right click on the uploaded file and select “Share”. Copy the whole URL present in the text area under “Link to share”. See screenshots:

Now, we will modify hosting link. In link to share section it would somewhat looks like this https://docs.google.com/file/d/your-upload-file-code/.

Replace that link to this format https://googledrive.com/host/your-upload-file-code.

Note: Make sure “your-upload-file-code” remains the same before and after the changes are made. For Example, if the link of my file is https://docs.google.com/file/d/0B66hLK2d2x4VVl9SaXNvb2dPRVU/ so I will change it to https://googledrive.com/host/0B66hLK2d2x4VVl9SaXNvb2dPRVU.

Step#5: Adding Google Drive Hosted CSS file in Blogger

Again, go to Blogger » Template » Edit HTML. Now search for the starting <head> tag and just above it paste the following code.