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

Contact Form for Blogger on Static Page with CSS only

We knew, Google released Contact Form for Blogger last week. And I received many requests to make a contact form for Blogger on Static page ... READ MORE

Create Your First Page with Blogger

Static pages are different with posts, pages are not showed in blog roll (latest post list) or feeds and also have shorter URLs. And this ... READ MORE