Overcoming Unreadable JS Codes and External CSS

Overcoming Unreadable JS Codes and External CSS - Some time ago I saw there were some changes made by Blogger, such as in terms of UI, UX, and other aspects. In terms of UI, Blogger is now replacing the old look of the blog list to a more simple and practical form and of course that is a positive thing that Blogger gives to every user.

But from these changes, it also affects the codes that used to run normally in the template. Especially JS codes and external CSS that will not run if the link is not included with HTTP (Hypertext Transfer Protocol) or HTTPS (Hypertext Transfer Protocol Secure) on links linked in the template.

In this post I will give you tips on How to Deal with Unreadable JS and External CSS Codes in Templates. The method is very easy, you just need to add "https:" on each JS and External CSS link in your template. Here's an example:

Initial link

<script src='//example.js'/>

Then add https: to the link above

<script src='https://example.js'/>

In the example below I took the external link code from the Simplify template (it can be different depending on the template used).

JQuery Library link

Link installed

<script src='//ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js'/>

Replace with this link

<script src='https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js'/>

Google Font Link

Link installed

<script type='text/javascript'>
//<![CDATA[
//CSS Ready
function loadCSS(e, t, n) { "use strict"; var i = window.document.createElement("link"); var o = t || window.document.getElementsByTagName("script")[0]; i.rel = "stylesheet"; i.href = e; i.media = "only x"; o.parentNode.insertBefore(i, o); setTimeout(function () { i.media = n || "all" }) }
loadCSS("//fonts.googleapis.com/css?family=Roboto:400,400italic,700,700italic");loadCSS("https://maxcdn.bootstrapcdn.com/font-awesome/4.6.0/css/font-awesome.min.css");
//]]>
</script>

Replace with this link

<script type='text/javascript'>
//<![CDATA[
//CSS Ready
function loadCSS(e, t, n) { "use strict"; var i = window.document.createElement("link"); var o = t || window.document.getElementsByTagName("script")[0]; i.rel = "stylesheet"; i.href = e; i.media = "only x"; o.parentNode.insertBefore(i, o); setTimeout(function () { i.media = n || "all" }) }
loadCSS("https://fonts.googleapis.com/css?family=Roboto:400,400italic,700,700italic");loadCSS("https://maxcdn.bootstrapcdn.com/font-awesome/4.6.0/css/font-awesome.min.css");
//]]>
</script>

Blogger comments column when not Google login

Link installed (search inside this code template)

http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js

Replace with this link

https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js

After that, save the template and see the changes on your blog. Now the blog will run normally again.

So simple tips from me about Overcoming Unreadable External JS and CSS Codes that hopefully will benefit you all. Good luck.

Share :