Blogger's Conditional tag list and how to use them in HTML template

This is an tutorial article on how to use conditional tags in Blogger. 03/Jun/2025

Condition tags allow you to control the structure of a page under certain circumstances by specifying a particular page or element as a condition. In this artcile I am going to show you the list of conditional tags which can be used in Blogger's HTML template and the usage method.

table of contents

List of condition tags
Combine condition tags
How to use Conditional tags

List of condition tags

By entering these condition tag codes into the HTML template, you can change which elements are displayed on which pages.

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

home page

<b:if cond='data:blog.homepageUrl'></b:if>

home page

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

home page

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

post page and static page

```
<b:if cond='data:view.isPost'></b:if>
```
post page
```
<b:if cond='data:view.isPage'></b:if>
```
static page
```
<b:if cond='data:blog.postId == Post_ID'></b:if>
```
specific page indicated by post ID. Change the red wave line to desired post ID

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

Post list page

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

Archive Post list page

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

Archive Post list page

```
<b:if cond='data:view.isSearch'></b:if>
```
A page listing articles with a specified label or a specified search word
```
<b:if cond='data:view.isLabelSearch'></b:if>
```
A page listing articles with a specified label or a specified search word
```
<b:if cond='data:view.search.query'></b:if>
```
A page listing articles with a specified search word
```
<b:if cond='data:view.search.query == "keyword"'></b:if>
```
A page listing articles with a specified search word. Change the red wave line to desired keyword

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

Template layout page

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

Posts preview page

```
<b:if cond='data:view.isError'></b:if>
```
Error page such as 404 page
```
<b:if cond='data:view.featuredImage'></b:if>
```
First image of a post or a post which has an image
```
<b:if cond='data:view.featuredImage.isYoutube'></b:if>
```
First inframe video image of a post or a post which has an video inframe
```
<b:if cond='data:blog.url == page url'></b:if>
```
specific url page. Change the red wave line to desired page URL

<b:if cond='data:post.author.profileUrl'></b:if>

element which has a link to author profile

<b:if cond='data:post.numberOfComments > 0'></b:if>

a post which has a comment written

```
<b:if cond='data:post.allowComments and data:post.feedLinks'></b:if>
```
a post which has a comment and the comment link is shown in post list page

<b:if cond='data:post.allowComments'></b:if>

a post which allows commenting

<b:class cond='data:post.labels and not data:post.labels.empty' name='has-labels'/>

a post which has a label

Combine condition tags

Condition tags can be combined using 'and', 'or', or '!'. A condition tag must always be closed with "</b:if>".

Example of using 'and'


<b:if cond='data:view.isPost and data:view.featuredImage'>
  Put Any Element Here
</b:if>

This specifies article pages that have images. In other words, article pages without images will be excluded.

Example of using 'or'


<b:if cond='data:view.isArchive or cond='data:view.isSearch'>
  Put Any Element Here
</b:if>

This should only be specified on article archive pages, or pages that display a list of articles with a particular label or articles that result from a keyword search.

Example of using '!'


<b:if cond='!data:view.isPost'>
  Put Any Element Here
</b:if>

This specifies a page other than an article page.

How to use Conditional tags

For example, let's say you want to not display the label element on article pages that don't have labels. In that case, add the code highlighted in yellow to the element you want to toggle display.


<div cond='data:post.labels and not data:post.labels.empty' class="Label-Box">
  <ol class="label-slot">
    <li><a href="">Label1</a></li>
    <li><a href="">Label2</a></li>
  </ol>
</div>
<h1>Post Title Here</h1>

In this case, the label element will only be displayed on article pages that have the label. There is no need to write CSS to control the display.
Or, if you prefer to use CSS, you can do it like this:


<div class="Label-Box">
  <b:class cond='data:post.labels and not data:post.labels.empty' name='has-labels'/>
  <ol class="label-slot">
    <li><a href="">Label1</a></li>
    <li><a href="">Label2</a></li>
  </ol>
</div>
<h1>Post Title Here</h1>

This allows you to add a new class called has-labels to elements that have the class of Label-Box, the parent element that wraps the labels, only on pages that have labels. Then add the following CSS:


.Label-Box.{
display:none
}
.Label-Box.has-labels{
display:unset
}

That's it. This time, I explained the types of condition tags and how to use them.