Lastest News

recent
Home Blogger Tips How to Remove Blogger Default CSS

How to Remove Blogger Default CSS

 




Removing the default Blogger CSS (often called the "CSS Bundle") is the first step to creating a completely custom, fast-loading theme. Blogger injects a large file (bundle.css) and several authorization styles that can override your custom designs.

Here is the cleanest, most modern method to strip Blogger's default styles.

Prerequisite: Backup Your Theme

Before touching the code, save your current work.

  1. Go to Theme.

  2. Click the Arrow next to "Customize".

  3. Select Backup > Download.

Method 1: The "b:css" Attribute (Recommended)

This is the standard "switch" provided by Blogger to disable its default stylesheets. It prevents the platform from injecting the widget_css_bundle.css file into your <head>.

  1. Go to Theme > Edit HTML.

  2. Find the opening <html tag at the very top of the code (usually line 2 or 3).

  3. Add the attribute b:css='false' inside the tag.

It should look like this:

(Note: If you already have other attributes like b:version, just add b:css='false' next to them.)

  1. Save the theme.

What this removes:

  • The main bundle.css (which contains styles for headers, footers, and default widgets).

  • Default widget styling (e.g., the default "Profile" or "Archive" widget looks).

Method 2: Cleaning the <b:skin> Tag

Even with the bundle disabled, your template likely still contains the "Skin" — the CSS used by Blogger's "Customize" designer tool. If you are coding a custom theme, you don't need this.

  1. In the HTML editor, search for <b:skin>.

  2. You will see a massive block of code starting with <![CDATA[ and lots of "Variable" definitions.

  3. Delete everything inside the <b:skin>...</b:skin> tags, but keep the tags themselves.

Replace it with this:

Method 3: Disable Default Widget Javascript (Optional)

If you want to strip the theme even further (removing the default widgets.js that controls things like the mobile menu or dynamic widget behavior), you can use the b:js attribute.

Modify the HTML tag again:

  • Warning: This will break standard Blogger interactive features (like the default Comment form validation or dynamic loading). Only do this if you plan to write your own JavaScript for these functions.

Troubleshooting: "My Layout is Broken"

Once you do this, your blog will look like raw, unstyled HTML (Times New Roman text, blue links, no grid). This is normal.

  • If you see a "b:template-skin" error: Some layout editors require a <b:template-skin> tag to function. If you deleted it and get an error, simple add this empty tag back right after the closing </b:skin> tag:

Find the start of html tag (<html). It will nearly look like this:





<html b:version='2' class='v2' expr:dir='data:blog.languageDirection' lang='en-US' 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'>

3. Now add b:css='false' into the html tag like this:

<html b:css='false' b:version='2' class='v2' expr:dir='data:blog.languageDirection' lang='en-US' xmlns='http://www.w

How to Remove Blogger Default CSS Reviewed by admin on February 11, 2026 Rating: 5

Tags :

No comments:

Subscribe to: Post Comments (Atom)
All Rights Reserved by PBSMLINKS -A Complete Information Sharing Portal © 2016 - 2021
Powered By Blogger, Designed by PBSMLINKS

Contact Form

Name

Email *

Message *

Powered by Blogger.