How to Host your Blogger Files on Google Drive

How to Host your Blogger Files on Google Drive

How to Easily Add Flash, PHP, JavaScript and Other Files to Blogger

Hello all 🙂 After a long time of absence from blogging I’m back again! Today, I won’t be talking of custom code modification or ‘huge’ technology update, rather I’m going to try and solve one of the biggest reasons for inferiority complex felt by most bloggers on the Blogger platform.

Blogger is a free cms provided, managed and hosted by Google. In recent times, Blogger users have often found it difficult using certain files such as Flash (.swf), JavaScript, PHP etc. on the Blogger platform due to its limitation in user management.

In the previous years or at least since 2007, the Blogger platform has been overlooked by some so called ‘pro bloggers’, making those who chose to stick with the Blogger platform look less of pro bloggers. That is in no way the case, as Blogger has produced some fantastic bloggers recently. You might want to meet +Mohammad Mustafa Ahmedzai of Mybloggertricks.com, +Syed Faizan Ali of Mybloggerslab.com and +Amanda Kennedy of Bloggerbuster.com who has made a huge impact in the blogosphere. Less I forget to mention: These professionals run their trade on the Blogger platform and they do so professionally.
One of the major reasons some ‘pro bloggers’ left the Blogger platform was due to the inability for bloggers on the Blogger platform to have full control of their files. Basically everything has to be on the xml file (template file) and controlled by Google themselves. Fortunately, that isn’t the case for the modern Blogger platform: With the introduction of Google Drive, you can now host your CSS file, JavaScript, PHP files, SWF (Flash) and even your images externally using the Google drive.

Google Drive is a third party application provided by Google that allows developers, web masters and every Google user to upload or backup their files free of charge. This file can be shared with others through the distribution of the app link. However, here at EWT we have figured out a way to make the most out of Google Drive, Viz… Hosting your Blogger files.

Demo

As most of you know, EWT is currently hosted on the Blogger platform. But unlike so many blogs on the Blogger platform, the CSS file is hosted externally on Google Drive (Check below on how to host your CSS file on Google Drive). If that isn’t enough demo for you, here is a flash WYSIWYG Tool. It is hosted on Google Drive and can be used directly from here.

Well, this is one of the so many things you can do while hosting on blogger using the Google drive. It is also important to note that Google offers you 5GB disk space as a normal user. You can as well upgrade to a premium user if the need for unlimited disk space arises.

How to Host CSS Files with Google Drive in Blogger:

Hosting your CSS file on Google Drive might come quite handy when you need to hide your CSS from your blog source code.
In this section, I have provided a walk-through on how to host your CSS file with Google Drive in Blogger as an example for hosting other files. It is important you note all the steps and make reference to them while dealing with other file formats.

Step#1: Create a CSS File

To host your CSS style externally on Google Drive in Blogger, you need to create a CSS file. To do that simply follow the instructions below:
  • Open Notepad or your code editor (Hold Windows + R ==> type ‘notepad‘ into the box and hit enter to launch a new notepad interface).
  • Go to Blogger » Your site » Template » Edit HTML » Proceed and search for the <b:skin><![CDATA[ tag.
  • Below this tag, you will find numerous CSS codes, simply copy/cut the entire CSS (until the closing tag: ]]></b: skin>) to the new notepad interface you opened earlier.

  • Save your new notepad document as style.css (Note style could be changed to your preferred name).
If you just hit the save button, you can now close the notepad interface and proceed to the next step.

Step#2: Uploading your style.css file on Google Drive:

After creating your CSS file the next thing that comes in mind is hosting it. To host your CSS file on the Google Drive, kindly login with your Google Account and follow the instructions below. Firstly, you need to create a folder, so that you will be able to refer to your files in the future without stress.
  • Click on the Create button (on the left sidebar) and select Folder from the drop-down.
  • In the Pop-Up box, enter a name for your folder, e.g. webhost.
  • Now open the folder you created earlier and click on the Upload Icon just beside the Create button on the left side bar.
  • From the dropdown, select Files.
  • Browse through to the location where you saved your CSS stylesheet. Select the file and hit Open.
Opening this file should pop-up a wizard at the bottom-right of your screen. The time taken for this wizard to complete this process largely depends on the size of the file you are uploading and the speed of your broadband. Your CSS file is relatively small and should take less than 2 mins to upload.
When upload is completed, you should see a box like this
By default, your files are set to private. You need to make it public so that everyone can access it from any loacation. Click on the Share link.
  • On the ‘Who has Access‘ section, click on Change.
  • Choose Public on the Web.
  • Hit the Save button.
When this is done, your file is now public and ready to be used. Move on to the final step.

Step#3 Obtaining your File Link

In this section, I will show you how to obtain a proper URL for your file. Back to your folder, right click on the CSS file that you uploaded earlier.
  • Click on share.
  • Copy the entire URL in the pop-up box
  • Remove this section edit?usp=sharing as it is needless.

Step#4 Formating File URL

After removing the above section, your file URL would look like this https://docs.google.com/file/d/your-file-code/ you need to modify the structure of the above URL to https://googledrive.com/host/your-file-code. Simply replace your-file-code  with your file unique code. This code is generated automatically by Google, see the screenshot below (File Unique Code highlighted with a green box).
This means that my file url will be
https://googledrive.com/host/0B1AElyKV1YCfVVJFTUZmUlc5bHcInstead of
https://docs.google.com/file/d/0B1AElyKV1YCfVVJFTUZmUlc5bHc/Note: The File Unique Code must remain the same. Your file URL is now ready, let’s move on to the final step.

Step#5 Implementing Css to Blogger

I believe by now you must have removed the entire CSS codes from your Blogger Template. If you haven’t done so, refer to step#1 and remove the entire CSS codes from your Blogger template (this time you should delete, not copy). When that is done, navigate to Blogger » Your site » Template » Edit HTML » Proceed.

  • Search for the <head> tag.
  • Immediately below it, paste the following HTML code.

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

  • Replace https://googledrive.com/host/your-file-code with your file URL and save your template. 

Hosting Other File Formats on Google Drive in Blogger

To host the file formats other than CSS on the Google Drive in Blogger, refer to Step#2, 3 & 4 above. Use the code below to implement each file type on Blogger.
Images

<img src=’https://googledrive.com/host/your-file-code‘/>

 PHP Files

<object width=”400″ height=”300″ type=”text/html” data=”
https://googledrive.com/host/your-file-code“></object>

 JavaScript

< script src=’https://googledrive.com/host/your-file-code‘/>

SWF Flash

<object style=”width:640px;height:400px;” data=”https://googledrive.com/host/your-file-code” id=”tws_ef_13150″ type=”application/x-shockwave-flash” codebase=”http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,40,0″><param value=”https://googledrive.com/host/your-file-code” name=”movie”><param value=”always” name=”allowScriptAccess”><param value=”g=13150&n=happy_wheels&s=109&gfw=false&t=sya” name=”flashvars“></object>

Recommendations

 It is very important you bookmark this page for future reference, remember to share this walk-through with your pals on Facebook and Twitter, if you have any comment leave it in the comment section, otherwise, take your time and check out other articles related to blogger below:

The following two tabs change content below.

Ebenezer Obasi

Senior executive editor at EwtNet
A web developer, IT undergrad, terrible entrepreneur, internet freak and a man of a few other incongruous talents, Ebenezer has been writing on technology since 2012, and plans to do so until a few days before his ultimate fate: cryogenic preservation. If resurrected, he is likely to go back to writing on technology.

Recieve Free Email Updates!

Leave a Reply