How to Hide Widgets Gadgets in Blogger

By default your widgets/gadgets will show on every page in your Blogger blog. If you don´t want that you can use this neat little tweak to dictate the page(s) the gadgets will display on.

I used to use a code similar to the one you will find on other tutorial sites with this same tweak, but then I noticed a flaw in that method. The problem was that, even with the tweak applied correctly, a small amount of the gadget still remained. Although the problem was only noticeable in some of the templates, I decided to change the tweak to remedy this. My method is a little more complex then other methods but it is the only way I could find to fully remove the gadgets.

1. Locate The Widget/GadgetID# (Remember this for later) [For instructions on how to do this go to the bottom of this article.]

2. Go to Design --> Edit HTML.

3. Search for (Ctrl+F) 

  </head>

4. Just above the </head> tag in your template place your Conditional Tags codes.

5. Depending on the condition you used, the code you created will look something like this: (In this example we will dictate the styles only on the homepage.)

<b:if cond='"data:blog.url == data:blog.homepageUrl"'>
<style>
<--CSS rules to be displayed on homepage only -->
</style>
</b:if>


6. Replace the blue text with the following code:

#Widget/GadgetID# {
display: none;
position: relative;
bottom: 99999px;
}

7. Replace the red text with the Widget/GadgetID# you attained in section 1.

When you´re done it should look something like this:

<b:if cond='"data:blog.url == data:blog.homepageUrl"'>
<style>
#HTML1 {
display: none;
position: relative;
bottom: 99999px;
}
</style>
</b:if>

There is only one small issue with doing it this way. If you´re using a homepage conditional tag then it will remove the gadget from your Page Elements as well. You can however edit the gadget if you need to from the tools on your site on the pages it still displays on.

Even with this method you may end up with a little spacing issue from the gadget directly below the one that is no longer displayed In most cases this is unnoticeable and not a problem. If you do want to remove this as well then keep on reading.

To remove the spacing issue you just need to add in a CSS rule for the gadget below it as well.

Optional Steps:
1. Locate the Widget/GadgetID# for the gadget directly below the gadget you just hid.

2. Place the colored code into the code you just made. This needs to be done exactly as shown below:

<b:if cond='"data:blog.url == data:blog.homepageUrl"'>
<style>
#HTML1 {
display: none;
position: relative;
bottom: 99999px
}
#Widget/GadgetID# {
margin-top: -10px;
}
</style>
</b:if>


3. Replace the orange code with the Widget/GadgetID# you just attained in section 1 of the optional steps.

P.S.: You may have to adjust the green text to get the spacing just right.

How to Locate Widget/Gadget IDs

A. Go to Design --> Page Elements.

B. Click the Edit Option on the Widget/Gadget.

C. Once the Widget/Gadget Opens you should see something like this:

The section in red is the Widget/Gadget ID#.

For the gadget here the ID is LinkList1.

This is case sensitive, so copy it just as you see it.

That´s all!

Good luck!