Home Life Trends How To Host Blogger CSS and JavaScript Files in Google Drive

How To Host Blogger CSS and JavaScript Files in Google Drive

Anyone that has ever labored on an internet design or improvement can inform you that the place you determine to retailer your recordsdata is vital. Every time somebody visits your web site, the server or host will entry this location and convey up the related recordsdata that want to be displayed. Wherever you determine to retailer your recordsdata, this can have an effect on some vital facets just like the velocity that your web site masses, your total search engine optimization rating and your potential to make obligatory changes to the positioning.

Things To Think About

When you might be designing your on-line construction and the place to retailer your vital CSS and JavaScript recordsdata, here's a run down on how this choice would possibly impression your web site afterward:

Site Loading Speed

By combining a few of the type sheets and web site recordsdata, the Blogger server solely has to accumulate data from a single location. When you cut up up your recordsdata or decentralize the file system, it takes an extended time for all the information to come collectively to make your web site attainable.

Slow loading speeds can negatively impression your search engine optimization scores as a result of the slower the positioning is, the much less possible that guests are going to wait round for it to load. If somebody visits your web site and instantly clicks the 'again' button as a result of it is taking too lengthy to load, that's going to enhance your bounce charge and present Google with statistics that present your web site is both low high quality or irrelevant to the search key phrases.

File Storage Affects search engine optimization

In addition to growing your bounce charge, storing your recordsdata in a central location and managing the identify of your recordsdata can have an effect on search engine optimization web site huge. Web crawlers enlisted by Google, or a few of the different serps, index each the code in your web site, and the identify and listing of your recordsdata. If file names are random or not placed in the correct categories, the net crawlers aren't going to know what to do with the data.

Clear file construction and a central location give you incentive to manage the whole lot and identify them appropriately. All the content material that's related to the topic of your web site or weblog can be in the identical location for internet crawlers to evaluation.

Storage Locations Affect Editing Abilities

Shuffling by recordsdata and folders or opening up FTP connections simply to make some easy edits could be a trouble, and take up a whole lot of time that might have in any other case have been spent writing new content material.

If you are a Blogger web site proprietor, that is one thing you want to take into consideration. When you want to make alterations to issues like social media sharing buttons, common posts, current posts and associated posts widgets, you have got to know the place the whole lot is meant to go, or danger shedding each obtainable content material and cash.

Some of the bigger websites that produce lots of of distinctive articles every month cannot afford to have content material in completely different places. When articles begin to get misplaced out of order, they run the chance of duplicating content material on their web site, or forgetting to put up it altogether. Things needs to be proper at your fingertips to reduce errors and cut back the period of time spent modifying the positioning whereas it is nonetheless reside.

Storing Javascript/CSS Files With Google Drive

Storing Blogger CSS and JavaScript recordsdata with Google Drive will assist to get rid of any of the Challenges talked about above and cut back the litter amongst your providers. Taking this technique can enhance your web site velocity, enhance the alternatives for a profitable search engine optimization marketing campaign, and make your life a lot simpler.

Google Drive gives ample quantity of house to retailer massive recordsdata, and provides collaboration providers so that you could work amongst completely different workforce members on the identical challenge. Some of the recordsdata that you simply add into the cloud providers can stay unpublished and keep inside the non-public web site, whereas different recordsdata like weblog posts will be revealed or saved to the general public web site.

Another helpful function of storing all of your Blogger recordsdata on Google Drive is that it's extremely safe. Google comes with the backing of one of many main corporations in the technical world so that you could make certain your content material is secure from hackers and these wanting to compromise your web site.

This information will give you step-by-step directions on how to setup your Blogger web site utilizing Google Drive. It's utterly free to reap the benefits of this technique, and will give you a stable platform from which to construct your weblog.

host blogger css javascript files

