Loops, Branching and Expression Operators in Blogger XML code

This article will help you understanding about loops and branching syntax of Blogger XML template code. If you are a template developer, you must read this.


You can use b:loops to scan all element in an array. The syntax will be:

<b:loop values='data:name_of_array' var='name_of_element'>

name_of_array is the name of an array variable. You CAN NOT input any name here, you must follow the real names in Blogger variable list.

name_of_element you CAN input any name here. If element is a string or number, you can output it directly by using <data:name_of_key/>. If it’s an object, you can use <data:name_of_key.name_of_property/> to access its properties. name_of_property must follow the real name in Blogger variable list.

Example with the loop inside Profile widget

<b:loop values='data:authors' var='i'>
<a class='profile-name-link g-profile' expr:href='data:i.userUrl' expr:style='&quot;background-image: url(&quot; + data:i.profileLogo + &quot;);&quot;'>


You can use b:if for branching your code. The full syntax will be:

<b:if cond='your_condition_expression'>
<!-- Do something if the condition is true -->
<b:elseif cond='another_condition_expression'/>
<!-- Do something if another condition is true -->
<!-- Do something if all conditions are false -->

The condition expression is ==, !=, &gt;=, &lt;= (Blogger did not allow you input >= or <= so you must use &gt;= and &lt;=). Example:

<b:if cond='data:blog.pageType == &quot;index&quot;'>
<b:if cond='false'>
This is the LEGEND if (0)

You can also combine more than one condition using &amp;&amp; and || (Blogger not allow you input &&, so you must use &amp;&amp;)

<b:if cond='data:blog.pageType == &quot;item&quot; &amp;&amp; data:blog.postImageUrl'>
This is COOL

Blogger also supported express branching conditions. The syntax is:

your_condition_expression? action_when_true : action_when_false

Here is an example for printing viewport meta data in template header

<meta expr:content='data:blog.isMobile ? &quot;width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0&quot; : &quot;width=1100&quot;' name='viewport'/>


Previously, the expressions in Blogger’s templates could
Add or concatenate values with +
Subtract values with –
Check for equality with != and ==
Compare values with <, >, <= and >=

Now, support has been added for many more expression operators, including:

  • Inversion of true/false values with !/not e.g. <b:if cond=‘!data:post.allowComments’>
  • Picking between 2 values with ?: e.g. <a expr:class=‘data:post.allowComments ? “comments” : “no-comments”‘
  • Checking if a value is a member of a set or array, with in/contains e.g. <b:if cond=‘data:blog.pageType in {“index”, “archive”}’>…
  • Combining multiple conditions with and/or e.g. <b:if cond=‘data:blog.pageType == “index” and data:post.allowComments’>…
  • Changing the order of operations with () e.g. <div expr:style=‘”max-width: ” + (data:width + 10) + “px;”‘>…