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

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

18
data:blog.title
combine CSS file

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[
/*
-----------------------------------------------
Blogger Template Style
Name: Blogger Spice Template
Date: 29 Sept 2012
Author: Mohammad Fazle Rabbi
URL: http://www.bloggerspice.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.


combine JS file


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

new folder


And see your new Folder Has created

tricks


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


Google Drive


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

on Step 5. 

upload

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

updates

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.

blogger spice

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.

blogger tips

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.
How To Combine CSS And JavaScript File in Google Drive to Speed up the Blog loading Time
4 Stars stars - "How To Combine 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 ...

Post a Comment

hi rabbi are you using this tips also?..cause im afraid that it will break my template..

Yeh Sin it will affect your Layout view..But I recommend it for some specific CSS code that it won't affect. If you combine CSS code for Header, Sidebar, Footer then it will affect. But for another CSS code like, Recent Comment,Author box, Popular post, Label then it won't affect your Layout view.

Awesome, i am going to try this as my blog speed is little slow
regards,
Skillblogger

thanks Deep for commenting but be careful about CSS code for Header,Post body, Sidebar, Footer code. You should avoid it to combine.

Hmm, I tried but did not work it perfectly.I have done it according to your writing but all of the content of my blog [ww.schooling24.com] become haphazard. I don’t know why?

Very awesome article man. It is really useful for me. Keep it up buddy!
Check this out... Top 5+ Best Car Racing Android Games Free Download

Bro your blog is light weight so you don't need to use this script..But you can use this to hide some exceptional coding. This trick work 100%...

bro please suggest me ....should I do this or not.....check my blog speed and say....rhanks

Numan you have made your blog slow by using many popup ads..it is very annoying for visitors and also made your blog slow to load. If you remove popup ads then you don't need to follow this tutorial.

thanks bro i will remove it.......

and one more thing bro i have removed all popup ads now check my blog and say............and please say me how you have add the effect to your logo....when we touch it goes inside..please if possible give me the script thanks

yeh its looking nice but remove DMCA, Copy escape from all post footer. Because this is useless. Hopefully I am releasing a blogger template today...http://bsfancy.blogspot.com/ check this out..still working on some part.

bro how you have added powered by ...with hover effect ..please i want that and great template well done......

Now Copy the all CSS and JavaScript code between

Is Equal To ABOVE ]]>...?

yes right..but exclude CSS code for Header, Sidebar, Footer. Because your layout view will break. so except CSS code for Header, Sidebar, Footer combine other code.

dude i tried this after that no css styles were showing..only links and text with white background,i am using elice blogger template my blog mozbyte.com

Hi Vignesh..Have you followed step 11..because without converting the file into Public it won't work. You can test it in your demo site first it not work. For demo you can check one of my released template "Blue Mag" I have completely added the CSS code in Google Drive..Template link has given Below. You can check the code.

http://www.bloggerspice.com/2014/09/Blue-Mag-Exclusive-Blogger-Template.html

Facebook Group Community Disqus Channel Code ConverterHide Code Converter Show EmoticonHide Emoticon

Got questions? Ask ’em below! While we’re here, you might like to give any feedback about this Post, Your comment inspire us to continuous Improvement of This Blog and Contents. Your words are your own, so be nice and helpful if you can. Please, only use your REAL NAME, not your business name or keywords. Using business name or keywords instead of your real name will lead to the comment being deleted. Anonymous commenting is not allowed either. Limit the amount of links submitted in your comment. We accept clean XHTML in comments, but don't overdo it please.

Make sure you tick the Notify Me box below the comment form to be notified of follow up comments and replies. Thank you for commenting

Contact Form

Name

Email *

Message *