Step 1. Prepare the CSS/JavaScript Files

  • First, we want to create the file that we want to host. To host a CSS file, open the Notepad and paste the CSS code (whether it is enclosed inside the <type> and </type> tags, take away them). 
  • In the Notepad menu, choose 'File' > 'Save as' and sort the file identify with the .css extension identical to I did with mycssfile.css - see the screenshot under.
create a css file
  • In the identical window, select "All files" in the "Save as type" possibility and set the Character Encoding to UTF-8.
  • If you need to host a JavaScript file, add the .js extension (as a substitute of .css) on the finish of your file identify (take away the <script>...</script> tags in the event you see them). Click "Save" and navigate to the situation the place you need to save the file.

Step 2. Upload Your File on Google Drive

  • Access https://drive.google.com and log in together with your Gmail account. After you logged in, click on on the 'Create' button and add a brand new separate folder to add your JavaScript and CSS recordsdata.
create folder in Google drive
  • Open the newly created folder, and click on on the Upload button with the upward arrow to select the recordsdata that you simply want to add.
upload files using google drive
  • Now, navigate to the situation the place you saved the recordsdata, choose them (to choose a number of recordsdata, press and maintain down the Ctrl key in your keyboard and then click on on them) and press the Open button.
  • After the recordsdata have been efficiently uploaded, proper click on on the file names (to choose all of your recordsdata in the folder, click on on the checkbox) and choose 'Share':
share google drive files
  • In the 'Sharing settings' window, click on on the 'Change' hyperlink and select the 'Public on the internet' possibility. Press 'Save' and copy the hyperlink(s) of your uploaded file(s) from the 'Links to share' field highlighted in blue, then paste it right into a Notepad to use it later.
javascript css file sharing

Step 3. How to Add an External CSS/JavaScript file to Blogger

Before you should use the hyperlinks, it's essential to exchange 'https://drive.google.com/file/d' to 'https://googledrive.com/host' and take away '/edit?usp=sharing' in the hyperlink.

For instance, the hyperlink to mycssfile.css that I copied seems to be like this:


Notice the half in blue after the "/file/d/" half. That is the file ID which is used to entry it through the brand new internet hosting service. It ought to begin with the next URL:


Add the file ID like this (take away the "https://helplogger.blogspot.com//edit?usp=sharing' half):


Now log into your Blogger account, choose your weblog and go to Template > Edit HTML. Click wherever contained in the code space and press the CTRL + F keys to open the search field:

open blogger search box

If you need to add a CSS file, sort the next tag contained in the search field and hit Enter to discover it:


Just BELOW the tag, add this line:

<hyperlink rel="stylesheet" sort="text/css" href="https://helplogger.blogspot.com/https://googledrive.com/host/0B4n9GL3eVuV-TkphMkc3SFR2Slk" />

And exchange https://googledrive.com/host/0B4n9GL3eVuV-TkphMkc3SFR2Slk with the hyperlink of your CSS file:

add external css to blogger

If you need to add a Javascript file, seek for the next tag:


And add this line simply ABOVE it:

<script src="https://helplogger.blogspot.com/https://googledrive.com/host/0B4n9GL3eVuV-eVYwLXBrTlZrVDg' sort='text/javascript'></script>

Replace the road in blue together with your URL:

add external javascript js to blogger

Finally, press the 'Save template' button to save the adjustments. And you are performed!

In Conclusion

Once you have got saved all of your file folders and closed out of the drive, open your web site in a browser and guarantee that all of the adjustments have accomplished efficiently.

Next time you need to edit any of the data or transfer inner recordsdata, all you have got to do is open up the Google Drive folder in your account and make the modifications from that location. Those recordsdata will then robotically sync to the web folder and make updates to your web site. This works the identical if you would like to change the looks by modifying the CSS code to lengthen the header, footer, or make customizations.

As you may see, altering your file storage out so that's CSS and JavaScript is saved in your Google Drive account is simple to do and solely takes a couple of minutes. After you make the change, you may start benefiting from quicker loading speeds, larger search engine optimization rankings, and total a extra handy platform to work from to enhance the effectivity of your work.