Conditional tags
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.
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
Archive page
<b:if cond='data:blog.pageType == "archive"'>
<!--archive_Page-->
</b:if>
Error Page (404)
<b:if cond='data:blog.pageType == "error_page"'>
<!-- all error pages-->
</b:if>
Index Page
<b:if cond='data:blog.pageType == "index"'>
<!-- all index pages -->
</b:if>
Homepage
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<!-- only homepage -->
</b:if>
Item (post) pages
<b:if cond='data:blog.pageType == "item"'>
<!-- all item pages -->
</b:if>
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>
Label page
<b:if cond='data:blog.searchLabel'>
<!-- all label pages -->
</b:if>
Specific Label Page
<b:if cond='data:blog.searchLabel == "foo"'>
<!-- for label 'foo' -->
</b:if>
Search page
<b:if cond='data:blog.searchQuery'>
<!-- all search pages -->
</b:if>
Specific Search Query page
<b:if cond='data:blog.searchQuery == "foo"'>
<!-- for query 'foo' -->
</b:if>
Static page
<b:if cond='data:blog.pageType == "static_page"'>
<!-- all static pages -->
</b:if>
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
AND
<b:if cond='data:blog.pageType == "index"'>
<b:if cond='data:blog.searchQuery'>
<!--search_page AND index_page-->
</b:if>
</b:if>
OR
<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>
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.
Example Applications
- 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
Blogger Conditional Tag Wrapper Tool
Use this tool in order simplify wrapping conditional tags. All you have to do is copy paste the code into the field provided. Then choose the condition and click "Wrap" button. It's that simple. No more hunting down for Blogger conditionals!
If you need to encode your code, for example, in order to embed AdSense code in template, use "Encode & Wrap" button.
Blogger Conditional Tag Wrapper Tool
If you have any queries or feedback, do have your say in comments.
