How to Use Blogger Conditional Tag in Blogger Template?

Conditional Tag is one of the important functions in the template structure on Blogger. This function is used for certain adjustments, usually used to display widgets or elements in a particular place or not to appear in a specific page.

Showing and hiding the sidebar and widgets on certain pages of blogs become the most fitting alternative for a friend who has many widgets on his blog. Because if too many widgets will reduce the loading speed of our blog. As a result other than a blog so heavy, visitors will also feel a little bored with the length of time required to load our blog. Conditional Tag for Blogger starts <b:if... and is followed by the desired condition. Below is the latest version of the Blogger Conditional Tag that you can use on your Blogger Template.

Universal Conditional Tags

1. Display widgets only on Homepage - This conditional tag of Blogger will only appear on Home Page. If you want to display anything just like any widget or even whole sidebar, footer, or header section just only at homepage then simply use the following conditinal tag.

<b:if cond='data:view.isHomepage'>
    <!-- only homepage -->
</b:if>

<b:if cond='data:blog.url == data:blog.homepageUrl'> 
    <!-- only homepage -->
</b:if>



2. Conditional Tag for Index - If you want to add the codes, content that will only appear in Home Page, Labels Page and Archive Page than this conditional tag of Blogger can help you. Take a look at the tag below.

<b:if cond='data:view.isMultipleItems'>
    <!-- all index pages -->
</b:if>

<b:if cond='data:blog.pageType == "index"'>
    <!-- all index pages -->
</b:if>



3. Conditional Tag for Item Pages (post pages and static pages) - The following conditional tag makes your widget or any portion working for post pages and static pages only and hide from all other pages except post pages and static pages of your blog.

<b:if cond='data:view.isSingleItem'>
    <!-- all item pages and static pages -->
</b:if>

<b:if cond='data:blog.pageType in ["item", "static_page"]'>
    <!-- all item pages and static pages -->
</b:if>

Or

<b:if cond='data:blog.url == data:post.url'>
    <!-- all item pages and static pages -->
</b:if>



4. Conditional tag for Post - If you want to display anything only at post pages and want to hide from the homepage, static pages, archive, and other search pages then this conditional tag works for you. This tag can help you in adding different look to the posts or item page from the entire blog.

<b:if cond='data:view.isPost'>
    <!-- all item pages -->
</b:if>

<b:if cond='data:blog.pageType == "item"'>
    <!-- all item pages -->
</b:if>



5. Specific Post by URL - This conditional tag is used when you want to show anything just only a particular post page to use this simply replace the URL of the post page this portion with the URL of the post page.

<b:if cond='data:blog.url == data:blog.canonicalHomepageUrl + "2022/11/test.html"'> 
     <!-- a item page from august 2022 with post-title 'test'-->
</b:if>

Or

<b:if cond='data:blog.url == "URL LINK"'> 
     <!-- a item page 'URL LINK'-->
</b:if>



6. Conditional Tag for Static Page - If you want to display anything only at static pages and want to hide from the homepage, archive, and other search pages then this conditional tag works for you.

<b:if cond='data:view.isPage'>
     <!-- all static pages -->
</b:if>

<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
     <!-- all static pages -->
</b:if>



7. Specific Static page by URL - This conditional tag is used when you want to show anything just only a particular static page to use this simply replace the URL of the static page this portion with the URL of the static page.

<b:if cond='data:blog.url == data:blog.canonicalHomepageUrl + &quot;p/test.html&quot;'> 
     <!-- a specific static page with name 'test' -->
</b:if>



8. Conditional Tag for Label - If you want to display anything only at label pages and want to hide from homepage, post, pages and other pages then use the above label conditional tag.

<b:if cond='data:view.isLabelSearch'>
    <!-- all label pages -->
</b:if>

<b:if cond='data:blog.searchLabel'>
     <!-- all label pages -->
</b:if>



9. Specific Label Page - If you want use to display in a specific label use the following conditional tag.

<b:if cond='data:blog.searchLabel == "test"'>
     <!-- for label 'test' -->
</b:if>



10. Conditional Tag for Search Result Page - all search pages Including label

<b:if cond='data:view.isSearch'>
    <!-- all search pages Includes label -->
</b:if>

Or

<b:if cond='data:view.isSearch and !data:view.isLabelSearch'>
    <!-- all search pages only -->
</b:if>

<b:if cond='data:blog.searchQuery'>
    <!-- all search pages -->
</b:if>



11. Specific Search Query page - The below conditional tag used for Search query pages where result displays, while searching something on your blogger blog.

<b:if cond='data:blog.searchQuery == "Label Name"'>
     <!-- for query 'Label Name' -->
</b:if>



12. Conditional Tag for Archive Page - If you want to display anything only at archive pages and want to hide from homepage, post, pages and other pages then use the following archive conditional tag.

