Many bloggers use Google Drive to host the HTML, CSS or JavaScript for their blog. Google Drive is one of famous from various cloud storage and file synchronization services on internet. This file storage offer collaborative editing on documents, spreadsheets, presentations, and more. You can upload many type of file format including photos, videos, documents, and other files that are important to you.This online file storage offers all users an initial for free big enough space in Giga bytes. Your each file is safely stored and every files you upload to or create in Drive belongs to you and private, which set automatically, unless you want to decide to share it.
The Navigation of drive interface is easy to use, maybe the easiest cloud services. Supported file formats commonly for blogging, example the markup/code, HTML, CSS, Javascript etc. Just create a folder, name it, upload the file or any HTML code and then change the settings for sharring from private (personal) to public on the web.
Create CSS or Javascript and Upload to Google Drive
There is some tricky part to use this link for a proper direct link for the code of CSS or JavaScript files, so we can use this link hosting on the blog template.This article will show you how to create, upload CSS and Javascript file that are important for a blog or website to Google Drive especially for blogging activities. While using this drive for a direct link, the line of code can reduced in bytes. For example this can change a few lines of code into one line of code in HTML, and this is good for the weight of a page.
1. Create a CSS file in notepad and save it as examplestyle.css, for Javascript save as examplescript.js
The Following is example code for Back To Top Button, and if you interesting with it, just follow the link.
Save CSS File in Notepad
<style>
#ScrollToTop {
text-align:center;
z-index:9999;
position:fixed;
bottom:40px;
right:30px;
cursor:pointer;
display:none;
opacity:0.7;
}
#ScrollToTop:hover {
opacity:1;
}
</style>Copy paste the Blue code into notepad and save it as example.css and you don’t have to include the
<style> or </style> in notepad.Save Javascript File in Notepad
<script type='text/javascript'>
$(function() {
$(window).scroll(function() {
if($(this).scrollTop()>300) {
$("#ScrollToTop").fadeIn()
}
else {$("#ScrollToTop").fadeOut();}
});
$("#ScrollToTop").click(function(){
$("html,body").animate({scrollTop:0},400);
return false})
});
</script>Copy paste the Pink code into notepad and save it as example.js and you don’t have to include
<script type='text/javascript'> or </script> in notepad.2. Sign into the Google Drive with your Google account. If you don’t have one, you can sign up and create one, it’s free. Then you can store your files in the cloud as well as create any type of file format.
3. Click Create and select folder, and name it.
4. Select the folder that already created in previous step, then click Upload and select files...
5. Select the CSS or javascript file that you want to upload and wait until uploading completed.
6. Click Share on the right, after uploading completed.
7. Copy paste the link in notepad, you will need this later.
8. Click change sharing setting from private to Public on the Web, save it and Done.
9. Add the link or code as following.
The google drive link, that you copy earlier in notepad will looks like this
https://drive.google.com/file/d/ABC_DefG123456789abcde/edit?usp=sharing Add the blue color after
https://googledrive.com/host/ looks like this:https://googledrive.com/host/ABC_DefG123456789abcdeFinal For the CSS to add in HTML Template
<link href='https://googledrive.com/host/ABC_DefG123456789abcde' rel='stylesheet' type='text/css' />Final For the Javascript to add in HTML Template
<script src='https://googledrive.com/host/ABC_DefG123456789abcde' type='text/javascript'></script>9. Copy the code into your HTML Blog Template, recommend before
</head>, but you can also add somewhere in the HTML template.10. Done, That’s it. Hope this would useful.
