LATEST >>

Welcome Here And Thanks For Visiting. Like Us On Facebook...

EXEIdeas – Let's Your Mind Rock » Blogspot / Blogspot Tricks » How To Remove/Hide Blogger Official CSS In Your Custom Template?

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

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

We are also designing Blogger template at Netzspot.Blogspot but when we started first then after designing, we 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 helpful 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.

Table of Contents

Recommended For You:
How To Add An Automatic Blog Label Thumbnail Slider To Blogspot?

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 Cut 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 CUT In STEP-5 ABOVE
</style>

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

Recommended For You:
How To Eliminate Render-Blocking JavaScript And CSS In Blogger?

Checking:

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

<style type="text/css"><!-- /*<link type='text/css' rel='stylesheet' href='https://www.blogger.com/static/v1/widgets/1535467126-widget_css_2_bundle.css' />
<link type='text/css' rel='stylesheet' href='https://www.blogger.com/dyn-css/authorization.css?targetBlogID=5450607496194797691&zx=6165f825-2905-4853-911f-bcb9820b8aff' />
<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.

You Like It, Please Share This Recipe With Your Friends Using...

42 Responses to “How To Remove/Hide Blogger Official CSS In Your Custom Template?”

  1. Deep Sinha says:

    Very Nice Article Hassan….My Blog will now load faster.
    My recent post:Skillbar!! A Premium Floating Bar For Blogger

  2. Ankit Kumar Singla says:

    Dear please tell me is it safe? Means will our blog keep safe after removing blogger official CSS?

    • EXEIdeas says:

      Yes, It’s Safe But Your Widgets And Template Will Be Messed Up Then You Have To Add There CSS Again In The Style Tag. This Features Is For Custom Template Designers…

  3. Hemant Verma says:

    Bro i was looking for it since 3 months and i found it here at your blog it’s nice and very awesome.

    Visit My small blog Widget Generators

    Keep Posting like this.

  4. Nate Chambers says:

    This works for except for the mobile version, the two .css style sheets from blogger still show up. Do you have a trick that works for making the mobile work. This is why I did this trick in the first place, to speed up mobile load times.
    Love and Light and Keep Bright.

  5. Binh Phan Duc says:

    Best tips, thanks you so much 🙂

  6. iliyas shaikh says:

    brother i not understand step 7 and 8 please urdu me samjaiye

  7. Super post!!! we can first remove the CSS by using the Google console box in browser and if the site remains same then we can proceed for removing it permanently…!!! :)))

    • EXEIdeas says:

      Yes, You Are Right Because Some Template Use Blogger CSS Code So After Deleting It Without Checking Can Make Your Blog Messed Up…

  8. LabLance says:

    how to disable for mobile version?

  9. Om Nagib says:

    Hi mister Admin, could you please help after I followed your guide, and I get this message every time I save the template; Error parsing XML, line 2420, column 7: The element type “head” must be terminated by the matching end-tag “”. What could be wrong ?

  10. Fabíola de Andrade Borges says:

    Thankss!
    These codes always appeared in PageSpeed Insights as a reduction in loading speed. Now it’s a little better… 🙂

  11. Dhruv tiwari says:

    Yes, now I able to remove official blogger.. Thanx for this tutorial… Cheers!!!

  12. Muhammad Nouman Khalid says:

    Thanks Hasan, Your articles are awesome (y)

  13. Sunny says:

    Yeah, exeideas, that tutorial worked sucessfully without any problem. thanks,,

  14. Thanks for your solution I used your solution my blog speed increased from 81% to 87%

  15. Yah bro nice tutorial it’s working. But also suggest me which color code is best to create my blogger template.

  16. Omeh says:

    I implemented it but am getting this error code XML error message:
    The character reference must end with the ‘;’ delimiter.

  17. Priya Patel says:

    Nice information, Great Post to Learn something new…

    • EXEIdeas says:

      Welcome here and thanks for reading our article and sharing your view. This will be very helpful to us to let us motivate to provide you more awesome and valuable content from a different mind. Thanks again.

  18. Wong says:

    Thanks for the information. This really helps to improve blog speed.

    • EXEIdeas says:

      Welcome here and thanks for reading our article and sharing your view. This will be very helpful to us to let us motivate to provide you with more awesome and valuable content from a different mind. Thanks again.

Leave a Reply

Your email address will not be published. Required fields are marked *