How To Convert Inline CSS or JavaScript To External File

Leave a Comment
CSS stands for Cascading Style Sheets. CSS describes how HTML elements are to be displayed on screen, paper, or in other media. CSS saves a lot of work. It can control the layout of multiple web pages all at once. JavaScript is an object-oriented computer programming language commonly used to create interactive effects within web browsers.

How To Convert Inline CSS or JavaScript To External File
What is inline CSS and JavaScript? All the CSS and JavaScript that are embedded in HTML document are know as inline CSS or JavaScript.

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.


Preparing CSS and Javascript file to host online

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.


How to add folder in Google drive



Step 5. Open the newly created folder, and click on the NEW > File Upload. then choose the files that you need to upload.


How to upload file in google drive


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.


How to share file on google drive


 Step 7. Change file access from 'private' to 'Anyone'. Then copy your file link and click done.


Change google file share access to public


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 :)

0 comments:

Post a Comment

Every comment is appreciated but keep in mind that comments are moderated and may take some time to appear. All spam comments will be deleted. Thanks for understanding!

Request Post