Hide Widgets/Gadgets

Normally by default your gadgets will show on every page in your blog. But with this tweak you can dictate the page the gadgets will display on.

I used to use a code similar to what you would find on other tutorial sites with this same tweak but I noticed a flaw in that method. The problem was even with the tweak in place a small amount of the gadget still remained. Although the problem was only noticeable in some templates, I changed my tweak to compensate for this issue. This method is a little more complex then the other methods but it was the only way I could fully remove the gadgets.

1. Locate The Widget/GadgetID# (Remember this for later)
2. Go to Design-->Edit HTML
3. Click Ctrl+F
4. In the Find bar that pops up, input  </head>
5. Just above the </head> tag in your template place your Conditional Tags codes.

Depending on which condition used, you may end up with something like this below.

(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 Orange text with this code below.

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

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

After your 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>

 Their is one issues with doing it this way. If your 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 it. In most cases this is unnoticeable and not a problem. If you do want to remove this as well then you can continue reading farther.

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 just as you see it below into your previous code you just made.

<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.

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