Jul 29, 2016

Remove Default Widget Bundle CSS from Blogger Template

data:blog.title
Are you trying to remove blogger's default widget from template? Don't worry, now you are on right platform because in this post we are going to share How To Remove Default CSS Bundle Widget from Blogger Template? Actually, The important thing is that you cannot permanently remove Widget CSS bundle file only you can commented out so that it just ignored by the browser and make webpage load faster. Before learn this trick we should have to know about these CSS bundle widget. So let me explain first.

Remove Default Widget Bundle CSS from Blogger Template

What Does the default Blogger CSS Bundle do?

The function of this file is to reset CSS styles according to the Blogger standards. The file carries the default, predefined Navbar styles, Blogger share buttons CSS, and many more besides utility classes like .clear, .widget etc.

Developers sometimes want to get rid of this default CSS file to make their templates more flexible in terms of custom assets, design responsiveness, etc. This tutorial post is all about removing or disabling the Blogger CSS bundle with least possible edits.

This is the exact code carrying that default Blogger CSS I found in my blog’s source code:

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

What is Bundle CSS Widget in Blogger?

Widget CSS Bundles is a default stylesheet for all the widgets we apply from the layout section, so one cannot remove it like this only, as its secured internally. But we have a hack around that can help you in removing these CSS bundles hence making your blogger blog a lot faster. So to check these CSS stylesheet you can right click and see these two CSS styles like in the below image.

CSS Bundle Widget, Working CSS Bundles of Blogger


After we apply the hack, we are going to convert these two CSS link into normal comments line hence they won't get loaded and you will get a speed boost. Check the below screenshot.

Removing CSS Bundles Widget, How To Remove CSS Bundles from Blogger





Now move on and learn How To Disable, Hide or Remove Default CSS Bundle Widget from Blogger Template?

How To Remove Default CSS Bundle Widget from Blogger

  • Open Blogger >> Template >> Restore >> Download a Backup copy of your Blogger Template.
  • Now Go to Template >> Edit HTML.
  • Press CTRL+F and search for below code :
<b:skin><![CDATA[

  • Now simply replace the above searched code with the below one.


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

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

<style type='text/css'>

  • Once again search for below code:
]]></b:skin>

  • Now again replace the above searched code with the below one.
</style>
  •  Now its pretty much done, press the Save Template button and see your result by right refreshing your blog, right clicking and looking inside the page source.
You should be able to see the links changed into those comments line, so it means it worked, now try to check your page speed and you will find huge decrease in the load time, hence increase in ranking.

What If Template Messed Up?

If your template got messed up after you applied the above hack, then its normal as few CSS styles are removed that why the styling is messed up, so either you reverse the hack or if you have a good CSS knowledge then you can simply check the affected widgets and apply CSS styling for that specific widget easily.

Conclusion:

So above guide is about How To Remove Default CSS Bundle Widget from Blogger Template and we hope by this complete guide you can easily understand how to remove it and what is the work of default CSS Bundle in blogger. Hope your blog loading speed increased after doing this job. Hope you like this article. Don't forget to share on blogging communities and on your social networking profiles.
Thank You!

No comments:

Post a Comment

We’re eager to see your comment. If you have any query related to the topic then drop a comment below. We will help you out of sure. However, Please Keep in mind that all comments are moderated manually by our human reviewers. According to our comment policy all link are nofollow so keep in mind that never use links in comments, we consider link comments as a spam.