Skip to main content

Blogger Conditional Tag — b:if and b:else

Greetings!

Blogger has special b:if, b:elseif, and b:else tags.

Those only work if we put them in the XHTML of the Blogger blog, not in the HTML widget (via layout).

b:if and b:else
⬆️ b:if = beef & b:else = bells.

List of Conditions

Techniques list

ITEM

Show content only on item page (every single post):

LIST TOP
STATIC

Show content only on static page(s):

LIST TOP
INDEX

Show content only on index page (sorted by label and date):

For instance, this URL pattern:

It will show your post(s) list with a particular [YOUR_LABEL] label.

  • Change the [your_blog_url] with your own blog host URL.
  • Change the [YOUR_LABEL] with your own label.
LIST TOP
ARCHIVE

Show content only on archive page (your blogroll — sorted by date):

For instance, this URL pattern:

It will show the post(s) list we wrote in January (01) of 2025.

Change the [your_blog_url] with your actual blog URL.

LIST TOP
HOMEPAGE

Show content only on homepage URL of the blog:

LIST TOP
SPECIFIC URL

Show content only on a specific URL on the blog:

We need to put complete URL and protocol for that, such as:

⚠️ Do not use relative URL such as /2022/01/post.html. ❌

💡 Put absolute URL as shown in the example. ✅

LIST TOP
ERROR PAGE

Show content on the error page of the blog (404 - not found page):

There's the predefined elements and styling provided by Blogger for that.

They're the elements starting with class name status-msg-.

We can search them on the XHTML.

But, if we want to modify the custom error page, use that conditional statement to make the additional element(s) or CSS or JS appear or run only for that specified criteria.

LIST TOP
BACKLINK

Show content only on post(s) which is/are showing backlink:

LIST TOP
DISPLAY NAME

Show content only on post(s) which is/are showing specific display name (such as the author of the post):

LIST TOP
NUMBER OF COMMENTS

Show content only on post(s) which has/have specific number of comment(s):

LIST TOP
JUMP LINK

Show content only on post(s) which has/have jump link (the "read more" link):

LIST TOP
COMMENTING ENABLED

Show content only on post(s) which is/are comment enabled:

LIST TOP
OTHERS

These are some of them:

<b:if cond='data:blog.metaDescription'>

<b:if cond='data:mobile'>

<b:if cond='data:title'>

Or —

<b:if cond='data:title != ""'>

<b:if cond='data:showThumbnails == "false/true"'>

<b:if cond='data:showSnippets == "false/true"'>

<b:if cond='data:post.thumbnail'>

<b:if cond='data:display == "list"'>

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

<b:if cond='data:showFreqNumbers'>

<b:if cond='data:useImage'>

And others.

LIST TOP

Escaping Quotation Mark

Remember to escape the " (double quotes) with &quot;.

Example for the item Condition

From this:

To this:

The examples in here didn't escape the quotation marks within the b:if to make them easy to read.

Actually, the quotation marks (double or single) will automatically be replaced by Blogger — but, you know, just in case, for our own additional knowledge.

We can also use CDATA section for escaping characters but not for b:if. It's for the characters within CSS and/or JavaScript.

Please visit this post for more information regarding CDATA sections.

TECHNIQUES TOP

Comparing Operators

The double equals == means TRUE for non-numeric statement, and equal to for an integer (numeric).

Numeral

The == operator can be replaced by:

  • != other than that integer.
  • < less than.
  • > greater than.
  • <= less than or equal to.
  • >= greater than or equal to.

The [number_here] (number of comments) must be replaced by a non-negative integer (0, 1, 2,... , 200, etc).

Escaping

We need to escape the less than (<) and the greater than (>) marks.

  • less than (<) is &lt;
  • greater than (>) is &gt;

Example for escaping greater than operator

From this:

To this:

Non-Numeral

We have two options:

  • == TRUE
  • != FALSE

Example of using negation (!=) for homepage statement:

It means do not show a specific content on homepage URL, but show the specific content on page which isn't homepage URL.

TECHNIQUES TOP

b:else

It is placed within the b:if.

Let's have a look at the conditional tag using double equals.

For example:

It means show content 1 on page which is homepage URL. If the page isn't homepage URL, then content 2 will be shown.

TECHNIQUES TOP

b:elseif

It's also placed within the b:if, before the b:else.

It means show content 1 on page which is homepage URL. And show content 2 through 4 with our specified criteria.

We can also define only b:elseif and not closing it with a b:else.

It means show content 1 on page which is homepage URL. And show content 2 through 3 with our specified criteria. Other than the specified criteria, nothing will be executed.

TECHNIQUES TOP

Nesting b:if

It means that content 1 will be shown on item page, but not on specific item page (URL). And when the page is an item page and it has the specific URL stated, it will then show the content 2.

The example above is actually redundant. We can simply use the [specific URL] condition for that. Like so:

⬆️ Simpler.

Related posts for AND and OR operators:

TECHNIQUES TOP

b:if in Widget

To actually use the b:if and b:else to control the widget appearance, we need to:

  1. Open the Blogger HTML editor.
  2. Navigate to Theme ➡️ Open drop down on the Customize button ➡️ Go to Edit HTML
  3. Then go (jump) to a specific widget.

For instance, if we want to tinker the appearance of HTML1 widget, we'll need to open our Blogger HTML text editor (using either way above), then jump — we can find Jump to widget button on top of the text editor — to HTML1, expand it, and we will see these lines:

To control the entire HTML1 widget appearance, we can either put the b:if right after the <b:includable>, and close the tag, using </b:if>, put it right before <b:include name='quickedit'/> — so that we can still see the edit icon by default (not being affected by the b:if).

Example:

That example means, the widget HTML1 will only be shown on item page. That is the post/article page itself, and not on any other, like homepage or blogroll or static page or other.

Or, we can use the simpler technique.

TECHNIQUES TOP

Tinkering Widget Content

We can put the custom content of the widget HTML1 via Blogger layout - or change the <data:content/> with our custom content. Do this if you're confident about tinkering Blogger template.

Example:

Example with b:else

It can be placed like so:

TECHNIQUES TOP

Global CSS and/or JavaScript

The conditional b:if can be used as conditional styling (CSS) or script not only for a particular widget - it can also be used for the entire blog layout.

We can place it (the CSS/script) in the body or head section of the Blogger HTML.

Rule of thumb for placement:

  1. CSS (the style tag) is always placed above the elements being styled. Placing at the beginning of body or at the bottom of head is the common practice.
  2. The script usually is placed at the bottom of the body. But then again, it depends on how the script is constructed.

Example for style (CSS):

Example for script (JS):

TECHNIQUES TOP

Mobile Template

This method, by default, only works for desktop template. If we need to make it work for desktop and mobile, then —

  • go to Blogger TEMPLATE (theme) setting.
  • On the Mobile setting, we can either choose —
    1. Yes ➡️ Show mobile template on mobile devices.
    2. No ➡️ Show desktop template on mobile devices.
  • If we choose the first one, then pick the Custom option. Afterwards, we need to work on the desktop view and mobile view separately.
  • If we choose the second option, then we only need to work on one template. This template will be shown on both desktop and mobile.
TECHNIQUES TOP
✒️ Edit
Monkey Raptor uses cookies for analytics, advertisements, and functionality. Privacy Policy