10 January 2019

How to Remove Blogger's Default CSS & JavaScript Widget Files

1 comment
You might have seen a couple of link and script tags in the source code of your blog. Some of these tags are added by Blogger itself to load the default JavaScript and CSS bundle widget files. You won't find these tags in the template editor as they are automatically added to your blog.

Remove Blogger's default CSS & JavaScript widget files

Here's a list of all Blogger's default JavaScript and CSS widget files -
  • widget_css_bundle.css - This file contains all the default CSS of Blogger template and widgets (such as popular posts, contact form, comment CSS etc.)
  • authorization.css - This is another small CSS file targeting your BlogID specifically.
  • widget.js - This is quite a big file which contains all the default JavaScript of Blogger widget.
  • plusone.js - As the name suggests, this JavaScript is for Google+ widgets.
These JavaScript and CSS widget files can affect your blog's page loading speed and that's why you might be planning to remove them. Blogger doesn't have any option to disable default JavaScript and CSS widget files, however, there are a few tricks that can help you to remove them from your blog.

Pros and cons of removing Blogger's default files

  • Pros - The main advantage of removing Blogger's default JavaScript and CSS file is the increased page loading time of your blog. Thus, you are giving a faster user experience to your visitors.
  • Cons - When you delete Blogger's default JavaScript and CSS files, your blog design may be affected and some of the widgets may not work which exclusively depends on these files such as contact form.
Note: We recommend you to remove the default JavaScript and CSS file from your blog only if you have some background knowledge of customizing Blogger theme and you know how widgets work.

How to remove Blogger's default CSS & JavaScript widget links


This is one of the easiest ways to remove Blogger's default CSS and JavaScript widget link by adding an attribute in the </head> tag on your blog HTML. Here's a step-by-step guide -
  1. Login to your Blogger account and go to Theme > Edit HTML.
  2. Now find </head> tag in the template editor.
  3. Add b:css='false' b:js='false' attribute in the head tag so it looks like something like this:
    <html b:css='false' b:js='false' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr' xmlns:fb='http://ogp.me/ns/fb#' xmlns:og='http://ogp.me/ns#'>
    
    Note: We recommend to take a backup of your Blogger template before making any changes in it.
  4. Finally, tap the "Save theme" button to save the changes. That's it.
Now view the source code of your blog and you will find that widget_css_bundle.css and widget.js file has been removed. Unluckily, this method won't remove the authorization.css and plusone.js files.

Remove Blogger's default JS & CSS link using HTML comments


In this method, we will change the CSS and JavaScript widget files in HTML comments. Follow these steps -
  1. Login to your Blogger Dashboard and go to Theme > Edit HTML.
  2. Click anywhere in the template editor and press CTRL+F to open the search box.
  3. Type <b:skin><![CDATA[*/ and press enter button to search it.
  4. Replace this code with the following code:
    &lt;style type=&quot;text/css&quot;&gt;
    &lt;!– /*<b:skin><![CDATA[*/]]></b:skin>
    <style type=’text/css’>
    
  5. Now find ]]></b:skin> code and replace it with </script>.
  6. Similarly, find </body> tag at the end of the template HTML and replace it with the following code:
    &lt;!--</body>--&gt;&lt;/body&gt;
    
  7. Finally, tap the "Save theme" button.
This method will remove widget_css_bundle.css, widget.js and plusone.js files from your Blogger blog.

Remove authorization.css link in Blogger


Unfortunately, the above methods can't remove the authorization.css file. In order to remove it, you have to change the </head> tag in your Blogger template. Simply, go to Theme > Edit HTML and click anywhere in the template editor.

After this, press CTRL+F shortcut key to open the search box and find </head> tag. Now replace it with the following code:
&lt;!--</head>--&gt;&lt;/head&gt;
So these are some of the methods to remove Blogger's default CSS bundle and JavaScript widget files from your blog. If you are facing any problem, please let us know in the comment section below.

1 comment:

  1. Please tell how to recover custom css and javascript in the blog template. Changed the whole theme many times, but the affected template areas does not changed

    ReplyDelete