How to Show Elements on Specific Pages Using `if cond`

The `if cond` code allows for conditional control over your elements. For example, you can show 'Element A' only on the homepage or apply a specific class only to certain pages. As such, it is commonly referred to as a conditional tag. This post provides a step-by-step guide on how to implement it.

The List of condition tags in Blogger

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

home page

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

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

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

post page and static page

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

post page

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

static page

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

specific page indicated by post ID. Change the red wave line to desired post ID

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

Post list page

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

Archive Post list page

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

Archive Post list page

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

A page listing articles with a specified label or a specified search word

<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 search word

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

A page listing articles with a specified search word. Change the red wave line to desired keyword

<b:if cond='data:view.search.query == "keyword"'></b:if>

Template layout page

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

Posts preview page

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

Error page such as 404 page

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

First image of a post or a post which has an image

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

First inframe video image of a post or a post which has an video inframe

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

specific url page. Change the red wave line to desired page URL

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

element which has a link to author profile

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

a post which has a comment written

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

a post which has a comment and the comment link is shown in post list page

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

a post which allows commenting

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

a post which has a label

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

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 If an article has no labels, the labels won't appear. However, the parent 'Label-Box' div will still be displayed, even though it is empty. This is unnecessary. If you want to avoid rendering this empty element, you can use a 'conditional tag.' Specifically, you can write it like this:

<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.