Disable Blogger Theme CSS widget.css Make Blog Page Lighter Easily

Learn how to AMP'd your blog with valid AMP HTML Blogger theme framework. Visit Blogr-AMP Theme and AMPaction Theme. No 3rd party application. Compatible with published posts. Quick in search & on any devices.
Blogger is great platform to publish contents online easily & for users who are about to learn HTML & CSS, it is a good place to start -- getting your hands dirty.

By default, Blogger includes tones of external files which is used on/with widgets installed on a blog. These are every Blogger theme developer & designer nightmare -- poor blog pages performance.

Blogger platform have improved tremendously & ever since the release of the responsive Blogger themes, new operators have been integrated for users to use with their themes.

Earlier, we have published a tutorial on how to reduce weight of your blog page by removing Blogger default Javascripts external files.

Below is a simple & super easy way to remove or disable Blogger CSS external widgets.css file. This will allow you to start building your blog pages/layout on an empty canvas. Use below tips if you know your way around Blogger theme coding.

Disable Blogger Theme widgets.css external file

What Happens if widget.css Removed?

  • Blogger widgets will have no styles.
  • Comments widget will have no styles.
  • Blog page layout will have no styles.

Why Disable Blogger Injected widget.css & Blogger Default Theme Styles?

  • You want to start a custom Blogger theme from scratch.
  • Works great when developing custom styles for your theme projects.
  • Reduce injected assets to your blog page - reduce page weight & quicker page display
  • Remove reported warnings by 3rd party webpage performance inspectors due to adhesive external files injections.
  • You want 100% control of element style display at your blog page layout.

Here's how you can achieve this, without hacking your Blogger Theme element tags in Theme > Edit HTML panel. Backup your theme before proceeding...

  • Go to Theme
  • Select Edit HTML 
  • Find below:-

<html b:version='2' class='v2' expr:dir='data:blog.languageDirection' ....>

  • Add the b:css='false' attribute with the <html> tag at the start of your theme so it will look like so:-

<html b:css='false' b:version='2' class='v2' expr:dir='data:blog.languageDirection' ... >

  • Click Save Theme
  • Refresh your blog pages & use "View Page Source" or F12 to view your page HTML & the results.

Note: Individual widgets which when installed might include inline style CSS inside widgets codes. You can remove them manually by searching in Theme > Edit HTML > select your widget for CSS removals.

New shopping cart widget for Blogger blogs -- transform your blog & sell products using your blog posts instantly! Visit Add Shopping Cart Widget Page to learn more.

Interesting Related to this Topic at Irsah inDesigns Blog