LoginCreate an Account

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,

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;”‘>…
Post Your Comment

Add jQuery to Your Blogger and Blogspot Template Code

JQuery is the very important Javascript Library to make effects, animation and cool functions for your blog. Many Blogger plugins are also ... READ MORE

Add Nivo Image Slider for Blogger Blogspot

Nivo slider is a popular Free Image Slider for web designers. In this article, I will show you how to integrate this to your Blogger / ... READ MORE