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

Technique 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 — the 404 or "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 in the XHTML.

By default, we can customise the error page through Settings ➡️ Errors and redirects ➡️ Custom 404.

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):

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

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 Marks

Remember to escape the:

  • " (double quotes) with &quot;
  • and ' (single quotes) with &apos;.

Example of escaping double quotes.

From this:

To this:

The examples in here do not escape the quotation marks within the b:if to make them easy to read.

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

We can also escape reserved characters using a CDATA section, but this only works inside style and script tags, not inside b:if. Please visit this post for more information regarding the CDATA sections.

TECHNIQUE TOP

Comparison Operators

The double equal == means matches exactly for non-numeric values (such as strings), and is equal to for numbers.

Numeric

The comparison operators:

  • == equal to.
  • != not equal to.
  • < less than.
  • > greater than.
  • <= less than or equal to.
  • >= greater than or equal to.

Escaping Reserved Characters

We need to escape the less-than (<), greater-than (>), and ampersand (&) characters — also the single and double quotes as I've mentioned above.

  • Less than (<) is &lt;
  • Greater than (>) is &gt;
  • Ampersand (&) is &amp; ⬅️ This is one example of error thrown by Blogger's XML parser if we don't escape it.

Let's see an example of escaping the greater-than (>) symbols.

From this:

To this:

Non-Numeric

We have two options:

  • == means matches exactly.
  • != means does not match.

Example:

It means if the current URL does not match the homepage URL, show that specific content.

In other words, the specific content is displayed on any URL other than the homepage URL.

TECHNIQUE TOP

b:else

It is placed within the b:if tag.

Example:

It means show content 1 if current URL matches the homepage URL. If the current URL doesn't match homepage URL, show content 2.

TECHNIQUE TOP

b:elseif

b:elseif is also placed inside b:if, but before 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 the b:elseif without needing to end the entire condition 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.

TECHNIQUE TOP

Nesting b:if

It means that content 1 will appear on all individual post (item) pages, except for the specific URL defined in the condition. If a visitor is on that particular excluded post — or on any other page that isn't a post — the template will display content 2 instead.

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:

TECHNIQUE 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 —

  • put the b:if right after the <b:includable>, close it with a </b:if>, put the entire set right before <b:include name='quickedit'/> — so that we can still see the edit icon of that widget.

    Example:

    That example means the widget HTML1 will only be shown on item page — that is the blog post (article) page and not on any other like homepage, blogroll, static page, or other.

  • Or, we can use the simpler technique.

TECHNIQUE TOP

Tinkering Widget Content

We can place our custom content in the widget HTML1:

  • via Blogger layout,
  • or disable (comment out) the <data:content/> tag and place our custom content after or before that.

Example of disabling <data:content/> tag:

Example with b:else

It can be placed like so:

TECHNIQUE TOP

Global CSS and / or JavaScript

We can use b:if for conditional styles (CSS) or scripts (JS), whether for a single widget or the entire blog layout.

We can place our custom CSS and / or JS in the body or head section.

Rule of thumb for placement:

  1. The style tag is always placed above the elements being styled. Placing it within the head section is the standard practice.
  2. The script tag usually is placed at the bottom of the body. But then again, it depends on what the script is for. It can also be placed in the head section.

Example of CSS:

Example of JS:

TECHNIQUE 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 choose —
    1. Yes ➡️ Show mobile template on mobile devices.
    2. No ➡️ Show desktop template on mobile devices.
  • If we choose the Yes, then pick the Custom option. Afterwards, we need to work on the desktop view and mobile view separately.
  • If we choose No, then we only need to work on one template. This template will be shown on both desktop and mobile.
TECHNIQUE TOP
✒️ Edit
Monkey Raptor uses cookies for analytics, advertisements, and functionality. Privacy Policy