Complete Guide to Blogger Conditional Tags

What Are Conditional Tags?

Conditional tags in Blogger are powerful XML-based controls that allow you to show or hide content based on specific conditions. Using the <b:if> tag, you can create dynamic themes that adapt to different page types, user devices, and various other criteria.

Basic Syntax Structure

Every conditional tag follows this pattern:

<b:if cond='your-condition-here'>
  <!-- Content to display when condition is TRUE -->
</b:if>

Part 1: Page Type Conditions

1. Homepage

Show content only on the blog's homepage:

<!-- Modern Syntax (Recommended) -->
<b:if cond='data:view.isHomepage'>
  <!-- Your content here -->
  <div class="homepage-banner">
    Welcome to our blog!
  </div>
</b:if>

Legacy syntax for older themes:

<!-- Legacy Syntax -->
<b:if cond='data:blog.url == data:blog.homepageUrl'>
  <!-- Your content here -->
</b:if>

2. Individual Post Pages (Item Pages)

Target specific blog posts:

<!-- All post pages -->
<b:if cond='data:view.isPost'>
  <!-- Content for all posts -->
</b:if>

<!-- Specific post by URL -->
<b:if cond='data:blog.url == data:blog.canonicalHomepageUrl + "2024/01/my-post.html"'>
  <!-- Content for specific post only -->
</b:if>

3. Static Pages

For standalone pages like About, Contact, etc.:

<b:if cond='data:view.isPage'>
  <!-- Content for static pages -->
  <style>
    .page-content { max-width: 800px; margin: 0 auto; }
  </style>
</b:if>

4. Index Pages (Multi-Item Views)

Pages showing multiple posts - homepage, labels, archives, search:

<b:if cond='data:view.isMultipleItems'>
  <!-- Grid layout for multiple posts -->
  <div class="post-grid">
    <!-- Post thumbnails in grid -->
  </div>
</b:if>

5. Label/Category Pages

<!-- Any label page -->
<b:if cond='data:view.isLabelSearch'>
  <h1>Posts in this Category</h1>
</b:if>

<!-- Specific label (e.g., "tutorials") -->
<b:if cond='data:view.isLabelSearch == "tutorials"'>
  <div class="tutorial-header">
    Browse all tutorials
  </div>
</b:if>

6. Search Result Pages

<!-- All search pages (including label search) -->
<b:if cond='data:view.isSearch'>
  <div class="search-results">
    Search results for: <data:blog.searchQuery/>
  </div>
</b:if>

<!-- Search results only (excluding label pages) -->
<b:if cond='data:view.isSearch and !data:view.isLabelSearch'>
  <div class="search-specific">
    <!-- Only for keyword searches -->
  </div>
</b:if>

7. Archive Pages

<b:if cond='data:view.isArchive'>
  <h1>Archive: <data:blog.pageName/></h1>
</b:if>

8. 404 Error Page

<b:if cond='data:view.isError'>
  <div class="error-404">
    <h1>404 - Page Not Found</h1>
    <p>Sorry, the page you're looking for doesn't exist.</p>
    <a href='/'>Go Home</a>
  </div>
</b:if>

9. Single Item Pages (Posts OR Static Pages)

<b:if cond='data:view.isSingleItem'>
  <!-- Content shown on both posts and static pages -->
  <div class="article-content">
    <data:post.body/>
  </div>
</b:if>

Part 2: Device Conditions

10. Mobile Device Detection

<b:if cond='data:blog.isMobile'>
  <!-- Mobile-specific content -->
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="mobile.css"/>
</b:if>

Desktop-Only Content

To show content only on desktop, use the NOT operator:

<b:if cond='!data:blog.isMobile'>
  <!-- Desktop-only content -->
</b:if>

Part 3: Post-Specific Conditions

11. First Post in List

<b:loop values='data:posts' var='post'>
  <b:if cond='data:post.isFirstPost'>
    <!-- Featured styling for first post -->
    <article class="featured-post">
  <b:else/>
    <article class="regular-post">
  </b:if>
    <h2><a expr:href='data:post.url'><data:post.title/></a></h2>
  </article>
