Blogger Conditional Tag — b:if and b:else

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

---

List of Conditions

• Item
• Static
• Index
• Archive
• Homepage
• Specific URL
• Error Page
• Backlink
• Display Name
• Number of Comments
• Jump Link
• Commenting Enabled
• Others

---

Techniques list

• Escaping Quotation Mark
• Comparing Operators
  • Numeral
  • Non-numeral
• b:else
• b:elseif
• Stacking b:if
• b:if in Widget
• Tinkering Widget Content
• Global CSS/JS
• Mobile Template
• External References

---

ITEM

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

<b:if cond='data:blog.pageType == "item"'>...content...</b:if>

LIST TOP

STATIC

Show content only on static page(s):

<b:if cond='data:blog.pageType == "static_page"'>...content...</b:if>

LIST TOP

INDEX

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

<b:if cond='data:blog.pageType == "index"'>...content...</b:if>

For instance, this URL pattern:

[your_blog_url]/search/label/[YOUR_LABEL]

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

<b:if cond='data:blog.pageType == "archive"'>...content...</b:if>

For instance, this URL pattern:

[your_blog_url]/2025/01

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

Also, change the [your_blog_url] with your actual blog URL.

LIST TOP

HOMEPAGE

Show content only on homepage URL of the blog:

<b:if cond='data:blog.url == data:blog.homepageUrl'>...content...</b:if>

LIST TOP

SPECIFIC URL

Show content only on a specific URL on the blog:

<b:if cond='data:blog.url == "specific-URL"'>...content...</b:if>

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

https://blogname.blogspot.com/2022/01/post.html

Do not use relative URL, like /2022/01/post.html. Put absolute URL like the example.

LIST TOP

ERROR PAGE

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

<b:if cond='data:blog.pageType == "error_page"'>...404 note content...</b:if>

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:

<b:if cond='data:post.showBacklinks'>...content...</b:if>

LIST TOP

DISPLAY NAME

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

<b:if cond='data:displayname == "specific-name"'>...content...</b:if>

LIST TOP

NUMBER OF COMMENTS

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

<b:if cond='data:post.numComments == [number_here]'>...content...</b:if>

LIST TOP

JUMP LINK

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

<b:if cond='data:post.hasJumpLink'>...content...</b:if>

LIST TOP

COMMENTING ENABLED

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

<b:if cond='data:post.allowComments'>...content...</b:if>

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 mark) with ".

Example for the item Condition

From this:

<b:if cond='data:blog.pageType == "item"'>...content...</b:if>

Into this:

<b:if cond='data:blog.pageType == &quot;item&quot;'>...content...</b:if>

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.

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 <
• greater than (>) is >

Example for escaping greater than operator

From this:

<b:if cond='data:post.numComments > 1'>...content...</b:if>

Into this:

<b:if cond='data:post.numComments &gt; 1'>...content...</b:if>

---

Non-Numeral

We have two options:

• == TRUE
• != FALSE

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

<b:if cond='data:blog.url != data:blog.homepageUrl'> ...content... </b:if>

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's placed within the b:if

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

For example:

<b:if cond='data:blog.url == data:blog.homepageUrl'> [...content1...] <b:else /> [...content2...] </b:if>

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

<b:if cond='data:blog.url == data:blog.homepageUrl'> [...content1...] <b:elseif cond='YOUR_CONDITION_HERE'/> [...content2...] <b:elseif cond='YOUR_OTHER_CONDITION_HERE'/> [...content3...] <b:else /> [...content4...] </b:if>

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

TECHNIQUES TOP

---

Stacking b:if

<b:if cond='data:blog.pageType == "item"'> <b:if cond='data:blog.url != "specific-URL"'> [...content1...] <b:else /> [...content2 -- inner b:if...] </b:if> <b:else /> [...content2 -- outer b:if...] </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.

That stacking example is actually redundant. We can just use the [specific URL] condition for that.

For (latest) AND operation please read this post.

For (latest) OR operation please read this post.

TECHNIQUES TOP

---

b:if in Widget

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

1. Open the Blogger HTML Template.
   • Go to Template ➡️ Edit HTML
2. 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 Template (using either way above), then jump (there's the widget button on top of the HTML template) to HTML1, expand it, and we will see these lines:

<b:widget id='HTML1' locked='false' title='' type='HTML'> <b:includable id='main'> <!-- only display title if it's non-empty --> <b:if cond='data:title != &quot;&quot;'> <h2 class='title'><data:title/></h2> </b:if> <div class='widget-content'> <data:content/> </div> <b:include name='quickedit'/> </b:includable> </b:widget>

To control the whole HTML1 widget appearance, we can 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:

<b:widget id='HTML1' locked='false' title='' type='HTML'> <b:includable id='main'> <!-- only display on item page type (post) --> <b:if cond='data:blog.pageType == "item"'> <!-- only display title if it's non-empty --> <b:if cond='data:title != &quot;&quot;'> <h2 class='title'><data:title/></h2> </b:if> <div class='widget-content'> <data:content/> </div> </b:if> <b:include name='quickedit'/> </b:includable> </b:widget>

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.

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:

<b:widget id='HTML1' locked='false' title='' type='HTML'> <b:includable id='main'> <!-- only display title if it's non-empty --> <b:if cond='data:title != &quot;&quot;'> <h2 class='title'><data:title/></h2> </b:if> <div class='widget-content'> <!-- Comment out the data tag --> <!-- <data:content/> --> <!-- Put custom HTML elements and/or JS here as the replacement. --> </div> <b:include name='quickedit'/> </b:includable> </b:widget>

Example with b:else

It can be placed like so:

<b:widget id='HTML1' locked='false' title='' type='HTML'> <b:includable id='main'> <!-- Show widget only on item page type --> <b:if cond='data:blog.pageType == "item"'> <!-- only display title if it's non-empty --> <b:if cond='data:title != &quot;&quot;'> <h2 class='title'><data:title/></h2> </b:if> <div class='widget-content'> <!-- We can still use this data tag (set content from layout) --> <!-- <data:content/> --> <!-- Or put custom HTML elements and/or JS here as the replacement. --> </div> <b:else/> <!-- Show widget on OTHER THAN item page type --> <!-- Different content here. --> </b:if> <b:include name='quickedit'/> </b:includable> </b:widget>

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 is always placed on top of the elements being styled. Placing on top of body or on 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):

<b:if cond='data:blog.pageType == "item"'> <style>/*<![CDATA[*/ /* CSS rules here. */ /*]]>*/</style> </b:if>

Example for script (JS):

<b:if cond='data:blog.pageType == "item"'> <script>/*<![CDATA[*/ /* JavaScript here. */ /*]]>*/</script> </b:if>

TECHNIQUES TOP

---

Mobile Template

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

• 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. Afterward, 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

---

External References

Resources for more information about special Blogger tags:

• Layout data tags help topic
• Widget tags for layouts help topic
• Page element tags for layouts help topic

Blogger Special Operators:

• Documentation on Blogger support

Additional:

• Finding out your Blogger ID number help topic

TECHNIQUES TOP   LIST TOP