How To Remove/Hide Blogger Official CSS In Your Custom Template?

I just tried to create some template like Pre-Black or Gray-Mania  pro-blogger but when I finished and will checked it on online load time checker site, they just inform me that there is a css file of 75kb and is not under your use but still loading and increasing your load time that is against SEO then I just started to remove it but on first look there is no file link in blogger template because the just coded it in a secure way but we are here. :-)

I will share this trick now with you too and is very helpfull to you if you want to design a custom template of blogger, 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.

There are officially two css from the house of blogger that is around 70-80kb/file that mean it's too heavy and will increase your blog load time because it contain all css of widgets or anything else that you even didn't use or will not use because it's a default file and have to contain all css codes because they didn't know what will you add in your blog so they just mix up all css.

Official CSS Of Blogspot URLs:

• <link type='text/css' rel='stylesheet' href='//www.blogger.com/static/v1/widgets/1937454905-widget_css_bundle.css' />
• <link type='text/css' rel='stylesheet' href='//www.blogger.com/static/v1/widgets/4219271310-widget_css_2_bundle.css' />

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.

Features:

1.) Simple But Effective Code.
2.) Easy To Use And Quick To Load.
3.) Will Remove Blogger Official External CSS Files.
4.) It Will Help The Blog To Quick The Load.
5.) It Will Convert CSS File Code In HTML Comment.

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.....

How To Hide Blogger CSS?

1.) Go To Your www.blogger.com
2.) Open Your Desire Blog.
3.) Go To "Edit HTML".
4.) Click In Blogger Code Box And Press [CTRL+F] To Find "<b:skin>".
5.) Now Copy All The CSS Code From "<b:skin>" To "</b:skin>".
6.) Add Then The Remaining Code Will Be "<b:skin><![CDATA[ ]]></b:skin>".
7.) Replace The Above Code With Below One.

&lt;style type=&quot;text/css&quot;&gt;&lt;!-- /*<b:skin><![CDATA[*/]]></b:skin>

8.) Then Add The Below Code And Add Your Copied CSS Here.

<style type='text/css'>
YOUR CSS COPIED FROM ABOVE
</style>

9.) Then Save Your Template.
10.)You're Finished...!!!

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 success and now your blog are free from external css files links that can make your blog loading time up..