About Blogger Conditional Tags and How To Use Them Properly

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.

List of conditional tags

The following are a select few conditional tags you'll require the most:
  1. Homepage:
  2. <b:if cond='data:blog.url == data:blog.homepageUrl'>
  3. First post:
  4. For targeting the first post on multi-post pages.
    <b:if cond='data:post.isFirstPost'>
  5. Specific page/URL:
  6. <b:if cond='data:blog.url == "ENTER_URL_HERE"'>
  7. Posts (item):
  8. <b:if cond='data:blog.pageType == "item"'>
  9. Static pages:
  10. <b:if cond='data:blog.pageType == "static_page"'>
  11. Index pages (includes homepage, label pages and archive pages):
  12. <b:if cond='data:blog.pageType == "index"'>
  13. Archive pages:
  14. <b:if cond='data:blog.pageType == "archive"'>
  15. Posts and static pages:
  16. <b:if cond='data:blog.url == data:post.url'>
  17. Label-search pages:
  18. <b:if cond='data:blog.searchLabel'>
  19. 404 Error Page:
  20. <b:if cond='data:blog.pageType == "ERROR_PAGE"'>
  21. Mobile Pages:
  22. <b:if cond='data:blog.pageType == "data:blog.isMobile"'>

How to Use conditional tags


Using conditional tags is simple. Each tag needs to be closed with a closing </b:if> tag. All you have to do is select the suitable tag and place the content between the opening and the closing tag like this:
<b:if cond='THE_CONDITION_GOES_HERE'>
...
</b:if>
For Example:
You need to display the content only on Index Pages (homepage, archives and labels page). The following tag will be applied:
<b:if cond='data:blog.pageType == "index"'>
...ENTER CONTENT HERE...
</b:if>
The double equals " == " actually means TRUE. You can change the condition to FALSE, then just replace the first equal with an exclamation sign: " != ".

Reversing a Condition:

Example:
<b:if cond='data:blog.pageType != "index"'>
... THE CONTENT ...
</b:if>
In the example above, the content will show up on all pages other than "index" pages.

The ELSE Statement <b:else/>:

In case you need to display alternate content, insert a <b:else/> tag like this:
<b:if cond='data:blog.pageType == "index"'>
...Content 1...
<b:else/>
...Content 2...
</b:if>
In the example above "Content 1" will only appear on Index Pages (homepage, archives and labels page), and if its not an Index Page, "Content 2" will be displayed.

Combining Conditions Together:

<b:if cond='data:blog.pageType == "item"'>
<b:if cond='data:blog.url != "URL_OF_POST_TO_EXEMPT"'>
...ENTER CONTENT HERE...
</b:if>
</b:if>
Finally, in the example above, the content will show up on all posts except a certain URL/Post specified.

9 comments :

Reader's Comments

  1. How I condition to No labels:

    I need the opposite to

    Thanks

    ReplyDelete
    Replies
    1. Don't really get your question. Do you need to hide the labels or Reverse a condition? In the second case please see "Reversing a condition" above.

      Delete
  2. how about static page blogger in mobile version? what code?

    ReplyDelete
    Replies
    1. You can use the CSS for mobile version within these conditional tags.

      Delete
  3. Hello I have a problem while adding a b:if cond.

    If I apply the cond to a specific url it works, but if I try to add it to another url it doesn't anymore.

    Do you know where the problem might be?
    Where can I post the code?

    Thank you

    ReplyDelete
    Replies
    1. Not entirely sure what you are trying to achieve. Are you trying to style two different pages by using two instances of one of these tags in your template?

      Used properly, this will work no matter how many times you use it.

      Delete
    2. I used this code: b:if cond='data:blog.url == "http://www.mywebpage.com/page.html"'

      ...and the whole code looks like this:
      b:else/
      b:if cond='data:blog.url == "http://www.webpage.com/page.html"'
      p class='breadcrumbs'
      span class='post-labels'
      b:if cond='data:blog.url == ""'>
      a expr:href='data:blog.homepageUrl'>textbr/>/a> /b:else/
      a expr:href='data:blog.homepageUrl'>textbr/>/a> /test
      /
      /span>
      /p>
      /b:if>

      If I repeat the same proces for example for the "http://www.webpage.com/page2.html" I do not have the same effect.

      Delete
    3. You should use the b:elseif condition to style the second url, followed by the b:else tag. Refer to this:

      https://support.google.com/blogger/answer/46995?hl=en

      Delete
  4. Hi,

    perhaps you can check out this:

    <b:if cond='data:blog.url == data:blog.homepageUrl + "p/mystaticpage.html"'>

    Result: This is always false although it should be true and is true when I use JS:

    <script>
    var url = "<data:blog.url/>",
    homepageUrl = "<data:blog.homepageUrl/>p/mystaticpage.html";
    console.log(url + " | " + homepageUrl + " | url = homepageUrl: " + (url == homepageUrl));

    Result:

    $ http://myblog.blogspot.com/p/mystaticpage.html | http://myblog.blogspot.com/p/mystaticpage.html | url = homepageUrl: true

    ReplyDelete