Blogger Conditional Tags Tutorial: Boost Your Blog's Functionality 2025

Using Conditional Tags in Blogger: A Beginner's Guide

To take your Blogger site to the next level, you'll want to learn about conditional tags. These tags allow you to control the content that appears on your site based on specific conditions.

What are Conditional Tags?

Conditional tags are a type of Blogger tag that starts with <b:if cond> and ends with </b:if>. They allow you to specify conditions under which certain content will appear on your site.

How to Use Conditional Tags

To use conditional tags, you'll need to have a basic understanding of HTML. Here's a step-by-step guide:

1. Start with the opening tag: <b:if cond='condition'>
2. Specify the condition: Replace 'condition' with the specific condition you want to check.
3. Add the content: Add the HTML, style, script, or widget content that you want to appear if the condition is true.
4. Close the tag: </b:if>

Examples of Conditional Tags

Here are a few examples of how you can use conditional tags:

- Show content only on the homepage: <b:if cond='data:blog.homepageUrl == data:blog.url'>

- Display content only on specific pages: <b:if cond='data:blog.pageType == "static_page"' >

- Show content based on user login status: <b:if cond='data:blog.isPrivate'>

Example:

<b:if cond='your condition'>
 <style>...css code...</style>
 <script>...javascript code...</script>
</b:if>

Part 1. Condition Tags

1. Homepage

<b:if cond='data:view.isHomepage'>
  <!-- The conditional Element To Execute -->
</b:if>

Old version:

<b:if cond='data:blog.url == data:blog.homepageUrl'>
  <!-- The conditional Element To Execute -->
</b:if>

2. Item Pages

<b:if cond='data:view.isPost'> 
 <!-- The conditional Element To Execute -->
</b:if>

Old version:

<b:if cond='data:blog.pageType == "item"'> 
 <!-- The conditional Element To Execute -->
</b:if>

For a specific article page:

<b:if cond='data:blog.url == data:blog.canonicalHomepageUrl + "2018/01/postn.html"'>
  <!-- Add content for post your-domain/2018/01/postn.html-->
</b:if>

3. Static page

<b:if cond='data:view.isPage'>
 <!-- The conditional Element To Execute -->
</b:if>

Old version:

<b:if cond='data:blog.pageType == "static_page"'>
 <!-- The conditional Element To Execute -->
</b:if>

4. Index pages (home, archive, label, and search pages)

<b:if cond='data:view.isMultipleItems'>
  <!-- The conditional Element To Execute -->
</b:if>

Old version:

<b:if cond='data:blog.pageType == "index"'>
  <!-- The conditional Element To Execute -->
</b:if>

5. Label Search Page

<b:if cond='data:view.isLabelSearch'>
  <!-- The conditional Element To Execute -->
</b:if>
.................
<b:if cond='data:view.isLabelSearch == "blogger"'>  
<!-- The conditional Element To Execute if label is "blogger"-->
</b:if>

Old version:

<b:if cond='data:blog.searchLabel'>
  <!-- The conditional Element To Execute -->
</b:if>
.................
<b:if cond='data:blog.searchLabel == "blogger"'>  
<!-- The conditional Element To Execute if label is "blogger"-->
</b:if>

6. Search Result Page (ex: /search?q=blogger)

<!-- Include Label Search Page -->
<b:if cond='data:view.isSearch'> … </b:if>

<!-- Just search result page -->
<b:if cond='data:view.isSearch and !data:view.isLabelSearch'> … </b:if>

Old version:

<b:if cond='data:blog.searchQuery'> 
   <!-- The conditional Element To Execute --></b:if>

...................................

<b:if cond='data:blog.searchQuery == "blogger"'>
  <!-- The conditional Element To Execute in key search is "blogger"-->
</b:if>

7. 404 Error Page

<b:if cond='data:view.isError'>
  <!-- The conditional Element To Execute -->
</b:if>

Old version:

<b:if cond='data:blog.pageType == "error_page"'>
  <!-- The conditional Element To Execute -->
</b:if>

8. Archive Page

<b:if cond='data:view.isArchive'> 
 <!-- The conditional Element To Execute -->
</b:if>

Old version:

<b:if cond='data:blog.pageType == "archive"'> 
 <!-- The conditional Element To Execute -->
</b:if>

9. Mobile Device

<b:if cond="data:blog.isMobile">
<!-- The conditional Element To Execute -->
</b:if>

10. For multiple posts per page, apply for the first post

<b:if cond='data:post.isFirstPost'>
 <!-- The conditional Element To Execute -->
</b:if>

11. Static Page and Item

<b:if cond='data:view.isSingleItem'>
<!-- The conditional Element To Execute -->
</b:if>

Old version:

<b:if cond='data:blog.url == data:post.url'>
<!-- The conditional Element To Execute -->
</b:if>

12. Condition for Thumbnail

<b:if cond='data:post.thumbnailUrl'>
  <!-- The conditional Element To Execute -->
</b:if>

13. Condition for Author

<b:if cond='data:displayname == "author-name"'> 
<!-- The conditional Element To Execute -->
</b:if>

14. Condition for a total of comments

<b:if cond='data:post.numComments == number'>
 <!-- The conditional Element To Execute -->
</b:if>

15. Preview Page

<b:if cond='data:view.isPreview'> 
… 
</b:if>

16. Condition for last Label

<b:loop values='data:post.labels' var='label'>
    <b:if cond='data:label.isLast != &quot;true&quot;'>
 <!-- Add special character after If it is not last label -->
       ,
    </b:if>   
</b:loop>

Part 2. Applying Conditional Tags

1. Comparing operators

Some conditions use double equals (comparing method), and just direct statements. The double equals == mean TRUE for a non-numeric statement and equal to for an integer (numeric). Numeral The == operator can be replaced by:

• != other than that integer.
• < less than.
• > greater than.
• <= less than or equal to.
• >= greater than or equal to.

Note: We need to escape the less than (<) and the greater than (>) marks. less than (<) is < greater than (>) is >
Example for escaping greater than the operator
From this:

<b:if cond='data:post.numComments > 1'>...content...</b:if>

in to this:

<b:if cond='data:post.numComments &gt; 1'>...content...</b:if>

* Reverse Conditional Tags
We have two options for the operator:
== TRUE
!= FALSE

2. Applying Multiple Conditional Tags

By putting <b:else> tag, you can add multiple conditions. It means that if the first condition does not work then execute the second condition to all of the pages. See example below 

<b:if cond='data:blog.pageType == "item"'> 
           Content-1 EXECUTE IF TRUE 
<b:else/>
           Content-2 EXECUTE IF FALSE 
</b:if>

Above example means that execute content-1 in post page. If it's not post page then execute content-2.

3. Using IN, OR, AND, NOT Logic Operators

<b:if cond='data:blog.pageType in {"static_page","item"}'>
CONTENT
</b:if>

<b:if cond='data:blog.pageType not in {"static_page","item"}'>
CONTENT
</b:if>

<b:if cond='data:view.isPage and data:view.isPost'>
CONTENT
</b:if>

<b:if cond='data:view.isPage or data:view.isPost'>
CONTENT
</b:if>

Part 3. More 

When you edit your theme, maybe “ will be replace by quot;. Example
from this

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

into this

<b:if cond='data:blog.pageType == quot;static_pagequot;'>

Note: Using condition in tag b:include totaly similiar tag b:if