About Blogger Conditional Tags and How To Use Them Properly

Conditional tags provide us better control over our templates, allowing us to specify what part of our template appears only under certain conditions.

You may wish to hide a widget or element on one page and display it on the other, need to remove the sidebar on certain pages, or even display buttons on select pages. This is exactly where conditional tags come into play. There are a number of tags available for blogger which, if applied correctly, will help you modify elements of your template.

List of conditional tags

The following are a select few conditional tags you'll require the most:

1. Homepage:

<b:if cond='data:blog.url == data:blog.homepageUrl'>

2. First post:
For targeting the first post on multi-post pages.

<b:if cond='data:post.isFirstPost'>

3. Specific page/URL:

<b:if cond='data:blog.url == "ENTER_URL_HERE"'>

4. Posts (item):

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

5. Static pages:

<b:if cond='data:blog.pageType == "static_page"'>

6. Index pages (includes homepage, label pages and archive pages):

<b:if cond='data:blog.pageType == "index"'>

7. Archive pages:

<b:if cond='data:blog.pageType == "archive"'>

8. Posts and static pages:

<b:if cond='data:blog.url == data:post.url'>

9. Label-search pages:

<b:if cond='data:blog.searchLabel'>

10. 404 Error Page:

<b:if cond='data:blog.pageType == "ERROR_PAGE"'>

11. Mobile Pages:

<b:if cond='data:blog.pageType == "data:blog.isMobile"'>

How to Use conditional tags

Using conditional tags is simple. Each tag needs to be closed with a closing </b:if> tag. All you have to do is select the suitable tag and place the content between the opening and the closing tag like this:

<b:if cond='THE_CONDITION_GOES_HERE'>
...
</b:if>

For Example:
You need to display the content only on Index Pages (homepage, archives and labels page). The following tag will be applied:

<b:if cond='data:blog.pageType == "index"'>
...ENTER CONTENT HERE...
</b:if>

The double equals " == " actually means TRUE. You can change the condition to FALSE, then just replace the first equal with an exclamation sign: " != ".

Reversing a Condition:

Example:

<b:if cond='data:blog.pageType != "index"'>
... THE CONTENT ...
</b:if>

In the example above, the content will show up on all pages other than "index" pages.

The ELSE Statement <b:else/>:

In case you need to display alternate content, insert a <b:else/> tag like this:

<b:if cond='data:blog.pageType == "index"'>
...Content 1...
<b:else/>
...Content 2...
</b:if>

In the example above "Content 1" will only appear on Index Pages (homepage, archives and labels page), and if its not an Index Page, "Content 2" will be displayed.

Combining Conditions Together:

<b:if cond='data:blog.pageType == "item"'>
<b:if cond='data:blog.url != "URL_OF_POST_TO_EXEMPT"'>
...ENTER CONTENT HERE...
</b:if>
</b:if>

Finally, in the example above, the content will show up on all posts except a certain URL/Post specified.