 |
| The Ultimate Guide to Using Blogger Conditional Tags |
The Ultimate Guide to Using Blogger Conditional Tags for Dynamic Page Customization
If you're working with complex Blogger templates, you'll likely be using these conditional tags extensively. In this blog post, we'll explore the different types of conditional tags available and provide examples of how you can use them in your own templates.
Whether you want to show or hide content based on specific page types, URLs, or other criteria, mastering conditional tags can help you tailor your website's appearance and functionality to meet your unique needs. So, let's dive in and start learning how to take full advantage of these powerful tools!
A conditional template tag in Blogger looks like the 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 alternate content (when the condition is false), you need to insert a <b:else/> tag followed by 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.
Blogger Conditional Tag Wrapper Tool
Use this tool in order to simplify wrapping conditional tags. All you have to do is copy and paste the code into the field provided. Then choose the condition and click the "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 the template, use the "Encode & Wrap" button.