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
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…!!!
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.
<style type="text/css"><!-- /*<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…!!!
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.
Very Nice Article Hassan….My Blog will now load faster.
My recent post:Skillbar!! A Premium Floating Bar For Blogger
Welcome Here And Thanks For Liking Our Article, Be With Us To Get More…
Dear please tell me is it safe? Means will our blog keep safe after removing blogger official CSS?
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…
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.
Welcome Here And Thanks For Visiting Us, Be With Us To Get More Tricks Like This..
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.
Thanks For Visiting And Trying, Kindly Leave Your Blog URL So We Can Check Whats Is Still Showing In Mobile Version…
Best tips, thanks you so much 🙂
Welcome Here And Thanks For Liking Our Tips. Be With Us To Get More Like This…
brother i not understand step 7 and 8 please urdu me samjaiye
Find <b:skin><![CDATA[ And Replace It With <style> And Find ]]></b:skin> And Replace It With </style>
Then Add Step7 Code Before </head> Tag
i do it but after save change my all blog design
If You Will Use Our Template Then You Dont Have To Do This As We Already Did This Is All Of Our Templates.
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…!!! :)))
Yes, You Are Right Because Some Template Use Blogger CSS Code So After Deleting It Without Checking Can Make Your Blog Messed Up…
wad is dis post? who postd dis? http://damzaky.blogspot.com/2013/09/how-to-remove-blogger-css-reset.html?showComment=1418570727347#c3446061297304530606
You are copying our pots. See the time of posting…
how to disable for mobile version?
You can control your blogger mobile template from Blog Mobile Template Setting For Blogspot/Blogger.
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 ?
Send us your template XML file at our email so we will see it live there.
help me to bloc this
https://www.blogger.com/…widgets/1943648796-widget_css_bundle.css
https://www.blogger.com/…&zx=dd5ef423-8148-436d-885a-56a6e309d675
Copy All The CSS Of First File And Add It Internally…
Thankss!
These codes always appeared in PageSpeed Insights as a reduction in loading speed. Now it’s a little better… 🙂
Welcome here and thanks for liking our article. Stay with us to get more like this…
Yes, now I able to remove official blogger.. Thanx for this tutorial… Cheers!!!
Welcome here and thanks for following our article.
Thanks Hasan, Your articles are awesome (y)
Welcome here and thanks for reading our article.
Yeah, exeideas, that tutorial worked sucessfully without any problem. thanks,,
Welcome here and thanks for reading our article and sharing your view.
Thanks for your solution I used your solution my blog speed increased from 81% to 87%
Welcome here and thanks for reading our article and sharing your view.
Yah bro nice tutorial it’s working. But also suggest me which color code is best to create my blogger template.
Welcome here and thanks for reading our article and sharing your view.
I implemented it but am getting this error code XML error message:
The character reference must end with the ‘;’ delimiter.
Can you mention the line and code on that line?
Nice information, Great Post to Learn something new…
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.
Thanks for the information. This really helps to improve blog speed.
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.