How to use Conditional Tags on Blogger

Blogger (Blogspot) Conditional Tags

Conditional Tags are a boolean data type (a data type that has two possible values). It allows you to tell the code to act differently in specific situations.[1][2]

How do I add the coñditional tags

Visit Blogger.com

Select your website

Click on Theme

Click on Edit HTML

Paste Your Code

Right after the <head> tag, paste the tags.

Paste your code like this.

After pasting the code will look something like this.

How your code will look like

Save Theme

Click on save to see effect of the tags you just added.

Then proceed to click on "Save Theme"

The Tags

<b:if cond='data:blog.url == data:blog.homepageUrl'><title><data:blog.title/> - Find and Read Information</title></b:if>
<b:if cond='data:blog.pageType == "item"'><title><data:blog.pageName/> - <data:blog.title/></title></b:if>
<b:if cond='data:blog.pageType == "archive"'><title><data:blog.pageName/> in <data:blog.title/></title></b:if>
<b:if cond='data:blog.pageType == "static_page"'><title><data:blog.pageName/> - <data:blog.title/></title></b:if>
<b:if cond='data:blog.pageType == "index"'><b:if cond='data:blog.searchLabel'><title><data:blog.pageName/> - <data:blog.title/></title></b:if></b:if>
<b:if cond='data:blog.pageType == "error_page"'><title>Page Not Found</title></b:if>
<b:if cond='data:blog.pageType == "index"'><b:if cond='data:blog.url != data:blog.homepageUrl'><title><data:blog.pageTitle/> - All Post</title></b:if></b:if>

Wait, don't go yet. At least you should know how the codes work and what they do. Let me simplify and explain each tag one by one below.

Homepage<b:if cond="data:blog.url == data:blog.homepageUrl"><title><data:blog.title/> - Optimization Ready</title></b:if>

<data:blog.title/> - Optimization Ready

This Tag defines only the homepage of your blog, it tells your blog home page to show your website title like this "Search Engine Rank - Optimization Ready". It does not define other pages.

Post Page<b:if cond="data:blog.pageType == "item""><title><data:blog.pageName/> - <data:blog.title/></title></b:if>

<data:blog.pageName/> - <data:blog.title/>

This tag defines how post pages should look like in the title bar.

Archieve Page<b:if cond="data:blog.pageType == "archive""><title><data:blog.pageName/> in <data:blog.title/></title></b:if>

<data:blog.pageName/> in <data:blog.title/>

This code is for archive pages like January, February, 2019, 2020 like that. This one tells the archive pages to look like this "2019 in Blogtitle"

Blog Page<b:if cond="data:blog.pageType == "static_page""><title><data:blog.pageName/> - <data:blog.title/></title></b:if>

<data:blog.pageName/> - <data:blog.title/>

This tag defines the Pages on your blog.

Label Page<b:if cond="data:blog.pageType == "index""><b:if cond="data:blog.searchLabel"><title><data:blog.pageName/> - <data:blog.title/></title></b:if></b:if>

<data:blog.pageName/> - <data:blog.title/>

Defines all label pages title that if a page is a "Label" then this <data:blog.pageName/> - <data:blog.title/>

Error Page<b:if cond="data:blog.pageType == "error_page""><title>Page Not Found</title></b:if>

Page Not Found

Defines a error page

Next Page from Homepage<b:if cond="data:blog.pageType == "index""><b:if cond="data:blog.url != data:blog.homepageUrl"><title><data:blog.pageTitle/> - All Post</title></b:if></b:if>

<data:blog.pageTitle/> - All Post

Defines all next pages on the homepage

Other common conditional tags

Specific Post

<data:blog.pageName/> - <data:blog.title/> <b:if cond="data:blog.url == data:blog.canonicalHomepageUrl + "2020/01/post-title.html""> <title><data:blog.pageName/> - <data:blog.title/></title> </b:if>

This code defines a specic post from this location /2020/01/post-title.html. it tells it to only use the specific title for the page.

Specific Label<b:if cond="data:blog.searchLabel == "LabelName""> <title><data:blog.pageName/> - <data:blog.title/></title> </b:if>

<data:blog.pageName/> - <data:blog.title/>

It is used to command the tag to define a specific label page

Search Page<b:if cond="data:blog.searchQuery"> <title><data:blog.pageName/> - <data:blog.title/></title> </b:if>

<data:blog.pageName/> - <data:blog.title/>

This tag defines the search pages telling all the search pages on your website to look something like this "Search Query - Blogtitle"

Specific Search Query

<data:blog.pageName/> - <data:blog.title/> <b:if cond="data:blog.searchQuery == "Seo""> <title><data:blog.pageName/> - <data:blog.title/></title> </b:if>

This tag defines a specic search query which is (Seo) that when you searched for Seo, it should appear like " Seo - Blog title".

Static Page<b:if cond="data:blog.pageType == "static_page""> <title><data:blog.pageName/> - <data:blog.title/></title> </b:if>

<data:blog.pageName/> - <data:blog.title/>

Defines all Statics page (pages that looks like this /p/title.html).

Specific Static Page<b:if cond="data:blog.url == data:blog.canonicalHomepageUrl + "p/page.html""> <title><data:blog.pageName/> - <data:blog.title/></title> </b:if>

<data:blog.pageName/> - <data:blog.title/>

Defines a static page with the "p/page.html" specific destination.

Are conditional tags only used for titles?

No, conditional tags are used to show or hide certain objects in specic place. It can also be use to hide or show widgets on blogger. Let me show you some examples.

Static Page

<b:if cond="data:blog.pageType == "static_page""> Widget code here</b:if>

This code will only let your widget display on static pages.

Label Page

<b:if cond="data:blog.searchLabel"> Widget Code here </b:if>

This will load widget in label or search pages.

You can do that on and on and on...

In this case adding the code will be a little different from adding the conditional tittle tags

How to add Conditional tags for widgets

After clicking on Edit HTML then

Click on "Jump to Widget"

Click on Jump to Widget

Select Your Widget

Select your widget and paste your conditional tags.

Select your widget then save theme

Save Theme

After pasting your code, click on save, you're now done. Congratulations!.

Conclusion

This tags will help you structure your mobile or desktop site, it will also help your site prepare for optimization in terms of speeding up your blog and setting different page titles for different pages. In other words it helps you set better experience for users.

Reference

https://developer.wordpress.org/themes/references/list-of-conditional-tags/
https://www.hongkiat.com/blog/wordpress-conditional-tags-beginners/

Search This Blog

SearchEngRank