Loops, Branching and Expression Operators in Blogger XML code

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

Post a Comment

* Please Don't Spam Here. All the Comments are Reviewed by Admin.
Post a Comment (0)

buttons=(Accept !) days=(30)

Our website uses cookies to enhance your experience. Learn More about our cookie policy.
Accept !
To Top