What is External CSS and JavaScript? All the CSS and JavaScript that are hosted externally as External file are known as External CSS or JavaScript.
Benefits of External CSS and JavaScript.
- Optimize Page load time.
- Makes HTML document lighter.
- Increases browser caching.
- Makes your document clean and tidy.
- Easy to manage.
How to Host Blogger CSS and JavaScript on google drive
There are so many file hosting services, but google drive is free and easy to manage. You can also use google drive for windows to quickly manage your files.Step 1. Open Notepad > Paste your code (for CSS remove <style> and </style>, for JavaScript remove <script> and </script>.
Step 2. In the Notepad menu, select 'File' > 'Save as' and type the file name with extension .css for CSS and .js for JavaScript.
Step 3. In the same window, choose "All files" in the "Save as type" option and set the Character Encoding to UTF-8.
Step 4. Open Google drive and login with your Gmail account. After you logged in, click on the 'NEW' button and add a new separate folder to upload your JavaScript and CSS files.
Step 5. Open the newly created folder, and click on the NEW > File Upload. then choose the files that you need to upload.
Step 6. After the files have been successfully uploaded, right click on the file names and select 'Share'. Again in the pop-up select advance.
Step 7. Change file access from 'private' to 'Anyone'. Then copy your file link and click done.
Step 8. Before you can use the links, you must replace 'https://drive.google.com/file/d' to 'https://googledrive.com/host' and remove '/edit?usp=sharing' in the link.
For example:
My file link looks like this:
https://drive.google.com/file/d/0B6pDGRGeYi9nampKY0M4dXVOVWc/view?usp=sharing
After replacing 'https://drive.google.com/file/d' to 'https://googledrive.com/host' and removing '/edit?usp=sharing' :
https://googledrive.com/host/0B6pDGRGeYi9nampKY0M4dXVOVWc
Step 9. Now add your link to the following code:
For CSS:
<link rel="stylesheet" type="text/css" href="https://googledrive.com/host/0B6pDGRGeYi9nampKY0M4dXVOVWc" />
Replace https://googledrive.com/host/0B6pDGRGeYi9nampKY0M4dXVOVWc with your CSS file URL.
For JavaScript:
<script src='https://googledrive.com/host/0B6pDGRGeYi9nampKY0M4dXVOVWd' type='text/javascript'/>
Replace https://googledrive.com/host/0B6pDGRGeYi9nampKY0M4dXVOVWd with your JavaScript file URL.
Now you can use these code on your HTML document to add external CSS and JavaScript file.
Step 10. Login to blogger account, then navigate to Template > Edit HTML and place your Code:
For CSS: Place code below <head>.
For JavaScript: Place code above </body>.
Recommended: Use ctrl+f to find above codes.
Read: How to Reduce Blogger Page load time.
That's all!
For any type of issue or suggestion, please comment below. Stay Updated! Browse Howbloggerz :)