Translate This Blog
Always Remember To Back Up Your Template Before Attempting Any Of The Tweaks On This Site

Do to error codes you should use the old interface when attempting many of these tweaks to your template

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.

33 comments:

  1. I tried to do this with a blogger gadget and it won't allow it to save- is there a way to get around this? It says that "the widget with id "Gadget2" cannot contain element: "b:if". A widget can only contain b:includable elements."

    ReplyDelete
  2. Send me a email through the contact option at the top of this blog with your blog URL and the segment of coding from that section you are trying to edit.

    ReplyDelete
  3. Hi I tried this and it works but is there a way to *kill the border on the top/bottom* as well? I have a widget with just links and need to make it show up only on the homepage only. Thanks.

    http://www.distressedvolatility.com is my blog

    ReplyDelete
  4. what if the code doesn't have ""???
    what should i do?

    ReplyDelete
  5. @jade I don't believe I follow you. What are you trying to find? ""??? what does that mean?

    ReplyDelete
  6. @dvolatilty Yes that is a issue I have recently noticed. However I have made a new post that can help with that problem. If you combined this method with the method on this link below you will be able to remove all traces of the element.
    http://www.tweakmyblogger.com/2010/10/different-layouts-on-different-pages.html

    ReplyDelete
  7. Hello there and thanks for this useful trick. I'm having trouble figuring out how to remove the spacing tho. Could you be more specific about what the CSS rule should look like and where we are supposed to type it?

    I'm trying to make it so that a given widget (HTML2) shows up only on a specific URL.

    I already tried the " #HTML2 { display: none;} " method but that seems to simply replicate the same results (hides the widget) without removing the spaces.

    Thanks for any help you could give. This spacing thing is driving me crazy! :D
    HTML2

    ReplyDelete
  8. Nevermind, I figured it out by myself :)

    This did the trick to me (only had to reduce the height)


    <-style>
    #HTML2 {margin: 0px 0px -23px 0px;}
    <-/style>


    (added - before style tag otherwise comment wouldn't go through ;))

    ReplyDelete
  9. Yes that works too! The display none should of worked although I have seen it fail at times. But I am glad you got this worked out on your own. As I said the Different Layouts post is basically a tutorial. The uses of it are endless. Each one of my Pages have LinkList gadgets in them. But yet you can see they do not display on the homepage. Out of all the tweaks on this blog I think the conditional tags are the best.

    ReplyDelete
  10. i try to do this with the archives widget so that i only shows up when someone clicks on the archives static pages
    but whenever i set it up like you say, it tells me

    The element type "b:widget" must be terminated by the matching end-tag "".

    how and where do i close it?

    thanks

    ReplyDelete
  11. Did you make sure to add the just above the . That is the closing tag.

    ReplyDelete
  12. you mean the ?
    ive added that.

    but the closing tag for the whole widget cant be found, although i didnt delete the widget closing tag...

    any idea? or am i understanding smth wrong?

    thanks for helping me out

    ReplyDelete
  13. Lol I just noticed that it did not post my message correctly XP. Why don't you send me a contact from the top of this blog so we can figure this out through email. This way I can we can post coding and not have it be deleted.

    ReplyDelete
  14. I am in the process of implementing hundreds of image post pages. I also have blog post pages. I want to have the widget hidden on the image post pages and visible on the blog post pages. Is there any way to do this without entering in every image page URL?

    ReplyDelete
  15. What do you mean by image post pages?

    ReplyDelete
  16. Sorry, it's nothing specific, just a post with a picture in it and no text. Image post page probably sounded like some kind of coding name or something, my bad. I just want the widget to show up in my posts that have text and not in the ones without any text.

    The widget is from linkwithin. It's the "You Might Also Like:" section on this page:

    http://www.neonjelloevangelist.com/2010/12/troll-2-omg.html

    I would like to make it so it doesn't show up on one of these "image" pages:

    http://www.neonjelloevangelist.com/2010/12/bone-me.html

    I was thinking I could maybe use some kind of date range? Is that possible? Or an if condition for greater than a certain date? I have used really old publish dates for the photo pages so they don't show up on the home page so that's why I was thinking the dates might work.

    Another option I thought of was using labels but I have no idea where to start with that.

    ReplyDelete
  17. I don't see anyways to do that without adding multiple conditional codes as you were trying to avoided. The date idea sounds like it might work but the date is not actually used within the blog its self unless you were to use it as a post feed option. But even then it does not have any connection to anything outside the post feeds. So you would not be able to control a element outside of the condition or at least that was the problem I ran into when I tested this a while back. However I will look into this matter farther and see if I can come up with a way to use dates as a condition to control the styles of the page.

    I might suggest asking GreenLava on this link below as well.

    http://www.bloggersentral.com/

    ReplyDelete
  18. Well, it works with the url option, so maybe I will just have to accept defeat and just copy and paste the code over and over replacing each URL. Thanks for you help though. Let me know if you figure out how to do this though.

    ReplyDelete
  19. I want to have the a Blog List gadget on/as a stand alone static page rather than in the sidebar. my problem is that I can't find the includable code marked in orange on your instructions.

    ReplyDelete
  20. Make sure you have the Expand Widget Templates box marked in the top right corner of the Edit HTML page.

    ReplyDelete
  21. So I figured out how to filter out pages based on labels. If you are going to do this, you will need to label all of your pages, not just the ones you are going to filter out. Also, if the label is "Photos" then make sure you capitalize the p. (I couldn't use < or > in the comment section so just add one at the beginning and end of each line.)



    b:includable id='main'

    b:if cond='data:blog.pageType == "item"'

    b:loop values='data:posts' var='post'

    b:loop values='data:post.labels' var='label'

    b:if cond='data:label.name == "LABEL GOES HERE"'

    widget code goes here

    /b:if

    /b:loop

    /b:loop

    /b:if

    /b:includable

    This worked wonderfully for a number of things that I wanted on certain types of pages without having to enter in hundreds of URL conditions. You can see it by going to one of my photo pages at:

    http://www.neonjelloevangelist.com/2008/01/intergalatic-cavity-search.html

    The "Previous Image" and "Next Image" as well as the adsense directly below them do not show up on my blog posts such as this one:

    http://www.neonjelloevangelist.com/2010/11/first-aid-and-other-ponderings.html

    ReplyDelete
  22. Wow!!! Excellent work I must say. Have you written this article for the first time? Or probably I may have read it for the first time. Whatever may be the case, all I wish to tell you is, that, you write too well man.

    ReplyDelete
  23. your gadgets are cool, how can i do that

    ReplyDelete
  24. Lol thanks! That is a lot of CSS coding in place. The code I am using to do so is shown below. Your template probably wont work the same.


    .column-left-inner .widget h2 {
    background: #8e8e8e;
    text-align: center;
    border-top-left-radius: 10px;
    -moz-border-radius-topleft: 10px;
    border-top-right-radius: 10px;
    -moz-border-radius-topright: 10px;
    border-bottom-right-radius: 5px;
    -moz-border-radius-bottomright: 5px;
    border-bottom-left-radius: 5px;
    -moz-border-radius-bottomleft: 5px;
    margin: 0px -10px;
    }
    .column-right-inner .widget h2 {
    background: #8e8e8e;
    text-align: center;
    border-top-left-radius: 10px;
    -moz-border-radius-topleft: 10px;
    border-top-right-radius: 10px;
    -moz-border-radius-topright: 10px;
    border-bottom-right-radius: 5px;
    -moz-border-radius-bottomright: 5px;
    border-bottom-left-radius: 5px;
    -moz-border-radius-bottomleft: 5px;
    margin: 0px -10px;
    }
    .column-left-inner .widget {
    background-color: #626262;
    border-top-left-radius: 5px;
    -moz-border-radius-topleft: 5px;
    border-top-right-radius: 5px;
    -moz-border-radius-topright: 5px;
    border-bottom-right-radius: 10px;
    -moz-border-radius-bottomright: 10px;
    border-bottom-left-radius: 10px;
    -moz-border-radius-bottomleft: 10px;
    padding: 0px 10px 10px;
    margin-left: -20px
    }
    .column-right-inner .widget {
    background-color: #626262;
    border-top-left-radius: 5px;
    -moz-border-radius-topleft: 5px;
    border-top-right-radius: 5px;
    -moz-border-radius-topright: 5px;
    border-bottom-right-radius: 10px;
    -moz-border-radius-bottomright: 10px;
    border-bottom-left-radius: 10px;
    -moz-border-radius-bottomleft: 10px;
    padding: 0px 10px 10px;
    margin-right: -20px
    }

    ReplyDelete
  25. great tips dude..i found your blog very helpful thanks for sharing

    http://technouniversityworld.blogspot.com

    ReplyDelete
  26. thanks alot bro!!!! been lookin 6 months 4 this!!!!!!!!!!!!!!

    ReplyDelete
  27. Thanks for the sharing such a great information.
    Actually I need such kind of information .

    ReplyDelete
  28. This blog is provide lots of good idea and your blog are very usefull for me.Thanks a lot.
    Regards:- http://www.callpills.com

    ReplyDelete

Web Design Blogs PageRank