</b:loop>

12. Post Has Thumbnail

<b:if cond='data:post.thumbnailUrl'>
  <div class="post-thumbnail">
    <img expr:src='data:post.thumbnailUrl' alt="Post thumbnail"/>
  </div>
<b:else/>
  <div class="no-thumbnail">
    <img src="default-image.jpg" alt="Default"/>
  </div>
</b:if>

13. Post Has Comments

<b:if cond='data:post.numComments &gt; 0'>
  <span class="comment-count">
    <data:post.numComments/> comments
  </span>
</b:if>

14. Post Labels/Tags

<b:loop values='data:post.labels' var='label'>
  <b:if cond='data:label.isLast'>
    <a expr:href='data:label.url'><data:label.name/></a>
  <b:else/>
    <a expr:href='data:label.url'><data:label.name/></a>,
  </b:if>
</b:loop>

15. Featured/Sticky Post

<b:if cond='data:post.featuredImage'>
  <!-- Post has a featured image -->
  <div class="hero-image" 
       expr:style='"background-image: url(" + data:post.featuredImage + ")"'>
  </div>
</b:if>

Part 4: User & Author Conditions

16. Specific Author

<b:if cond='data:post.author.name == "John Doe"'>
  <div class="author-badge">
    ✓ Verified Author
  </div>
</b:if>

17. Admin/Owner View

<b:if cond='data:blog.adminPage'>
  <!-- Admin-only tools -->
  <div class="admin-bar">
    <a expr:href='data:post.editUrl'>Edit Post</a>
  </div>
</b:if>

Part 5: Advanced Operators & Logic

Comparison Operators

Operator	Description	Example
`==`	Equal to	`data:view.isPost == true`
`!=`	Not equal to	`data:view.isPost != true`
`>`	Greater than	`data:post.numComments > 5`
`<`	Less than	`data:post.numComments < 10`
`>=`	Greater than or equal	`data:post.numComments >= 1`
`<=`	Less than or equal	`data:post.numComments <= 100`

Logical Operators

AND Operator (`and`)

Both conditions must be true:

<b:if cond='data:view.isPost and data:post.numComments &gt; 0'>
  <!-- Show only on posts that have comments -->
  <div class="comments-section">
    <h3>Join the Discussion</h3>
  </div>
</b:if>

OR Operator (`or`)

Either condition can be true:

<b:if cond='data:view.isPost or data:view.isPage'>
  <!-- Show on both posts and static pages -->
  <div class="breadcrumb">
    <a href='/'>Home</a> / <data:post.title/>
  </div>
</b:if>

NOT Operator (`!`)

Reverses the condition:

<b:if cond='!data:blog.isMobile'>
  <!-- Desktop-only sidebar -->
  <aside class="sidebar">
    <div class="widget">...</div>
  </aside>
</b:if>

IN Operator

Check if value exists in a set:

<b:if cond='data:blog.pageType in {"static_page", "item"}'>
  <!-- Show on static pages and posts -->
  <div class="reading-progress"></div>
</b:if>

<!-- NOT IN example -->
<b:if cond='data:blog.pageType not in {"error_page", "archive"}'>
  <!-- Hide on error and archive pages -->
</b:if>

Using b:else for Multiple Conditions

<b:if cond='data:view.isHomepage'>
  <h1>Welcome to Our Blog!</h1>
<b:else/>
  <b:if cond='data:view.isPost'>
    <h1><data:post.title/></h1>
  <b:else/>
    <h1><data:blog.pageName/></h1>
  </b:if>
</b:if>

Part 6: New & Advanced Conditional Tags NEW

18. Preview Mode

Detect when viewing a post preview before publishing:

<b:if cond='data:view.isPreview'>
  <div class="preview-banner">
    ⚠️ You are viewing a preview of this post
  </div>
