Using OR, AND, NOT Logic Operators in Blogspot Template Layouts

Are we are going to discuss electronics or logic gates here? Of course not! :) Blogger Team has recently made some performance based changes to their XHTML Widget tags for layouts. They have introduced some logic operators to simplify long conditional expression using short and simple syntax thanks to Blogger Logical Operators. I have been testing Blogger templates since 7 years and the best thing I loved about it is the simplicity to retrieve data from the server. Although users are restricted from accessing the server side and database records but they have been given a great deal of access to call objects on Front end using Layout tags.  Lets get straight to the fun ride!

For The Record: This is the first unofficial detailed tutorial of its kind across the web on Blogspot layout tags

Must Read: Hide/Show Widgets/Gadgets in Home/post/static/archive pages in Blogger

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	! and 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.