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>Quick Navigation
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 > 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 > 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 >= "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 |
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.
CONCLUSION
In this article, I shared with you Complete Guide to Blogger Conditional Tags. I hope you found it helpful and informative. Please share it with your friends and follow our blog for more updates.
If you face any problems in demo, download, or have any questions, feel free to ask me in the comments section or join our Telegram Channel to get the latest posts and updates daily.
Note: All posts shared here are only for educational and informational purposes. We respect the rights of original creators. If you are the content owner and have any concerns, please contact us for review.
©Copyright: niadzgn.blogspot.com™