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.

Step 1:

Find out the class or ID that can be used to address your gadget.

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:

<b:if cond='data:blog.url != "http://mylastaddresswasnotsonice.blogspot.com/"'>
<style>
#Text2{
display: none;
}
</style>
</b:if>

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:

<b:if cond='data:blog.url == "http://mylastaddresswasnotsonice.blogspot.com/p/static-page.html"'>
<style>
#Text2{
display: none;
}
</style>
</b:if>

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.

Next, look for the line that says ]]></b:skin>. Paste your conditional code directly below it. Mine looks something like this:

Click on 'Save Template' and voila, your gadget will only show/hide on the page that you define. Happy trying.