How to Remove Default Widgets CSS from Blogger

Writing some great post and having a great design is not enough for your blog’s/website’s success. You must make sure the visitors feel comfortable visiting and browsing you blog or website. That means you blog should have the functionality with speed.

If your blog takes forever to load than changes are visitors are leaving you blog, thus your site has a high bounce rate. You site must load quickly in any device or visitors are surly leaving quickly.

One of the way is to remove the Blog’s remove the default widgets CSS (widget_css_bundle.css) from your Blogger blog. You actually cannot remove it but can comment it out using a simple technique.

What are the Default Widgets CSS files of Blogger

These are default widgets CSS files of Blogger.

<link type='text/css' rel='stylesheet' href='//www.blogger.com/static/v1/widgets/3841957138-widget_css_bundle.css' />
<link type='text/css' rel='stylesheet' href='//www.blogger.com/static/v1/widgets/1535467126-widget_css_2_bundle.css' />
<link type='text/css' rel='stylesheet' href='//www.blogger.com/dyn-css/authorization.css?targetBlogID=367973271035573867&zx=0aa7d473-9366-475d-b9e5-3d07cdbeb132' />

Go to any page of your blog and view the source CTRL + U to see if any of them are loading in your blog. If that’s true then you should follow the instructions below to remove them.

Remove Default Widgets CSS files of Blogger

remove blogger default widgets css

    1. You must make sure that you have a backup copy of your template.
    2. Go to Blogger Dashboard > Template.
    3. Click ‘Edit HTML’.
    4. In the Template editor hit CTRL + F and find <b:skin><![CDATA[/*
    5. Just before it on this same line paste the following code.
      &lt;style type=&quot;text/css&quot;&gt;&lt;!-- /*
    6. It should look like this;
      &lt;style type=&quot;text/css&quot;&gt;&lt;!-- /*
      <b:skin><![CDATA[/*
      */// The the CSS and and style codes for the Blogger template
      /]]></b:skin>
    7. If required; cut all the code between <b:skin><![CDATA[/* and ]]></b:skin> and paste them in a new <style> tag. Like this:
      <style type="text/css">
      // Paste the CSS codes here
      </style>
    8. Click ‘Save Template’

By doing this the default widget CSS files will be ignored. You will see the significant decrease in loading time of your blog. Use Google-Developers PageSpeed Insights page and other speed taste tools check out your Blogger blog’s speed and optimization score and suggestions.

Go to any page of your blog and view the source CTRL + U of it. You will find something like this;

<style type="text/css"><!-- /*<link type='text/css' rel='stylesheet' href='//www.blogger.com/static/v1/widgets/3841957138-widget_css_bundle.css' />
<link type='text/css' rel='stylesheet' href='//www.blogger.com/dyn-css/authorization.css?targetBlogID=367973271035573867&zx=aafd6115-a772-4cb1-a020-041a1d5b336f' />
<style id='page-skin-1' type='text/css'><!--*/--></style>

Positive and Negative Impacts of Removing the Default Widgets CSS files of Blogger

Before you use this method you should know that removing:-

  • If you are using any of the default templates given by Blogger, then doing this will completely destroy your blog’s design and structure.
  • If you are too much dependent of the Blogger’s built-in template Customize tool.
  • If you have very little idea about CSS and Blogger Template editing.

Despite these you should remove the default widgets CSSs because;

  • Page speed will improve; thus you blog will load more quickly than before. As fast loading website/blog is required to reduce the bounce rate.
  • Avoid loading unnecessary staff in your blog. These CSS codes are not that important to you blog’s performance. Actually they reduce the performance of the blog by taking forever to load to no effect.
  • If you are coding your own Blogger template then you should remove them.
  • If you are using a custom made blogger template then you should remove the default CSSs of Blogger.
  • Removing the default CSSs will not cause any problem in using the default gadgets/widgets of Blogger.

Currently I am using this technique in this blog. I suggest you to get rid of both default widgets CSS (widget_css_bundle.css) and default widgets JavaScript (Widgets.js) from Blogger as it will increase your Blogger blog’s page loading speed drastically.

Hope information here helped you. Do share your experience of using these tips.