How to Remove Default Widgets CSS from Blogger

How to Remove Default Widgets CSS from BloggerWriting 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 your blog or website. That means your 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. Your site must load quickly in any device or visitors are surely leaving quickly.

One of the ways 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='https://www.blogger.com/static/v1/widgets/3841957138-widget_css_bundle.css' />
<link type='text/css' rel='stylesheet' href='https://www.blogger.com/static/v1/widgets/1535467126-widget_css_2_bundle.css' />
<link type='text/css' rel='stylesheet' href='https://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

    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='https://www.blogger.com/static/v1/widgets/3841957138-widget_css_bundle.css' />
    <link type='text/css' rel='stylesheet' href='https://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 your blog will load more quickly than before. As fast loading website/blog is required to reduce the bounce rate.
    • Avoid loading unnecessary stuff 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 on this blog. I suggest you 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.

    Related
    MoreBlogger /