How To Properly Add JavaScript and CSS code in Blogger

Blogger.com became most used platform to create blog. Today I'm going to share you right place to add JavaScript and CSS code in blogger HTML editor. Many people are failed to add external and internal JavaScript and CSS codes in right place.

Adding those codes in wrong place will cause to your blog loading speed and several other things. There are few thing to follow while adding external and internal JavaScript and CSS code.

Ho To Properly Add:

External CSS: can include all CSS code in one URL and can be written in any text editor. Style sheet should be saved with a .css extension. You can host in web and we will use like below:

<link rel="stylesheet" type="text/css" href="http://www.example.com/mystyle.css">

Every external CSS code should be added above  <b:skin>  tag in HTML editor (see above image). So this external CSS code will load first. If you add JavsScript there, your blog will take more time to load.

Internal CSS: can include all CSS code in your blog itself. In between <style> and </style>. This code will style elements in blog. In this case almost, many people keep right place. Few people only fail in this case.

.post-body pre {background:#f1f1f1;}
.post-body h4 {margin:2px;}

You should add internal CSS code before  ]]></b:skin>  tag.

External JavaScript: can include all your external JavaScript to external file (with a .js extension). Can be link to your HTML document right before ending head ( </head> ) tag.

You should add External JavaScript before  </head> . 

Internal JavScript: can include all you JavaScript in your blog itself. Adding internal JavaScript is in same place before </head> tag.

You can optimize your blog speed for better loading if you follow above thing while adding Javcript and CSS in your blog, I hope you like this tutorial. If you further doubts, feel free to comment below.

SHARE

Tweet