How to remove blogger CSS reset stylesheet (widget bundle)

I will share now, share what?, the trick for remove the CSS reset stylesheet in blogger. Maybe if you don't know about this code, you may not so like this article, but if you're understand many blogger code, you may think this article is very-very helpful. But why many peoples want to remove this code from HTML?, because, this is a CSS reset code of blogger, and if you're template designer, you may hate this code, because it's make multiple CSS and crashing CSS code. If you're not understand about blogger code, don't follow this tutorial!.


How to remove <link type='text/css' rel='stylesheet' href='//www.blogger.com/static/v1/widgets/1937454905-widget_css_bundle.css' /> in blogger?

How to remove <link type='text/css' rel='stylesheet' href='//www.blogger.com/static/v1/widgets/4219271310-widget_css_2_bundle.css' /> in blogger?

WARNING!

Removing this code maybe can make your template destroyed, if you use official widget from blogger, the style can be totally changed. If you're don't understand about this code, don't do this. This tutorial is ADVANCED tutorial, not recommended for newbie or intermediate coder.

Explanation

This tutorial is not real removing the code, but this tutorial is make that code is ignored by browser and not make blog CSS code replaced. It's simply this tutorial is just converting that code to HTML comments, why HTML comments?, HTML comments is ignored by browser, because that i just converting but not removing, and this tutorial can effecting page speed score in Gtmetrix.....

Ok now for tutorial.

Tutorial

1. Open blogger, edit HTML, and backup your template for safety.
2. Edit HTML, proceed, then CTRL+F this code: <b:skin><![CDATA[
3. If you have found that code, in below that code you may found your CSS (of course XD), now block from below that code to before ]]></b:skin>, or block all your CSS and CTRL+X, paste in notepad.
4. Then the remaining code is <b:skin><![CDATA[    ]]></b:skin>
5. Block that code and replace it with this code:
   &lt;style type=&quot;text/css&quot;&gt;
   &lt;!-- /*<b:skin><![CDATA[*/]]></b:skin>
6. Then below the replaced code, place this code:
   <style type='text/css'>
   
   YOUR CSS FROM NOTEPAD
   
   </style>
7. Then below the <style type='text/css'> that you placed below the ]]></b:skin>, paste your all CSS from notepad.
8. Then save template.
9. You're finish!

Checking

Open your blog, then CTRL+U,  if you found code like this:

<style type="text/css">
<!-- /*<link type='text/css' rel='stylesheet' href='//www.blogger.com/static/v1/widgets/1937454905-widget_css_bundle.css' />
<style id='page-skin-1' type='text/css'><!--
*/
--></style>

If you found that code in page source and all the color of that is black, it means the stylesheet link is ignored by browser and you're succes.

Or you can open http://www.gtmetrix.com then type your blog in the form, if the site finish checking, you may found the tab 'remove unused CSS', if you click, and you not found this code <link type='text/css' rel='stylesheet' href='//www.blogger.com/static/v1/widgets/1937454905-widget_css_bundle.css' /> , it means you're succes.....

That's all, special thanks to google group. I'll update later, if you have any question, send it with comments below....