<b:if cond='data:view.isArchive'>
    <!-- archive Page -->
</b:if>

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



13. Conditional Tag for 404 Page (Page Not Found) - The following tag use only for error

<b:if cond='data:view.isError'>
    <!-- all error pages -->
</b:if>

<b:if cond='data:blog.pageType == "error_page"'>
     <!-- all error pages -->
</b:if>



14. Conditional Tag for Preview page - The following tag use only for post preview

<b:if cond='data:view.isPreview'>
    <!-- Preview Mode Blogger XML Code -->
</b:if>



15. Conditional Tag for mobile device - If you want to display the particular widget or script in Mobile devices.

<b:if cond='data:view.isMobile'>
    <!-- display on mobile device -->
</b:if>

<b:if cond='data:blog.isMobileRequest'>
    <!-- display on mobile device -->
</b:if>

Set the isMobileRequest Boolean value to false, so that the widget may load only in Desktop devices and it must be kept hidden in Mobile devices. If you visit our blog using a Mobile browser (not a desktop simulator), you will observe that the 'Back at home' widget is not loaded at all.

<b:if cond='data:blog.isMobileRequest == "false"'>
    <!-- display only Desktop devices and hidden in Mobile devices -->
</b:if>

If you want the widget to display only in Mobile devices but not desktop then set the Boolean value to true

<b:if cond='data:blog.isMobileRequest == "true"'>
    <!-- display only in Mobile devices but not desktop -->
</b:if>



16. Conditional Tag for Layout Code - The following tag use for setup template layout

<b:if cond='data:view.isLayoutMode'>
    <!-- blogger template layout setup -->
</b:if>



17. For First post only - Adding any codes under this condition will be only applicable for the first post of the multiple posts page. Used for targeting the first post on multi-post pages. If you want to use this conditional tag than take a look at the tag below.

<b:if cond='data:post.isFirstPost'>
    <!-- Some Blogger XML Code -->
</b:if>

NOT, AND, OR

1. NOT - This condition is used if the widget wants to be displayed other than at that place. NOT or EXCLUSION is used when you want to exclude something from the condition. Use either not or !.

<b:if cond='!data:view.isPost'>
    <!-- Some Blogger XML Code -->
</b:if>

Or this,

<b:if cond='not data:view.isPost'>
    <!-- all pages except item pages -->
</b:if>

<b:if cond='data:blog.pageType != "item"'>
  <!-- all pages except item pages -->
</b:if>



2. AND - Conditions if both are correct. Add AND. And is used to combine two or more than two conditions. All conditionals must be true. You can use either and Prevents repeating b:if tags.

<b:if cond='data:view.isMultipleItems AND data:view.isSearch'>
    <!-- search page AND index page -->
</b:if>

<b:if cond='data:blog.pageType == "index"'>
  <b:if cond='data:blog.searchQuery'>
    <!-- search page AND index page -->
  </b:if>
</b:if>



3. OR - The condition if one of them is correct. Add OR. OR is used to combine several conditions, any of which if true would render the HTML content. You can declare it either as or Prevents repeating b:if tags.

<b:if cond='data:view.isMultipleItems OR data:view.isPost'>
     <!-- Index Page or Post Page -->
</b:if>

<b:if cond='data:blog.pageType == "index"'> 
     <!-- Index Page or Post Page -->
      <b:else/>
<b:if cond='data:blog.pageType == "item"'> 
     <!-- Index Page or Post Page -->
   </b:if>
</b:if>

You can use <b:if> with or without <b:else/> but you can never use <b:else/> without <b:if>.

How to Use conditional tags

To apply a conditional tag to some content, simply put the content inside the opening <b:if cond='Conditinal Tag'> and the closing </b:if> like:

<b:if cond='data:blog.pageType == "item"'>
    # THIS CONTENT WILL BE EXECUTED IF CONDITION IS TRUE
</b:if>

In the example above, the content will only appear on post pages. The content can be a div, a section, a style tag or another conditional tag etc. If you want to specify a alternate content (when the condition is false), you need to insert a <b:else/> tag followed by the content, like this:

<b:if cond='data:view.isPost'>
    # THIS CONTENT WILL BE EXECUTED IF CONDITION IS TRUE
    # i.e. if current page is post (item) page
<b:else/>
    # THIS CONTENT WILL BE EXECUTED IF CONDITION IS FALSE
    # i.e. if not post page
</b:if>

The <b:else/> also works like an OR operator as explained above. Example Applications

1. Display widgets on specific pages
2. Applying different styling to static pages
3. Adding FB meta tags and Twitter Card tags
4. Load JS on specific pages
5. Optimize Blog Title for SEO

That's some of the newest Conditional Tags for Blogger. May be useful :)