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.

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

Right way to embedded direct javascript code to Blogger template

I just usually forgot how to embedded javascript code to my Blogger templates. So I just want to share with you as a short quote and also ... READ MORE


Change Date & Time for Blog Widget

Access Layout. Click Edit link on Blog Posts gadget. In the Configure Blog Posts window, you will ... READ MORE