How To Upload CSS And JavaScript File in Google Drive to Speed up the Blog loading Time

Most of the blog affected for loading time. If you use several JavaScript or CSS file to make your blog beautiful then your blog will be slower and if your avoid then your blog will be less attractive. There are almost 80% highly designed blog affected by this issue. I was personally victim of this kinds of problem but finally got a way to overcome from this issue. We can speed up our blog loading by simply combine all CSS (Cascading Style Sheet) and JavaScript file. So today I am going to share a tutorial
that how we can combine CSS and JavaScript file and host it into Google Drive. You can host your file to another hosting service like Dropbox, yourjavascript and many more but you should choose Google drive for several beneficial reasons.

The most benefits of using Google Drive

Hosting Service is absolutely free
15 GB Hosting Space
99.99% Uptime with unlimited bandwidth
You can make your file Private and Public
Google Drive provide you 100% secured place for hosting file.

So for combining CSS And JavaScript File in Google Drive to Speed up the Blog loading Time just follow the below steps

Step 1 Log in to your Blogger Account and Go to your Blogger Dashboard

Step 2 Click on Now click on -> Template -> Edit HTML-> Unfold code ►

Step 3 Now Find this code <b:skin><![CDATA[by Pressing Ctrl + F

Step 4 Now Copy the all CSS and JavaScript code between <b:skin><![CDATA[ …………. ]]></b:skin> and Save the templates.

For Example see the below code of my template

<b:skin><![CDATA[

/*———————————————–

Theblogger911 Template Style

Name: Theblogger911 Template

Date: June 20, 2013

Author: Garywal Lacapag

URL: https://blogs911.com/

———————————————– */

/* Variable definitions

====================

<Variable name=”bgcolor” description=”Page Background Color”

type=”color” default=”#fff” value=”#ffffff”>

<Variable name=”textcolor” description=”Text Color”

………………………………………………………………………….

]]></b:skin>

Step 5 Now Paste the all code in a Notepad and Saveit as Style.css (Here Style is File name and .css is file extension).

Step 6 Now Go to https://drive.google.com/‎ and sign in to enter into account and it will redirect to Google Drive Page.

Step 7 Now click on Create-> Folder-> from top left corner and give the folder name.

And see your new Folder Has created

Step 8 Now Click on New Folder to enter into folder and click on Upload Button -> Files

And select your Style.css file from your Computer Hard Drive for Upload which one you were created

on Step 5.

Step 9 And Click on Start Upload Button and It will finish uploading within 2 or 3 seconds

Step 10 Now Click On Share from right side of popup box and it will show like below image. And

Copy the shared code and paste it in a Notepad.

Step 11 You have to make your CSS file Public. So Click on Change and a Popup window will

appear and Select Public On the Web and hit the save button.

Step 12 In this step you have to make little change of the code. Your sharing code will be like below

https://docs.google.com/file/d/0B9kc_Su2qRHNcm5zQzZyMzBXWE0/edit?usp=sharing

and you have to change it to like below code

https://googledrive.com/host/0B9kc_Su2qRHNcm5zQzZyMzBXWE0

Step 13 In final step you have to make ready to use this code into your blogger template

<link href='https://googledrive.com/host/Converted Shared code' rel='stylesheet'/>

For Example—

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

How to add the code into your Blogger template

Step 1 Log in to your Blogger Account and Go to your Blogger Dashboard

Step 2 Click on Now click on -> Template -> Edit HTML->

Step 3 Now Find this code <Head>by Pressing Ctrl + F and Paste the code above
<Head>

Step 4 Now Delete all CSS and JavaScript code between <b:skin><![CDATA[ …………. ]]></b:skin> and Save the templates.

Hope this tutorial will help you to combine your all CSS and JavaScript file that will increase blog loading time. On the other hand, If you want to hide your blog designing code from others you can use this trick. Because a visitor can easily can see the page source by clicking on right button of mouse. But If you combine the all CSS script and host it to Google Drive then majority people won’t able to see the code. It can reduce coping and your blog will be neat and clean.

Congrats You’ve Done it right.
Subscribe for more Tutorials.

2 thoughts on “How To Upload CSS And JavaScript File in Google Drive to Speed up the Blog loading Time”

website design

January 24, 2014 at 9:18 pm

Appreciating the time and energy you put into your blog and detailed information you present. It’s good to come across a blog every once in a while that isn’t the same out of date rehashed material. Wonderful read! I’ve saved your site and I’m adding your RSS feeds to my Google account.
website design
Unknown

June 22, 2014 at 12:55 am

hi, what about between head and head?
I thought is is also CSS….

please let me know

Comments are closed.

How To Upload CSS And JavaScript File in Google Drive to Speed up the Blog loading Time

More from my site

Comparison Shots of iPhone 5 and Alleged Plastic/Budget Variant Leaked

Be Careful Linking Many Sites Together

2 thoughts on “How To Upload CSS And JavaScript File in Google Drive to Speed up the Blog loading Time”