Blogger has a little-known power feature for template designers: conditional tags. With conditional tags, you can show or hide gadgets on specific pages of your blog — an option you can use in lots of creative ways.
Today I'm going to show you how to use conditional tags to show or hide sidebar gadgets on any page of your blog.
Compatibility
Conditional tags work with all of the standard Blogger templates except Dynamic Views, which doesn't accept customization. Some third-party templates may not accept conditional tags (but most do!).
The technique in this tutorial works on all gadget types except the "Google+ Badge" gadget and the old "Followers" (Google Friend Connect) gadget. You can hide those two gadgets using the instructions in this post's Appendix.
Difficulty
This tutorial is for beginners, but it's easiest if you have a little bit of experience with editing your Blogger template.
If you'd like to brush up on Blogger template basics first, check out How to Use the New Blogger Template Editor.
All set? Let's get started!
First, Back Up Your Template
Before you begin, back up your template (instructions here). Do not skip the backup.
Find Your Gadget in the Template
Open your template by clicking the "Edit HTML" button beneath your "Live on Blog" screenshot.
Now, use the "Jump to Widget" dropdown button to jump down to your gadget. In this example image, I'm choosing the widget with the ID "Image1".
If you're not sure what your gadget's ID is, there's a quick way to find it.
While logged into Blogger, go to the main page of your blog and hover your cursor over the wrench icon at the bottom of your widget. When you do that, you'll see a URL appear at the bottom of your browser window in Firefox, Chrome, or Internet Explorer (Safari users will need to turn on the status bar under View > Show Status Bar).
Look for "Widget ID" in the URL.
The text between the equals sign in "WidgetID=" and the ampersand (&) is the widget's ID. Select that ID from the "Jump to Widget" menu to go straight to that widget's section in your blog's HTML.
Expand Your Widget
Now that you've found your widget, it's time to expand its code so you can insert the conditional tag.
Click the black arrows at the left of the widget's code to expand the code. Most widgets have at least one bit of code to unfold, some have 2 or 3. You can stop unfolding when you get to the closing </b:widget> tag of your widget and see that there are no more fold arrows above it.
Now that your code is unfolded, let me show you where to add the conditional tags.
Inserting Conditional Tags
No matter what conditional tag you choose, it goes in the same part of your gadget's code, so I'm going to show you placement first.
The opening conditional tag goes immediately below this line:
<b:includable id='main'>The closing conditional tag, </b:if>, goes immediately above this line:
</b:includable>Both lines are highlighted in this image:
Now that you know where to put your conditional, it's time to choose your tag!
Show Gadget on the Homepage Only
If you want to restrict a gadget to your homepage only, use this conditional.
Insert the following line below <b:includable id='main'>:
<b:if cond='data:blog.url == data:blog.homepageUrl'>Then, close the conditional by inserting this line above </b:includable>:
</b:if>Press the "Preview template" button. If you see an error message, double check your code and try again. Otherwise, press the "Save template" button to save your changes.
Show Gadget on the Homepage and "Index" Pages
The "Index" pages of your blog are the pages readers see when they click the "Older Posts" and "Newer Posts" links at the bottom of the page.
Insert the following line below <b:includable id='main'>:
<b:if cond='data:blog.pageType == "index"'>Then, close the conditional by inserting this line above </b:includable>:
</b:if>Press the "Preview template" button. If you see an error message, double check your code and try again. Otherwise, press the "Save template" button to save your changes.
Show Gadget on Post Pages Only
This will show the gadget only when your reader is on an individual post page (aka the permalink page). The gadget will be hidden from the home page, index pages, and static pages.
Insert the following line below <b:includable id='main'>:
<b:if cond='data:blog.pageType == "item"'>Then, close the conditional by inserting this line above </b:includable>:
</b:if>Press the "Preview template" button. If you see an error message, double check your code and try again. Otherwise, press the "Save template" button to save your changes.
Show Gadget on Static Pages Only
Static pages are the pages you make in the "Pages" section of Blogger — by default they show up in your top navigation, unless you've specified otherwise.
Insert the following line below <b:includable id='main'>:
<b:if cond='data:blog.pageType == "static_page"'>Then, close the conditional by inserting this line above </b:includable>:
</b:if>Press the "Preview template" button. If you see an error message, double check your code and try again. Otherwise, press the "Save template" button to save your changes.
Show Gadget on One Specific Page Only
This one's a bit of an oddball, but it could be handy! You can use a conditional to make a sidebar gadget appear one one specific page of your blog only, and nowhere else.
Note: I only recommend this conditional for blogs with custom domains. Blogs with .blogspot.com domains may have issues with this conditional on localized versions of the domain.
Insert the following line below <b:includable id='main'>:
<b:if cond='data:blog.url == "PAGE URL HERE"'>Replace "Page URL here" with the address of the page that should show the gadget. So for example, if I only wanted to show the gadget on my resources page, I'd write it like this:
<b:if cond='data:blog.url == "www.codeitpretty.com/p/resources.html"'>Then, close the conditional by inserting this line below above </b:includable>:
</b:if>Press the "Preview template" button. If you see an error message, double check your code and try again. Otherwise, press the "Save template" button to save your changes.
Reversing Conditionals
So, what if you want to set the opposite version of a conditional? Say, for example, you want a gadget to show up everywhere except the home page?
In that case, you'd replace the == in the conditional with != like this:
<b:if cond='data:blog.url != data:blog.homepageUrl'>(Gadget code here)
</b:if>
In this conditional, != stands for "is not", so you can think of the conditional as saying "if the URL is not the homepage URL, show the gadget".
