Learn How To Remove Widget Bundle CSS In Blogger?

Welcome back readers; this is over two weeks I'm not posting on this blog since my exam was running also i worked with some other blogs. Anyway today i come across a very important technical solution of blogspot template that i think you will prefer likewise me. Blogger default widget bundle css is one of common technical issues that creates a serious hinder when browsers access any blogspot blog. It takes about 60% extra load time of your entire blog since it's the default widget bundle and not possible to remove it form blogger templates xml format but it's possible to leverage.

Only a simple tweak can fix the problem and you need not be an expert coder to perform this action. As i decided these days to work with some crucial technical problems of blogger and this one is the extra sip of my next journey.

Why Blogger Default CSS Bundle Creates?

Blogger uses a default CSS stylesheet which works to apply styles on some particular official widgets widgets [The widgets we add from Dashboard → Layout using Add a Gadget link] such as Archive Lists, Label Tags, Popular Posts, Slideshow, Share Button, Comment Box, Contact Form and other stuffs you may check out from blogger official widget lists. However the default stylesheet is about 30-35kb (size on disk space) but it creates a tremendous block while browsers access any blogger hosted blog. Somehow it increases the page load time upto 60% of a regular blogspot blog [measured by Google Page Speed Insights]. 

Again we can leverage those default css coding but we can't remove the default stylesheet at all form our template. But there is only one hack is to reform that default stylesheet into a regular comment line that we use normally in web development purposes. See an example below

#1 The Default Blogger Widget CSS Bundle Appears on Blogspot Template

#2 Once We Apply Our Hack It Reforms Like This

So browsers accept it as a comment line and thus ignore its functionalities. So the page speed saves up to 60% of your entire blog also it improves mobile version interfaces.

How To Apply The Hack?

1. Go to Blogger → Template
2. Now Backup Your Template
3. Carefully Search for the following code

<b:skin><![CDATA[

4. Found it?  Now see, below this line <b:skin><![CDATA[ there remaining your entire blog CSS Stylesheet
5. Now simply replace <b:skin><![CDATA[ with below code

&lt;style type=&quot;text/css&quot;&gt;

&lt;!-- /*<b:skin><![CDATA[*/]]></b:skin>

<style type='text/css'>

Note: Make sure after this line <style type='text/css'> your blog entire CSS Stylesheet remians

6. Again search for ]]></b:skin>
7. Simply replace it with below code

</style>

8. Finally save your template and you're almost done!

Benefits You Got?

I applied another trick but i didn't get the answer finally this little twist made my problem solved and i think you all have applied it the way i distinguised.Generally blogger platform is designed such a way that only advanced users can play with it perfectly and make sure its ultimate uses which leads to the professionalism. Normally people hate about blogger when it comes to the comparison of CMS based platforms (WordPress, Joomla) since blogger includes very limited SEO settings and features [which is the first choice of any professional blogger], lacks of custom built widgets and plugins and lots more issues. 

Now we successfully solved one of the blogger template errors and i think it will help you because this little change will help you reducing page loadtime keep readers satisfied to get pages rendered fastest than earlier.

Peace and blessings chums :)