Skip to main content

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

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: http://theblogger911.blogspot.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 Save it 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.
How To Upload CSS And JavaScript File in Google Drive to Speed up the Blog loading Time
Step 7 Now click on Create-> Folder-> from top left corner and give the folder name.
How To Upload CSS And JavaScript File in Google Drive to Speed up the Blog loading Time
And see your new Folder Has created
How To Upload CSS And JavaScript File in Google Drive to Speed up the Blog loading Time
Step 8  Now Click on New Folder to enter into folder and click on Upload Button -> Files
How To Upload CSS And JavaScript File in Google Drive to Speed up the Blog loading Time
And select your Style.css file from your Computer Hard Drive for Upload which one you were created 
on Step 5. 
How To Upload CSS And JavaScript File in Google Drive to Speed up the Blog loading Time
Step 9   And Click on Start Upload Button and It will finish uploading within 2 or 3 seconds
How To Upload CSS And JavaScript File in Google Drive to Speed up the Blog loading Time
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.
How To Upload CSS And JavaScript File in Google Drive to Speed up the Blog loading Time
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.
How To Upload CSS And JavaScript File in Google Drive to Speed up the Blog loading Time
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>
How To Upload CSS And JavaScript File in Google Drive to Speed up the Blog loading Time
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.

Comments

  1. 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

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

    please let me know

    ReplyDelete

Post a Comment

Popular posts from this blog

How to Use Facebook, Disqus and Blogger Comment tab Together in Blogger Blogs

As writers of  blogs, we all are aware of the importance of comments. While it is true that some blogs/websites tend to disable comments entirely, those are special instances where the websites do not essentially require comments. However, in general, comments form an integral part of any blog, be it a personal one or a magazine site. After all, what good is any info unless it provokes a healthy discussion?

All blogging platforms (including WordPress) come with native support for some sort of comment mechanism which seems to suffice for most bloggers. But sometimes, users may require some dedicated or specialized comment mechanism. This is where third-party commenting systems come in handy. In this article, we will take a look at some of the major third-party commenting mechanisms

Disqus
Disqus is a mature comment management system and perhaps the most used amongst bloggers and website owners. Introduced back in 2007, it is currently serving more than 750,000 websites. According to a …

FIXED! Adsense Ads not Showing in Homepage of Blogs or Website

Problem Solved! have you experience your Adsense ads not showing on homepage? Ads are showing on other pages except for homepage, well just this week I had a hard time figuring out why my ads are not showing in homepage.

I have another blog that is using Adsense ads. After a day of fixing almost all my template errors still the Adsense ads are not showing so I tried to search for it on internet.

Some forums will tell you that it is about updating your privacy policy pages, well I did that also but there's no effect.

The solution is very simple just navigate to blogger setting or wordpress seo settings. I'm focusing on blogger since my blog is in blogger platform.




Go to Blogger settings ->> Search Preferences->> Enable search description. Click yes then put your sites description and save. That's it! reload and see the magic :D

Facebook Popup (Like Box Widget) With Time Delay

Facebook Popup Like Box Widget With Light box and Time DelayIf you are looking on how to increase your blog social media connection you can use widgets that will expose it to your reader. One of the best way is to use Facebook like box will pop up with the lightbox effect. This facebook pop up is not annoying because of its ability to detect its user cookies. It won't open when it is already closed. It has a time delay also to avoid visitors leaving your blog. Just set it in any way you want and increase your followers/likes easily.
Add Widget to Your Site Add the following code anywhere in any widget/HTML box.
Go To layout and add gadget--> HTML/JavaScritp Box Paste all the below code -> then save

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'></script>
<style>
#fanback {
display:none;
background:rgba(0,0,0,0.8);
width:100%;
height:100%;
position:fixed;
top:0;
left:0;
z-index:99999;
}
#…