In Blogger we can only host images and videos but unable to
host JavaScript file. But there are many Blogger who host JavaScript file in third-party
server like Dropbox, YourJavaScript and Google Code site. The most trustable
hosting site is Google code but they have already announced that they are going
to close their service and those who already hosted different projects they
should switch their file to another hosting site.
Fortunately Google has introduce Google Drive which is very
powerful server where we can host our Image, Videos, CSS file, JavaScript file,
documents including PDFs and Microsoft Office files etc. You can change the
file's or folder sharing settings from "private" to "public on
the web thus can be usable in template or in Widget. The main positive side of
hosting files in Google Drive that its uptime 99.99% and Google's server never
down. In addition your code will be secured in one place. Google has
recommended by themselves to host your projects and files in Google Drive. So
in this tutorial I will show you how to host JavaScript File in Google Drive?
Hosting JavaScript file on Google Drive
Step 1 Go to https://drive.google.com/and sign in to enter into your drive and
it will redirect to Google Drive Page.
Step 2 Now click on My Drive drop down option and select Upload files... and a popup window will open for selecting files
from hard Drive.
Step 3 Just simply locate your JavaScript
file and click on Open button. You JavaScript
file will be upload instantly with Uploads
completed message. You will see the upload status at the bottom right
corner of the screen.
Step 4 Click on Share link and a popoup window will open after that click on Advanced and another window will
appear.
Step 5 Initially your file will be Private mode (only you can access to
file) but you have to make your JavaScript
file Public otherwise it won't
work in your Blogger template or widgets. So click on Change... link from next to Private
- only you can access option.
Step 6 You will be in Link sharing window and select On
- Public on the web option, after that click on blue color Save button. You will be return in
previous window.
Step 7 Now below Link to share field copy the code. the code will be like below-
https://drive.google.com/file/d/0B9kc_Su2qRHNVEE1M0lqUjZLX0k/view?usp=sharing
And click on blue color Done
button from the bottom left side of the popup window.
we have successfully hosted our JavaScript file on Google
drive and now I will show you how to use this in Blogger Template?
Using Hosted JavaScript File from Google Drive
This is really bit complicated for new user those who don't
know how to use hosted file Blogger template and widget. For using JavaScript
file in Blogger template just follow the below trick-
we have found hosted file link from Google Drive like below-
https://drive.google.com/file/d/0B9kc_Su2qRHNVEE1M0lqUjZLX0k/view?usp=sharing
but we need only 0B9kc_Su2qRHNVEE1M0lqUjZLX0k
from above code. After that just wrap up this code by below script.
<script src='https://googledrive.com/host/0B9kc_Su2qRHNVEE1M0lqUjZLX0k' type='text/javascript'></script>
Though we
will host JavaScript for this reason I have mentioned here text/javascript. And JavaScript file should be host above closing
head in Blogger template. To place the code 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->
Step 3 Now find the </head> by pressing Ctrl+F (Windows) or CMD+F (Mac)
Step 4 Copy the script from below and Paste it
above/before </head>
<script src='https://googledrive.com/host/0B9kc_Su2qRHNVEE1M0lqUjZLX0k' type='text/javascript'></script>
Step 5 hit the Save template button.
That's it now your file will work in
Blogger template that hosted in Google Drive. Remember that only JavaScript file will not work in
Blogger template or widget for make it work you have to add CSS and HTML also.