How To Host CSS Or Other Files Externally In Blogger With Google Drive

On : 3/07/2014

In : Blogger Tricks, Google, Newbies Guides

Hi Friends!, We're Back Finishing Final Examination. I Hope You Will Not Get Bored. We've Discussed Many Tutorials, The Last One Was How To Use Blogger And Google+ Comments System Together In Blogger?, Now We Are Going To Discuss About Hosting You CSS (Cascading Style Sheet) Externally On Your Blog's Template. This You Do Actually To Hide Your Template Against Template Stolen. If You Don't Know What Is This Hosting Externally Your Style Sheet, Let Me Tell You It's Complete Benefits. Read The Article Carefully In Case, If You Make Any Mistake, The Whole Template Will Be Inclement.

What Is Hosting CSS Or Other Files Externally?

So This Question Might Comes In Your Mind That What It Is?. Well, This Is The Simple Method Of Hiding Your CSS (Cascading Style Sheet) Against Template Stealer. Which Means The If You Wan't Not To Display Your Whole CSS Code In Page Source Of Browser, You Can Do This Step. The CSS Of Your Blog's Are Stored Inside <b:skin><![CDATA[</b:skin>, This Is The Tags Inside Which The Styling Of Page Is Stored, Remember That The <style> Tag Is Only Included In <head> Or <body> Or Post HTML But In Template They Use This. So This Is The Great Feature For All Of The Bloggers. In This Course, We Are Going To Use Google Drive Because It Is The Best One Because Blogger Is Also Connected With Google Drive Because They Both Are Owned By Google. Below I've Listed The Benefits And Disbenefits Of Hosting CSS File With Google Drive.

Features Of Hosting CSS File Externally With Google Drive

Boost Loading Time : When You Insert Your All Of Your CSS Code Inside One File, Then Your Website Loading Time Will Increase Because The Lines Of Codes Will Decrease. It Is Also Essential To Host Files On That Servers Which Are Fast And Reliable Which Is Google Drive.
Beginner's Can't Copy Your Template : So This Is The Great Feature Of It That The One Blogger Who Is Beginner And Know Bit About Web Designing, Then He Can't Copy Your Template Because He Don't Know How To Copy Then He Thinks That He Had Hide His CSS. But The Professionals Or Experts Can Do It Easily.
Create And Edit : Google Drive Allows You The Flexibility To Create And Edit Your Documents On Google Docs Online. You Can Also View Your File On Google Docs And Share It.
So Much Space : Google Drive Have Enough Space Of 5 GB To Their Free Users So You Can Store Millions Of Your Document (Not WinRaR Or ZIP) In It. If Your Free Space Is Full, Then You Can You Can Upgrade Your Account By Payment To Them. But I Think That 5 GB Is Enough For You To Store Only Documents.
Reliable And Upgradeable : With 100% Trusted And Uptime, This Allows You Store Files Of Any Type, Any Host You Like, But Don't Forget To Take Care Of Your Disk Space, Or You Can Upgrade Your Account.
Your Files - Your Control : Google Drive Tracks All Of Your Changes You Have Done To Your Drive Including Documents Whenever You Upload, So Whenever You Will Upload File, A New Revision Will Also Get Save. You Can Peek Back And Arrange Your Revision As You Want.
Best Security : Google Drive Allow You To Highly Protect Your Documents Against Stealers. As You Know That This Is Google's Product, It's Rules Are Highly Strict Rules To Security. It Has Utilized HTTPS Encryption Program To Keep Your Documents And Files Almost Safe And Secure.
Unlimited Bandwidth : This Is Another Great Feature Of It ThatGoogle Drive Allows You Unlimited Bandwidth So That Your Files May Not Down Or Delete While You Are Slept.
Make Your Files Visible : Google Drive Also Allow You To Make Your Files Public Or Private. Which Means That If You Select Private, Then It Will Only Visible To You And No One Can See Your Files But If You Select Public, Then Everyone Can See. You Can Upload Your Files And Make It Private Because If Your Hard Disk Get Damaged, You Can Download It Again Later After Repairing.
All Free : So You Might Be Thinking That These All The Features Must Be Premium But Not, This Is Completely Free Or You Can Say 100% Free. Even I Have Left Lot Of More Features.

Disadvantages

Layout Page Messed : This Is The Baddest Disadvantage Of It Because After You Have Hosted The File Externally In Blogger, You Will Of Course Mess Your Layout Page Which Means That Your Layout Page Will Interrupt Or You Can Say That The Widgets Will Not Display Properly.
You Can't Customize : This Is Also A Great Damaged That You Can't Customize Your Template After Hosting. This Is Because You Can't Make Changes In The File When You Have Uploaded. But You Can Do One Thing, You Can Customize It And Upload It Again And Then Host It Again On Your Blog.

Hosting Your CSS Files In Blogger With Google Drive

After You Have Learned The Features And Disadvantages, You May Be Thinking Of Hosting Your CSS Also In Your Blog, So You Can. This Tutorial Is For That Only. We Will Provide You Tutorial With Screenshots If You Get Confused. This Tutorials Contain Three Portions. So Read Carefully.

Warning!

Before Starting The Tutorial And Process, Must Backup Your Template In Case Of Getting Your CSS Lost. If You Delete Your Whole Code From The Template And If Your Hosting Doesn't Works, Then You Will Weep All The Time, So It's Better To Backup Your Template In Each Tutorial. So Let's Start With Few Simple Steps:-

Step#1 : Making Your CSS File

So This Is The First Step And Part Of You Tutorial, You Must Copy Your Whole Code Between <b:skin> Tag In Order To Host File With Google Drive. Remember Not To Copy The <b:skin> Tag, Only The Code Inside.

Go To Blogger.com >> Your Blog >> Template >> Edit HTML.
See <b:skin> Tag In Your Template, Then Expand It, Then Copy Your Whole Code Which Is In Blue Color.

After Expanding, Copy The Code Inside <b:skin></b:skin> Tag.

After You've Copied Your Code, Just Paste It In Notepad.
Then Save Your File As "style.css", Remember Not To Name Your Custom Otherwise It Will Not Work Or You Can Name It Without Spaces, But Insert ".css" At The End Otherwise It Will Not Work Of Course.

After Saving Your File, You've Done First Step, Let's Move To Next.

Uploading Your style.css To Google Drive

So, You've Made Your CSS File Of Your Blog Which Is The Complete Design Of Your Blog, Let's Simply Upload It On Google Drive And Make It Public. Let's Start:-

Go To Google Drive And Sign In With Your Google Or Gmail Account.
I Recommend You To Create A Seperate Folder Of Hosting Files So You Can Access It Easily.
In Order To Upload Your File, Click On "Upload" Button, Then Click On "Files".

Now A Window Will Appear Asking You To Upload File, Click On "style.css" And Then Hit "Open".

Now Wait A Few Moments, Then Your Upload Will Complete!.
After Uploading, See The File In Folder.
You Have To First Make It "Public".
Right On The File You Have Just Uploaded.
Then Click On "Share", Again Share.

Now A Window Will Appear With Sharing Code And Privacy.

First, Copy The Selected Code In The Notepad And Save It, Then Click On "Change" Button Inside "Who Can Access".

After Saving The Code In Notepad And Making It Public On The Web, Let's Move To Next And Last Step.

Connecting External File In Blogger

I Think That You Have Seen The Sharing Code.
It Is Like This "https://drive.google.com/file/d/the-file-code" Which You Have To Change Like This "https://googledrive.com/host/the-file-code".
Remember That Not To Change Any Other Code From The Sharing Link.

To Connect This In Blogger, Paste The Following Code Below <head> Or Above </head> Tag.

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

As You Have Seen In The Above Image That You Have To Replace your-file-code With Your Code Like Above.
So After Adding The File In Blogger, Remove The Whole CSS Code And Test It That It Works, If Not Then Restore Your Template And Do It Again Carefully.
One Thing Remember That Must Preview Your File You Have Uploaded (See That The Google Drive Link Is Working Or Not).
Click On "Save Template".
CONGRATULATIONS! You've Done!.

What If You Get Error While Saving Template?

If You Are Getting Error In Saving Your Template, It Means That You Have Completely Remove The Whole Code Which Is Not To Be, Blogger Doesn't Allow You To Leave <b:skin> Tag Completely Empty. So You Have To Keep This In Mind That Write Atleast On Comment Inside The Tag To Work. You Can Write Comments Like This:-

/* Your Comment */

Now, You've Know It All!.

Hosting Javascript Files In Blogger With Google Drive

So, This Is Also A Same Method Like Above One, Just Read Below:-

Create Your File And Save It As "anyname.js", Remember To Put ".js" At The End Of The Name Which Means Javascript.
Remember To Write The Code Without "<script type='text/javascript'>" Tag And Closing Of It.
Upload To Google Drive.
Make It Public On The Web Otherwise It Will Not Work.
Replace Your "drive.google.com/file/d/file-code" With "googledrive.com/host/file-code".
Now You Just Need To Add It In Blogger.
To Add It, Just Copy The Link (googledrive.com Link).
Add The Hosted Link Like This:-

<script src='your-file-link'></script>

Example:-

<script src='https://googledrive.com/host/0B3Ztl1RRz6W7Rmd0Wk9SbXppSFU'></script>

Save Your Template.
You've Done It!.

If You Didn't Understand At All!, See The Video Tutorial Below:-

Watch In Full HD:-

How To Host CSS File Externally In Blogger With Google Drive

Final Words!

So Friends This Was How You Can Hide Your Whole CSS (Cascading Style Sheet) Against Copier Or Stealer, Now Your CSS Will Not Display In Page-Source Of Your Browser Because Beginner's Will Not Understand Where The Code Is. I Hope That You Will Like Google Drive As It Brings Lot Of Features. Hope This Tutorial Will Help You A Lot. I've Explained Each And Everything With Screen Shots, But If You Didn't Understand At All, Ask In Comments, I Will Help You Right Time. I Have Also Provided You A Video Tutorial So You Can Understand It Easily!. If You Know More Tricks And Tips, Share Your Thoughts With Us!. Please Share This Post With Your Friends And On Social Networks. Get In Touch With Us For Hot Updates, Subscribe Us Now For Updates Straight In Your Inbox, No Spam. Take A Lot Of Care And Happy Blogging!.

728x90 Ad Space

Friday 7 March 2014