Hide Blogger Widgets Using Simple CSS Trick

CSS is amazing! While playing with codes I got this simple but very effective trick. Sometimes your post area (content wrapper) height and sidebar wrapper height don't match i.e. if you write small post then the sidebar section goes very down (because of widgets) as compared to content wrapper and then it looks ugly. That's why to deal with such simple but negative impacting problem I have discovered this trick, Currently I am using this trick on some static pages and on post pages also. If you want to watch this trick live on a static page then visit our Tools Page and if you want to see same same trick on post page then visit this post.

Watch these two images (click on any image to enlarge)

Before Applying Trick	After Applying Trick

Hope now you have got idea about this trick and how it is useful.

Watch This Trick Live In Action

On Post Page

On Static Page

How To Use This Trick?

1. In order to hide any widget you must know its widget ID first, to find widget ID of any blogger widget click here and note down them in Notepad.
2. I am going further assuming that you have got Widget IDs of widgets which you want to hide
3. Now sort out Posts or Static Pages on which you want to hide widgets
4. Open that Post/Page in Blogger Post Editor and move to HTML section
5. Lets say that you want to hide widgets having below Widget ID

HTML2, HTML4, HTML6 and HTML12

so that your CSS code to hide these widgets will be

<style>
    div#HTML2,
    div#HTML4,
    div#HTML6,
    div#HTML12 {
        display: none;
    }
</style>

Put your CSS code in HTML Section of Post Editor and preview your post, those widgets will no longer appear on screen :)

That's it.
Hope you guys will like this trick and don't forgot to share it if you find it useful :)
Cheers...