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.

Loops

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'>
 <data:name_of_element/>
 <data:name_of_element.name_of_property/>
</b:loop>

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'>
 <li>
  <a class='profile-name-link g-profile' expr:href='data:i.userUrl' expr:style='&quot;background-image: url(&quot; + data:i.profileLogo + &quot;);&quot;'>
   <data:i.display-name/>
  </a>
 </li>
</b:loop>

Branching

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 -->
<b:else/>
 <!-- Do something if all conditions are false -->
</b:if>

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;'>
 This is INDEX PAGE
</b:if>
<b:if cond='false'>
 This is the LEGEND if (0)
</b:if>

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
</b:if>

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'/>

Update

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:ifcond=‘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;”‘>…