Southern Listeners

Sunday, October 31, 2010

Show/Hide Gadgets on a Specific Page

It's about time to write a general tutorial on how to do this. I have written few tutorials in the past that use this concept, but it was specifically made for the Archive gadget and so on. But the need to generalize this concept is there, so here it comes!

I am sure there are lots of ways to do this. I'm going to write a tutorial on how I do things.The idea behind this tweak is simple, conditional codes. But it is very important for you to know which element you want to apply the conditions on. Check out this brief tutorial first on how you can identify your elements' ID or Classes. To examine the element, I excessively use Firebug. Firebug is a useful Firefox add-on that allows you to examine CSS styling of a certain page element before you style it. As I said before, this is my way of doing it. I know you can find the way to address your page elements by going to your template and usually find it in the widget area, but Firebug saves a lot of time.

So let's get started. In this tutorial, I will apply a text gadget below my header. So by default, this gadget will appear on every single page. But I want it to appear only on the homepage, so here's how.

In the Image above, I have used Firebug to inspect my gadget. And my text gadget can be address by the ID 'Text2'.

Step 2:

In this step, we want to prepare our conditional code. First of all, you need to know the class or ID of the element that you want to address. We have already known this from our previous step. To show the text gadget only on our homepage, we should hide the text gadget in every other page except our homepage. This is the code that we will be using:

What the code implies is simple. In layman's term, it says, if the current address of the browser is not same as the address that is defined above in Line1, then execute the following command, which is to hide the element with ID 'Text2'. But if the current address of the browser is equal to the address that is defined in Line1, then do nothing.

So, if you've inserted your blog's URL in the first line, whenever you visit any other page, the element 'Text2' will be hidden. Simple right?

You might also be interested on how to hide a certain element from one particular page alone. Say I want my text gadget to be shown in all the pages, except for my static page. Then this is the command that I will be using:

In this case, the difference is '==' instead of '!=' in the above conditional code. In Layman's term, the code says, if the current address of the browser is same as the address that is defined above in Line1, the execute the following command, which is to hide the page element with ID 'Text2'. Otherwise, do nothing.

So this is how you can show or hide a certain gadget at a certain page. To hide only at one page, use '=='. To show only at one page, use '!='.

Minor note: The gadget above is addressed by its ID instead of class in CSS, so it is written as #Text2 in CSS. Say you want to address other page element, and instead of an ID, it is written class in Firebug, then you gotta use a dot (.) instead of a hash (#), some like this .Text2 in CSS. Usually a gadget is addressed by its ID, so hash (#) will do fine.

Step 3:

Now that we have prepared our conditional code, it is time for us to put it into action. But first, back up your template before making any changes. Then access your template's HTML.

Wordpress is more customizable than Blogger. I'm sure it is possible. But I'm pretty sure the method to specify these conditional tags won't be the same as above. I've not used wordpress before so I've not tried it. However, a simple google result yields some promising results, you might want to check it out.

I have a specific button/widget I want to make visible only on the homepage, and it's in the sidebar. I keep reading thru this (and maybe I'm just dense), but it's not clear to me where to drop the code for the specific widget (you made it very easy to figure out what the code should say, but I'm having a hard time figuring out where it goes).

Thanks so much for this tutorial! I managed to make it work - removing the sidebar from my interior pages. However, now I need to center the remaining content (or widen it) to fill the space left behind. Do you mind sharing advice on that as well? Thanks again, e

@Elizabeth: Sure thing. You just have to add few extra lines to the conditional code above, but it is totally template-dependant. If you could gimme your blog's address (particularly the address of the page that you want this done), I'll guide you from that point onwards.

You're amazing!. Ok. I'm still trying to get this. I confess, I'm reeel new at this.My template style: SimpleObjective: I want to hide side bar gadgets, on static pages; and use the "space" freed up by the hidden gadgets. I believe this might be same request as Elizabeth Dulemba up there on April13 post. I tried the following code, from one of your previous posts Dec. 28, 2010), but nothing changed. I must have goofed it up somehow. Home page gadgets still showed up on static page.

Hello, I am attempting to remove sidebars from all pages except the home page. I have tried a numerous amount of codes in different locations with no avail. Could you please help me. www.Custo-Minz.com (please let me know what other information is needed). I can provide my code if you would like.

@Bob: There should be two 'skin' instances, one is <b:skin>, and theother one is </b:skin>. You need to look for the second one. The best way to look for it is by pressing CTRL+F on your keyboard to invoke the search function on your browser, and then the rest is self-explanatory.

Hi YoboY, How do I display a gadget on the posts of a selected label only and not on any other page or static pages in blogger?

I mean, say I have a label 'music' and I want to display a particular gadget, say 'Text1', on all the posts under that label. The gadget should appear on the url '/search/label/Music' as well as on all the pages individually that have the 'music' label.

@Ranjan: This is an interesting question. I believe it can be done, but it is not something that I can share in comments. In a week or two, if I find the time, I promise I'll publish a tutorial on this to answer your question. Stay tuned.

hello, you have no idea how incredibly helpful you've been to me in my design process thus far, so thanks! I wanted to know if on a stand alone page (say for instance one titled "artwork") can I make my right side bar hidden. Essentially I want to edit the format of my stand alone pages to be blank except for the blog body (my posts). is that possible?

In the code above, replace XXX with your gadget ID. And the blog's address with your PAGE's address. Another thing. If your blog address ends with .in, don't use this in the code above. Use the original blogspot.com address. What's your blog's address anyways?

I'll have to look at your template when your linkwithin is on. Do you have a dummy blog where you can replicate this issue and get back to me? Or better yet, you could turn on Linkwithin in your main blog itself and let me know when it is back on, so that I can have a look.

1. Your blog is simple and easy to read - I like that in blogs. If I were you that only that I'd have changed is the padding in your posts - I'd add some gap between the border and the content/title, But hey, that's just me.

2. I see your Follow by Email and G+ follow gadget, that's good. It'll be easier for your readers to navigate to your previous posts if your Archive gadget were there.

3. Keep posting, and keep posting regularly. But take it from me, unless you're a full-time Blogger, getting a good Alexa rank is not entirely exciting once you're where you wanted to be..

4. Yes, of course :) It's easier to get your Adsense application approved if your blog is several months old, with a decent traffic/audience, and most importantly, constant and frequent post updates.

Quite the opposite actually, in my experience. But hey, there really isn't an exact science to page ranks - they keep changing the algorithms (panda - penguin - mockingbirds), and this is just Google (Yahoo, Bing and the others have their own algo). What determines the rank now might not be the decisive factor in the future. But you can safely assume that the traffic that you get to your blog will be a huge factor in deciding your page rank - and you'd want to make your blog as easy as possible to be navigated. Basically, you'd want users to stay in your blog for as long as possible, and for that, it'll be best to have links to your posts as much as possible (but not too much that it becomes absurd, if you know what I mean).. Then again, try experimenting. That's the best way to find out.

I'm not much of a third-party comment fan. I prefer to stick with Blogger's comment system (not the G+ one). I have not actually tried implementing ID in Blogger, but I'd think it is possible. I've seen Disqus comment being integrating in Blogger so I don't see why ID won't work.