How To Get Complete Control Over Blogger Official Widgets?

As you know, Google is a giant company. It is more than just a simple, search engine. There are Google Cars, Google Android, Google Nexus, Google Play Store, Google Newsstand and the most important for us, Google Blogger along with Google Drive (it help us to host various files).

Now, Google also have some restrictions and some things which work for people but can be a headache for developers. Today, we are going to talk about the same issue.


As you know, Google have injected various default widgets in Blogger. For example, Contact Form, Popular Post Widget and Label Widget. Google, sadly have injected one more thing- their default theme. Sadly.

If you are unable to get me, see the image I have inserted below:

In the left picture, I have screenshoted an image of Blogger's Default Contact Form which already has a theme which is out of control and hard to customize by CSS and in the other side, I have inserted an image which is in full control, without any theme; you can give any color, any theme, any background and any effect you want without overwriting the previous theme (because there's no theme for it!).

You must have listened about the Blogger's Default CSS Bundle. Generally, if you ask, then these are in the form of two links which have some text inside it. But, have you ever wondered what's inside it? Here, let me tell you.

What Is "Blogger's Default Widget CSS Bundle"?

Have you ever wondered that from where the Official contact form has got the blue color on its button? Or the shadow effect in it on click? I know, you haven't ever put any code related to it in your template. So, from where they came?

Hey, let's not talk about the Contact Form widget. Let's talk about comments. Tell me, from where the Blogger default comment got it's default design when you haven't put any code inside your template? Here, let me tell you.

Blogger's Default Widget CSS Bundle is a minimalized file which is the bundle of the default blogger's widget themes. The widgets get their default theme by this file. This file, commonly contain the theme for the following widgets:

1. Widget Wrapper
2. Contact Form
3. Comments
4. Popular Post Widget
5. Label Widget
6. Blog Archieve Widget
7. Google Custom Search Box
8. Blog Pager
9. Post Body
10. WikiPedia Widget
11. Share Widget (Blogger's Default)

And you know what? This doesn't matter if you don't have any of the widgets enabled in your blog. But, the CSS of all the widgets will still load. Well, this file loads within a jiffy but, as we had already told you that the more the HTTP requests a blog will require to load, the more the loading will take time. The main problem is, it adds one more HTTP request that drastically decrease your blog's loading speed. The second thing is, why load the CSS files of the widgets you don't want? And, do you know? You can get full control over the widgets of Blogger if you remove the Blogger's Default Widget CSS file.

See the picture below of our contact page:

I simply did it by just removing Blogger's Default Widget's CSS file and then customized it in my way using CSS. This was an example of how the limits gets removed once you eliminate those files or CSS bundle.

So What About The Three Disadvantages?

Long time ago, we had published a post about the three disadvantages of removing the Blogger Default Widgets CSS Bundle, and three disadvantages were:

1. Messed Up Layout Tab: I mean the structure of the "Layout" tab in your blogger dashboard will get disturbed. [FIXED]
2. Blogger Default Widgets Will Look Ugly: They will look ugly because the default theme will get vanished. But, we are, this time, removing to do the same!
3. Variable Definitions Will Stop Working: This was a problem which has now been fixed.

[info headline="Please Note That..."]If you are going to follow this post and get its benefits, then you should have some knowledge about the programming of CSS. If you don't know any thing about CSS, then sorry buddy, this post is not for you and it's better for you to not follow it.[/info]

How To Remove Widget CSS Bundle? [The Fixed Version]

You can find thousands of post about the usual way of removing the widget CSS bundle. Thanks to Technohalf for searching and posting about the new method that fixes the issue with Variable Definition and do the work without messing up the layout tab. Here's the way to do it:

• Go to Blogger > Template > Edit HTML
• Now search for <head> (will be usually at the top of the template codings) and replace it with the following code:

&lt;head&gt;

• Now, search for </head> and then replace it with the following code:

&lt;/head&gt;&lt;!--<head/>--&gt;

• Now save your template.

Reload your blog and then see the source code. You will find that the two links have been changed into comments which will be ignored by the browser while looking for resources.

Note: If your archieve widget is not working, then try this fix.

You Got The Control + Increase In Page Loading Speed!

Now, all the default themes have been vanished from the Blogger's widgets and now you may do and customize the widgets in the way you want. You have unlocked all the restrictions and got full control over the visibility of widgets. Congratulations!

One more thing you have got; which is, a little boost in your page loading speed and an increase in your pagespeed score.

Note: - To get the things as normal, just follow the step inversely.

Last Words

I hope this post helped you a lot in changing the look of your blog. This change will also make you able to make difference between Blogger blog and your blog (because the different styles of widgets). I hope you will share this post in your social network to help others to about this post. Take care, Thanks!

Share this post