The blogger conditional tag is used in various situations to improve SEO, page speed and some other stuff like changing layout of our blog that is very helpful in responsive design. In other words Blogger Conditional Tag allows you to set some content (widgets, meta tag and JS/CSS codes) on your template in a certain condition, that’s why it is meant to create a flexible design of our blog.
On this page we are going to enumerate some useful conditional tag and learning how to use them by giving some sort of example. Keep in mind that by using a conditional tag we must also use conditional statement or we can simply say the “if else” statement along with some relational operator like == and !=.
Conditional Tag Syntax
Every conditional statement should always be open by <b:if> tag along with conditional tag that was added as value of cond. In every opening tag there must be also a closing tag, that’s why we need to add this code </b:if>. The code below simply says that if the URL of a page is your homepage, then the Code 1 will be executed. Take note the relational operator == means is equal.<b:if cond=' data:blog.url == data:blog.homepageUrl'>
Code 1
</b:if>
The ELSE Statement
Another way of making some conditional statement is by using a </b:else> tag or else statement. This is used when the condition on opening tag will return false, then you will do something else. The codes below, simply say that if the current page is a homepage, then Code 1 will be executed, and if it’s not on the homepage, Code 2 will execute.<b:if cond='data:blog.url == data:blog.homepageUrl'>
Code 1
<b:else/>
Code 2
</b:if>
The ELSE IF Statement
The b:elseif is a multiple-case of b:if, this means instead of using multiple if statement we can simplify that one by using b:elseif. Refer to the example below. The Following codes, simply says that if a page is a homepage, then code 1 will execute and if it’s return false it will automatically move to b:elseif statement, then if it return true it will execute the code 2. If in the b:elseif condition return false the execution of codes will move at the b:else statement which is the code 3.<b:if cond='data:blog.url == data:blog.homepageUrl'>
Code 1
</b:elseif cond='!data:post.allowComments'>
Code 2
<b:else/>
Code 3
</b:if>
Reversing a Condition
Reversing a condition is simply replacing an expression operator from == (is equal to) to != (is not equal to). See the example below. The codes simply say that if the page is not a homepage, then Code 1 will not be executed.<b:if cond='data:blog.url != data:blog.homepageUrl'>You may also use ! to a Blogger condition tag that does not require relational operator like == and !=. The example below was reverse because we add the ! in the conditional tag. So the code now says that if a particular post is not a allowing comments then Code 1 will be executed.
Code 1
</b:if>
<b:if cond='!data:post.allowComments'>
Code 1
</b:if>
Combining Multiple Condition
A condition can be combined by simply adding logical operator and/&& and or/|| to a conditional tag. When using the expression and/&& operator the conditional tag must return both true, otherwise it will return false. While the logical operator or/|| operator, either one of the conditional tag must return true to satisfy the conditions or execute the Code 1.In the example below, it says that if a page is not one of the posts, static page and homepage, then Code 1 will execute otherwise it will return false or Code 1 will not be executed.
<b:if cond='data:blog.pageType != “item” and data:blog.pageType != “static_page” and data:blog.url != data:blog.homepageUrl'>
Code 1
</b:if>
List of Useful Conditional Tags
Homepage:<b:if cond='data:blog.url == data:blog.homepageUrl'>Specific Page/URL:
<b:if cond='data:blog.canonicalUrl == "Enter-Your-URL-Here"'/>Blog Posts:
<b:if cond='data:blog.pageType == "item"'>Static Pages:
<b:if cond='data:blog.pageType == "static_page"'>Blog Posts and Static Pages:
<b:if cond='data:blog.url == data:post.url'>Archive/Label Pages:
<b:if cond='data:blog.pageType == "archive"'>404 Error Pages:
<b:if cond='data:blog.pageType == "ERROR_PAGE"'>Mobile View:
<b:if cond='data:mobile'>
