Blogger Conditional Tags and How to Use Them.

Conditional tags provide us better control over our templates, allowing us to specify what part of our template appears only under certain conditions.
You may wish to hide a widget or element on one page and display it on the other, need to remove the sidebar on certain pages, or even display buttons on select pages. This is exactly where conditional tags come into play. There are a number of tags available for blogger which, if applied correctly, will help you modify elements of your template

Blogger Conditional Tags

In this tutorial, i will share or update all blogger conditional tags and how to use them properly in your template.

1. Conditional Tag Use

First you need to know how to use them. See below example:

 <b:if cond='ADD_CONDITION_HERE'>
ADD CONTENT HERE
</b:if>

The conditional tags syntax start with <b:if> tags and a cond attributes. Condition need to write as the value of cond attribute. Every opening   <b:if> tag need to be closed with a closing </b:if> tag.

All Blogger Conditional Tags List

Below i have listed all blogger conditional tags. Recently blogger released new condition tags for specific label, i also added this.

1. Homepage
   

    <b:if cond='data:blog.url == data:blog.homepageUrl'>
   ADD CONTENT HERE
   </b:if>



2. Blog Post/Article Page
   

    <b:if cond='data:blog.pageType == "item"'>
   ADD CONTENT HERE
   </b:if>



3. Index Page Index pages include homepage, label page, search page and yearly archive page
   .

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



4. Static Pages Static page means blogger page which we created by blogger page section.
   

    <b:if cond='data:blog.pageType == "static_page"'>
   ADD CONTENT HERE
   </b:if>



5. Post and Static Pages
   

    <b:if cond='data:blog.url == data:post.url'>
   ADD CONTENT HERE
   </b:if>



6. Label and Search Pages
   

    <b:if cond='data:blog.searchLabel'>
   ADD CONTENT HERE
   </b:if>



7. Specific Label Change PUT_LABEL_NAME_HERE with your label name. Label name is case sensitive.
   

    <b:if cond='data:post.labels any (l => l.name == "PUT_LABEL_NAME_HERE")'>
   ADD CONTENT HERE
   </b:if>



8. Archive Pages
   

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



9. Specific page/URL
   Change PUT_URL_HERE with any page/post/label etc url

    <b:if cond='data:blog.url == "PUT_URL_HERE"'>
   ADD CONTENT HERE
   </b:if>



10. 404 Error Page
    

     <b:if cond='data:blog.pageType == "error_page"'>
    ADD CONTENT HERE
    </b:if>



11. First Post This is not for a page type. It's used for targeting the posts on multi-post pages like (index,archive,label,search query).
    

     <b:if cond='data:post.isFirstPost'>
    ADD CONTENT HERE
    </b:if>

Applying Conditional Tags

To apply a conditional tag to a content, you need to put your content between the opening <b:if cond..> and closing </b:if>. Example see below

<b:if cond='data:blog.pageType == "item"'> 
CONTENT (TO BE EXECUTED IF CONDITION IS TRUE)
</b:if>

The above example means that the content will appear only on post pages.

Applying Multiple Conditional Tags

By putting <b:else/> tag, you can add multiple condition. It means that if first condition not work then execute second condition to all of 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.

Applying Reverse Conditional Tags

If you want to reverse a conditional tag, you can do it by changing comparison operator from == (is equal to) to != (is not equal to).

 <b:if cond='data:blog.pageType != "item"'> 
CONTENT (TO BE EXECUTED IF CONDITION IS TRUE)
</b:if>

In the example above, the content will appear all of pages except post page. Remember that you can not apply this method to Label-Search and First Post conditionals.

[info title="Remember" icon="info-circle"]You can place all of conditional anywhere inside the template HTML. It will not work on blogger Layout like (Add a Gadget>HTML/Javascript)[/info]

That's it. I think that it will help you to customize your template as your wish. Happy Comment!