An Amazing usage of Blogger Conditional Tags Why Should we use

Blogger Conditional Tags

Conditional tags in Blogger allows us to specify a specific part of your template on specific types of pages or specific URLs. By using the Blogger conditional Tags we can display a widget on specific pages. You can hide sidebar on some pages, apply a meta tag to certain page or whatsoever.

Blogger Conditional Tags

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.

Conditional Tag In Blogger

A conditional template tag in Blogger looks like as cited below.

<b:if cond='expression'>
    <!-- content when condition is satisfied -->
</b:if>

List of Blogger Conditional tags for page Types

Sr NO 1: Archive page

<b:if cond='data:blog.pageType == "archive"'>
<!--archive_Page-->
</b:if>

Sr NO 2: Error Page (404)

<b:if cond='data:blog.pageType == "error_page"'>
<!-- all error pages-->
</b:if>

Sr NO 3: Index Page

<b:if cond='data:blog.pageType == "index"'>
<!-- all index pages -->
</b:if>

Sr NO 4: Homepage

<b:if cond='data:blog.url == data:blog.homepageUrl'> 
<!-- only homepage -->
</b:if>

Sr NO 5: Item (post) pages

<b:if cond='data:blog.pageType == "item"'>
<!-- all item pages -->
</b:if>

Sr NO 6: Specific Post by URL

<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>

Sr NO 7: Label page

<b:if cond='data:blog.searchLabel'>
<!-- all label pages -->
</b:if>

Sr NO 8: Specific Label Page

<b:if cond='data:blog.searchLabel == "foo"'>
<!-- for label 'foo' -->
</b:if>

Sr NO 9: Search page

<b:if cond='data:blog.searchQuery'>
<!-- all search pages -->
</b:if>

Sr NO 10: Specific Search Query page

<b:if cond='data:blog.searchQuery == "foo"'>
<!-- for query 'foo' -->
</b:if>

Sr NO 11: Static page

<b:if cond='data:blog.pageType == "static_page"'>
<!-- all static pages -->
</b:if>

Sr NO 12: Specific Static page by URL

<b:if cond='data:blog.url == data:blog.canonicalHomepageUrl + "p/foo.html"'> 
<!-- a specific static page with name 'foo' -->
</b:if>

AND/OR/NOT In Blogger

Sr NO 1: AND + Cacatinate

<b:if cond='data:blog.pageType == "index"'>
  <b:if cond='data:blog.searchQuery'>
    <!--search_page AND index_page-->
  </b:if>
</b:if>

Sr NO 2: OR OR <b:else>

<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>

Sr NO 3: Not

<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.

Useful Application with Conditional Tags

• Display widgets on specific pages


• Applying different styling to static pages


• Adding FB meta tags and Twitter Card tags


• Load JS on specific pages


• Optimize Blog Title for SEO

If you have any queries or feedback, do have your say in comments.