Blogger Conditional Tags for different page types - Ultimate Blogger Guide

Blogger Conditional Tags for different page types

Conditional template tags in Blogger template allows you to specify a part of your template code on specific types of pages or specific URLs.

One practical application could be to display a widget on specific pages. You can hide sidebar on some pages, apply a meta tag to certain page or whatsoever.

Complex Blogger templates make large use of these conditional tags. In this post, I'll show you the possible conditional tags and their example usage.

Blogger Conditional Tags for different page types - Ultimate Blogger Guide

A conditional template tag in Blogger looks like following

<b:if cond='condition_expression'>

    <!-- content when condition is satisfied -->

</b:if>

List of Conditional tags for page types

1.Index Page Condition Code

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

<!-- all index pages -->

</b:if>

2.Item (post) pages Conditon Code

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

<!-- all item pages -->

</b:if>

3.Homepage Condition Code

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

<!-- only homepage -->

</b:if>

4.Static page Condition Code

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

<!-- all static pages -->

</b:if>

5.Archive page Condition Code

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

<!--archive_Page-->

</b:if>

6.Error Page (404) Condition Code

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

<!-- all error pages-->

</b:if>

7.Label page Condition Code

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

<!-- all label pages -->

</b:if>

8.Specific Label Page Condition Code

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

<!-- for label 'foo' -->

</b:if>

9.Search page Condition Page

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

<!-- all search pages -->

</b:if>

10.Specific Search Query page Condition Page

<b:if cond='data:blog.searchQuery == "foo"'>

<!-- for query 'foo' -->

</b:if>

11.Specific Post by URL Condition Page

<b:if cond='data:blog.url == data:blog.canonicalHomepageUrl + "2014/08/foo.html"'> 

<!-- a item page from august 2014 with post-title 'foo'-->

</b:if>

12.Specific Static page by URL Condition  Page

<b:if cond='data:blog.url == data:blog.canonicalHomepageUrl + "p/foo.html"'> 

<!-- a specific static page with name 'foo' -->

</b:if>

AND/OR/NOT

1.AND Blogger Condition Code

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

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

    <!--search_page AND index_page-->

  </b:if>

</b:if>

2.OR Blogger Condition Code

<b:if cond='data:blog.url == data:blog.canonicalHomepageUrl + "p/foo.html"'> 

  <!-- static_site foo OR static_site bar -->

      <b:else/>

<b:if cond='data:blog.url == data:blog.canonicalHomepageUrl + "p/bar.htm"'> 

  <!-- static_site foo OR static_site bar -->

   </b:if>

</b:if>

3.NOT Blogger Condition Code

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

  <!-- all pages except item pages -->

</b:if>

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

  <!-- all pages but NOT homepage -->

</b:if>

How to Use conditional tags

To apply a conditional tag to some content, simply put the content inside the opening <b:if cond…> and the closing </b:if> like:

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

    # THIS CONTENT WILL BE EXECUTED IF CONDITION IS TRUE

</b:if>

In the example above, the content will only appear on post pages.

The content can be a div, a section, a style tag or another conditional tag etc.

If you want to specify a alternate content (when the condition is false), you need to insert a <b:else/> tag followed by the content, like this:

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

    # THIS CONTENT WILL BE EXECUTED IF CONDITION IS TRUE

    # i.e. if current page is post (item) page

<b:else/>

    # THIS CONTENT WILL BE EXECUTED IF CONDITION IS FALSE

    # i.e. if not post page

</b:if>

The <b:else/> also works like an OR operator as explained above.