How to Remove Widget Bundle CSS File From Blogger Some blogger want to get rid of blogger default Widget CSS bundle file for better Blogger Template Coding. There are two external CSS files ...
2018-02-19T04:26:38Z

How to Remove Widget Bundle CSS File From Blogger

Some blogger want to get rid of blogger default Widget CSS bundle file for better Blogger Template Coding. There are two external CSS files that are added by default. This file contain the CSS reset, predefined Navbar style, Widget style, blogger share button, heading tags and much more.

Best way to Remove Widget Bundle CSS file from Blogger

The important thing is that you cannot permanently remove Widget CSS bundle file only you can commented out so that it just ignored by the browser and make webpage load faster.

Why to Remove Default Blogger Css Bundle ?

  • Developers want to make their templates more flexible in terms of custom assets, design responsiveness, etc.
  • Make your webpage load faster from previous one
  • Optimize your CSS Delivery to improve your blog Scores in Google PageSpeed Insights

How to Remove Default Blogger Css Bundle


First of all backup your template before doing this and make sure that you should know basic HTML and CSS code to fix messy code.
You can remove widget_css_2_bundle.css with this steps below :

Step 1: Go to Blogger Dashboard >> Template >> Edit HTML

Step 2: Click anywhere in between code editor and search for <head> tag and replace it with &lt;head&gt;

Step 3: Next search for </head> tag and replace it with &lt;/head&gt;&lt;!--<head/>--&gt;
Note : This is the best way because is not affect the variables or your template-skin if you use in your template.
Step 4: Save it.

OR

  • First off, backup your Blogger template. Now, edit your template's HTML and find <b:skin><![CDATA[ in the template.
  • Now, cut-paste and save all the CSS styles to a separate text file on your computer.
  • We are left with <b:skin><![CDATA[]]>. Replace this line with the below code block:
&lt;style type=&quot;text/css&quot;&gt;
&lt;!-- /*
<b:skin><![CDATA[
*/]]></b:skin>
  • Now comes the CSS part of our template that we have saved in form of a text file separately. Note, if you have Variable based CSS, you will have to copy each and every variable value to the relevant CSS block. For eg. $(body.text.color) in the CSS should be replaced with the value of <Variable name="body.text.color"... and so on.
  • Add your plain CSS code inside the style tags just below the CDATA modification we just did.
<style type="text/css">
..your CSS code goes here..
</style>
  • Finally, save the changes and reload your blog. You will observe that the Blogger CSS Bundle file is not affecting our CSS rules anymore - and that's what we were looking for! Hope it has helped someone.

How to Remove Default Blogger Css Bundle Using jquery library


Step 1: Go to Blogger Dashboard >> Template >> Edit HTML

Step 2: Click anywhere in between code editor and search for </head> tag and add below script
<script async src='//code.jquery.com/jquery-1.11.0.min.js' type='text/javascript'/>
Don't add this above code if you are already using any jQuery.js file
<script>
$("[href$='css_bundle.css']").remove();
</script>
Step 3: Save it.

So this was our guide on How to Remove Widget Bundle CSS file from Blogger, I hope the methods given above helped you in removing Widget Bundle CSS file.
Share it:

Blogger

Blogging

How To

Tutorial

Post A Comment:

0 comments: