Blogger conditionnel tags and how to use them

Blogger unlike other popular CMS A content management system is a software application that can be used to manage the creation and modification of digital content. CMSs are typically used for enterprise content management and web content management.out there uses XML templates written in HTML, CSS and JavaScript. A CMS Like WordPress used by many websites is coded using PHP The Hypertext Preprocessor is a popular general-purpose scripting language that is especially suited to web development.

That said, we won't be discussing anything related to PHP coding language here, but rather we will be focused on Blogger conditional tags and how to use them.

Beside, the normal HTML tags used in Blogger templates, we also have Blogger's own custom tags like the tag for creating sections(<b:section> .... </b:section>). The conditional tags are one of the custom tags used in Blogger XML templates and below we will be telling you more about them.

Blogger conditional tags and usage.

These special tags allow you to set actions for specific page types and widgets. You can use them to better the experience of your blog by limiting the display of certain template codes on specific device widths. So, you can use them to target CSS, meta tags and javascript.

Below we have a list of all the different Blogger conditional tags. Each of them has the structure

<b:if cond='condition_expression'>
    <!-- content when condition is satisfied -->
</b:if>

Conditional Blogger tags

Targeting 404 Error page

<b:if cond='data:blog.pageType == "error_page"'>
<!-- all error codes for 404 error pages here-->
</b:if>

Conditional tag targeting Homepage

<b:if cond='data:blog.url == data:blog.homepageUrl'> 
<!-- HTM, JS, CSS here will target only homepage -->
</b:if>

For Archive pages

<b:if cond='data:blog.pageType == "archive"'>
<!-- Enter codes to be  target all archive Pages here-->
</b:if>

For label pages

<b:if cond='data:blog.searchLabel'>
<!--  This will target all label pages -->
</b:if>

Conditional tag for static pages

<b:if cond='data:blog.pageType == "static_page"'>
<!-- Codes here will affect all static pages -->
</b:if>

Conditional tags for items(post) pages

<b:if cond='data:blog.pageType == "item"'>
<!-- all item pages -->
</b:if>

Search page

<b:if cond='data:blog.searchQuery'>
<!-- all search pages -->
</b:if>

For specific static pages

<b:if cond='data:blog.searchQuery == "foo"'>
<!-- for query 'foo' -->
</b:if>

Conditional tag targeting specific label

<b:if cond='data:blog.searchLabel == "foo"'>
<!-- for label 'foo' -->
</b:if>

For Index pages

<b:if cond='data:blog.pageType == "index"'>
<!-- all index pages -->
</b:if>

Tag for a particular post page 

<b:if cond='data:blog.url == data:blog.canonicalHomepageUrl + "p/foo.html"'> 
<!-- a specific static page with name 'foo' -->
</b:if>

Other conditional tags

Apart from the conditional tags above which can be used to;

• Display Javascript content on particular occasions as well as hide them
• Apply customised CSS to a particular post, page, archive page, static page or search page etc
• Display widgets to specific blog sections or pages, etc

We also have situations where Blogger conditional tags. Some can be used to add run a script, display custom CSS and much more on different blog parts or display them selectively depending on certain factors.

For example, we are using the Blogger conditional tag with the else statement to display different description to label pages on our Blogger blog. In this case, we will make use of the <b:else /> tag and come out with an "OR" conditional tag.

<b:if cond='data:blog.searchLabel == "Blogger Widgets"'>
<!-- Add description box to page with label "Blogger Widgets -->
     <b:else/>
<b:if cond='data:blog.searchLabel == "SEO"'>
 <!-- Add description box to page with label "SEO"-->
   </b:if>
</b:if>

 Looking back at the conditional tags we have above, the "==" sign there signifies equals to. On the other hand, we can use a different relational statement to reverse a condition. Here, we use "!= "relational sign or operator.

That is;

• ==  is for when the statement is equal to condition to make the comparison 
• !=  is for when the statement is not equal to condition to make the comparison. 

<b:if cond=' data:blog.url == data:blog.homepageUrl'>
<!-- code will display if you are on homepage -->
 // code goes here...
</b:if>

<b:if cond=' data:blog.url != data:blog.homepageUrl'>
<!-- code here will not be displayed if you are on homepage -->
 // code goes here...
</b:if>

Another way of using the Blogger conditional tag is without adding the relational operators == or !=. In such a case, you use the conditional tag as follows.

<b:if cond='!data:post.allowComments'>
<! -- if comments not allowsed -->
// Code here will run
</b:if>

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 a particular code

Concluding

From what we have explained above, the blogger conditional tag can be used for pretty much any kinds of stuff and can allow you to add awesome features to your blog to by playing around with them.

Note that it won't be wise if your test conditional tags you aren't versed with on your live site. Should in case you want to do so, consider backing up your template before trying it.