For The Record: This is the first unofficial detailed tutorial of its kind across the web on Blogspot layout tags
List of Operators Supported by Blogger Templates
At present blogspot templates support all major operators used in basic programming which are:
| Operator | Syntax | Definition |
|---|---|---|
| OR | or and || | OR or UNION is used to combine several conditions, any of which if true would render the HTML content. You can declare it either as or or ||. Prevents repeating b:if tags |
| AND | and and && | And or INTERSECTION is used to combine two or more than two conditions. All conditionals must be true. You can use either and or the ampersand symbols &&. Prevents repeating b:if tags |
| NOT | | NOT or EXCLUSION is used when you want to exclude something from the condition. Use either not or ! Best used with Membership operator |
| Equivalence | == and != | Equity is used to to check what a data value is. Here '==' means equal to and '!=' means not equal to |
| Ternary Selector | [condition] ? [result when true] : [result when false] | Used to select one of two options, based on a condition. |
| Membership | in and contains | Used to check whether a value is one of several possible values. You can define the set using either square brackets [ ] or Curly braces { }. Prevents repeating OR |
Example Usage of These Operators
Below I will give brief examples of how smartly these operators simplify an expression and prevents repeating a condition.
OR Example
Suppose you wish to show a HTML code only inside index pages (search pages, homepage) and item pages (Posts) but not on Static pages or archive pages. This is how you will write down the conditional expressions using widget layout tags.
Previously without 'or' the expression was written as such:
<b:if cond='data:blog.pageType == "index"'>
<b:if cond='data:blog.pageType == "item"'>
HTML Code To render
</b:if>
</b:if>
Now with 'or' operator the expression is simplified as such:
<b:if cond='data:blog.pageType == "index" or data:blog.pageType == "item"'>
HTML Code To render
</b:if>
or you can use || instead of or:
<b:if cond='data:blog.pageType == "index" || data:blog.pageType == "item"'>
HTML Code To render
</b:if>
AND and Equivalence Example
Suppose you wish to show a HTML code only on Search pages but not on homepage. Here we are selecting label pages only out of index pages.
Previously without 'and' the expression was written as such:
<b:if cond='data:blog.pageType == "index"'>
<b:if cond='data:blog.url != data:blog.homepageUrl'>
HTML Code To render
</b:if>
</b:if>
Now with 'and' operator the expression is simplified as such:
<b:if cond='data:blog.pageType == "index" and data:blog.url != data:blog.homepageUrl'>
HTML Code To render
</b:if>
or you can use && like this
<b:if cond='data:blog.pageType == "index" && data:blog.url != data:blog.homepageUrl'>
HTML Code To render
</b:if>
You might be thinking what is the different between ! and != then lets try the next example to clear this confusion.
NOT and Membership Example
Unlike != which is only used when comparing/equating two tags, not (!) is used to negate an entire expression. not is mostly commonly used with Membership operator as shown below.
Lets suppose we wish to show a HTML code on all pages except the Posts and Static Pages. We will format our expression as shown below.
Previously without membership operator (contains or in) and NOT operator the expression was written as such:
<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:blog.pageType != "static_page"'>
HTML Code To render
</b:if>
</bi:f>
Now with NOT and membership operator the expression is simplified as such:
<b:if cond='data:blog.pageType not in {"item","static_page"}'>
HTML Code To render
</b:if>
you can also write it like this by placing not before the expression. Note that you can use either [] or {}, same meaning for membership operators.
<b:if cond='not data:blog.pageType in ["item","static_page"]'>
HTML Code To render
</b:if>
Or like this using contains:
<b:if cond='not ["item","static_page"] contains data:blog.pageType'>
HTML Code To render
</b:if>
Combined Use of OR and AND
You can surely make your expression even more in-depth by using OR and AND operator together in a single expression.
In the example below, the HTML code will render only when the page visited by user is either the archive page or Search/Label Page.
<b:if cond='data:blog.pageType == "archive" or (data:blog.pageType == "index" and data:blog.url != data:blog.homepageUrl)'>HTML Code to render
</b:if>
You can group multiple conditions inside the round braces and then compare them as against others. As simple as that!
Ternary Selector Example
Ternary selector is most useful when you need to apply one class out of two classes to any HTML DOM.
In the example below we will use a ternary operator in a div tag to apply a class comments-open when comments are allowed and apply the class comments-closed when the page no more accepts comments
<div expr:class=�data:post.allowComments ? "comments-open" : "comments-closed"'>
HTML Code To render
</div>
This is an excellent way to show your readers a special message when you are no more accepting comments for certain posts.
Need Help?
In our coming tutorials we will make extensive use of these new operators to make sure you are served the most optimized blogger widgets and scripts. We have already started applying these new expressions in posts published last week. Do check how we used Ternary operators along with combined AND, OR and Equivalence operators in this post.
Let us know me know if you need any help or assistance in understanding any syntax. Peace and blessings buddies! :>