</b:if>

19. Post Has Specific Label

<b:loop values='data:post.labels' var='label'>
  <b:if cond='data:label.name == "featured"'>
    <span class="featured-badge">★ Featured</span>
  </b:if>
</b:loop>

20. Specific Date Range

<b:if cond='data:post.date &gt;= "2024-01-01"'>
  <span class="new-badge">New</span>
</b:if>

21. Post Has Update Timestamp

<b:if cond='data:post.lastUpdated != data:post.date'>
  <span class="updated-date">
    Updated: <data:post.lastUpdated/>
  </span>
</b:if>

22. Widget Visibility by Page

<!-- Show widget only on homepage -->
<b:widget id='HTML1' type='HTML' version='1' locked='false'>
  <b:includable id='main'>
    <b:if cond='data:view.isHomepage'>
      <div class="widget-content">
        <data:content/>
      </div>
    </b:if>
  </b:includable>
</b:widget>

23. URL Parameter Detection

<b:if cond='data:blog.url contains "?m=1"'>
  <!-- Mobile version parameter detected -->
</b:if>

24. Post Snippet/Excerpt Check

<b:if cond='data:post.snippet'>
  <p class="post-excerpt">
    <data:post.snippet/>
  </p>
<b:else/>
  <p class="no-excerpt">
    No description available.
  </p>
</b:if>

25. Social Share Count Check

<b:if cond='data:post.sharePostUrl'>
  <div class="share-buttons">
    <a expr:href='"https://twitter.com/share?url=" + data:post.sharePostUrl'>
      Share on Twitter
    </a>
  </div>
</b:if>

Quick Reference Cheat Sheet

                Most Common Conditions
                
                        Condition
                        Modern Syntax
                        Legacy Syntax
                    
                        Homepage
                        data:view.isHomepage
                        data:blog.url == data:blog.homepageUrl
                    
                        Post Page
                        data:view.isPost
                        data:blog.pageType == "item"
                    
                        Static Page
                        data:view.isPage
                        data:blog.pageType == "static_page"
                    
                        Label Page
                        data:view.isLabelSearch
                        data:blog.searchLabel
                    
                        Search Page
                        data:view.isSearch
                        data:blog.searchQuery
                    
                        Archive Page
                        data:view.isArchive
                        data:blog.pageType == "archive"
                    
                        Error Page
                        data:view.isError
                        data:blog.pageType == "error_page"
                    
                        Mobile
                        data:blog.isMobile
                        Same

Condition	Modern Syntax	Legacy Syntax
Homepage	`data:view.isHomepage`	`data:blog.url == data:blog.homepageUrl`
Post Page	`data:view.isPost`	`data:blog.pageType == "item"`
Static Page	`data:view.isPage`	`data:blog.pageType == "static_page"`
Label Page	`data:view.isLabelSearch`	`data:blog.searchLabel`
Search Page	`data:view.isSearch`	`data:blog.searchQuery`
Archive Page	`data:view.isArchive`	`data:blog.pageType == "archive"`
Error Page	`data:view.isError`	`data:blog.pageType == "error_page"`
Mobile	`data:blog.isMobile`	Same

Pro Tips

Always escape special characters: Use > for > and < for <
Use modern syntax: It's cleaner and more readable
Test thoroughly: Check conditions on different page types
Nest wisely: Don't go too deep with nested conditions
Comment your code: Help future you understand the logic

Common Mistakes to Avoid

Don't forget to close </b:if> tags
Remember that quotes in conditions need proper escaping
Avoid conflicting conditions that can never be true
Don't use <b:else/> without a preceding <b:if>

Conclusion

Blogger conditional tags are incredibly powerful tools for creating dynamic, professional themes. By mastering these conditions, you can control exactly what content appears where, creating a tailored experience for your visitors across different devices and page types.

Start with simple conditions and gradually build up to more complex logic using AND, OR, and IN operators. Remember to always test your conditions across different page types to ensure everything works as expected.