Wednesday 13 November 2013

Remove Default Widget Bundle CSS From Blogger

Important: All scripts hosted on widcraft.googlecode.com don't work anymore because Google has blocked that SVN repository.
If you're a Blogger template designer, then this article is very very helpful for your future designs. If you're a designer, then you probably know about two default Blogger stylesheets- widget_css_bundle.css and widget_css_2_bundle.css. Becaue they make it more diffecult for you to design your template.

Blogger automatically adds the following code in your Blogger template:

<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' />

So it's time for your to remove there stylesheets from your Blogger template. If you don't know above there stylesheets, then don't follow this tutorial. Removing this code maybe can make your template destroyed, if you use official widgets from Blogger.

We are not really removing this code from our template, but this trick will make that code ignored by your browser. This tutorial is just converting that code to HTML comments, thanks to Damzaky for this trick.

  • Open Blogger > Template > Edit HTML, proceed, then CTRL+F this code: <b:skin><![CDATA[
  • If you have found that code, in below that code you may found your CSS, so just copy all the CSS to a notepad or anywhere because we need this code later in this tutorial.
  • Then the remaining code is  <b:skin><![CDATA[    ]]></b:skin>
  • Replace above code with following:

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

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

  • Then post following code just above the </head> of your template:

<style type='text/css'>

YOUR CSS FROM NOTEPAD

</style>

  • In above code, replace the YOUR CSS FROM NOTEPAD from all CSS from your notepad that we copied earlier.
  • Save your template.

That's it.
Important: Check our new website TricksPanda.com for WordPress tutorials, plugins and more.
 
Powered by Blogger.