Blogger

How To Insert Conditional Tags On Blogger Theme – Step By Step

Published on February 27, 2020

Conditional tags are used when you customize your Blogger theme. By inserting a certain condition you can restrict the widgets to appear/hide on certain page or pages like Homepage, Pages, Item Pages, Labels, Specific Label, Specific Page and Specific Item Page.

In this tutorial we will cover following topics:

Different Types Of Pages In Blogger
List Of Conditional Tags
How To Insert Conditionals Tags In Blogger Theme.

Types Of Pages In Blogger

Homepage:

Homepage is the main webpage of a website like when you click https://www.meersworld.net/ the homepage of Meer’s World will be open.

Item Page:

When you click a post or article, its details are open in an item page. It has a URL in this format: https://www.meersworld.net/2020/02/how-to-download-tiktok-videos-on-computer.html.

Search/Label Page:

Search/Label page contain posts of specific label. It has a URL in this format: https://www.meersworld.net/search/label/Blogger.

Symbols Used In Conditions

!=

“!=” means not equal to.

= =

“= =” means equal to.

=

“=” indicates equality like 2+3=5 or like v=10, means v has the value 10.

List Of Conditional Tags

Homepage

To show a widget only on the Homepage:

<b:if cond=’data:blog.url == data:blog.homepageUrl’>

——— Widget Code ———-

</b:if>

To show a widget on all the pages except Homepage:

<b:if cond=’data:blog.url != data:blog.homepageUrl’>
——— Widget Code ———-
</b:if>

Item Page

To show a widget only on the item page:

<b:if cond=’data:blog.pageType == “item”‘>
——— Widget Code ———
</b:if>

To show a widget on all the pages except item page:

<b:if cond=’data:blog.pageType != “item”‘>
—– Widget Code —–
</b:if>

Search/Label Page

To show a widget only on the search/label page:

<b:if cond=’data:blog.searchLabel’>
—– Widget Code —–
</b:if>

To show a widget on all the pages except the search/label:

<b:if cond !=’data:blog.searchLabel’>
—– Widget Code —–
</b:if>

To show a widget only on specific search/label. Replace Label_Name with your label name. For instance we want to show a widget only on the label “Sports”, so we will replace Label_Name with “Sports”. Label names are case-sensitive, so write them as it is.

<b:if cond=’data:blog.searchLabel == “Label_Name”‘>
—– Widget Code —–
</b:if>

To show a widget on all the pages except a specific search/label.

<b:if cond=’data:blog.searchLabel != “Label_Name”‘>
—– Widget Code —–
</b:if>

Specific Page

To show a widget only on a specific page. In this conditional tag you can paste the URL of any post/article, page, item page or label. As we have shown on Different Types Of Pages On Blogger above that how URLs of different pages look like.
For instance this one is one of our post’s URL : https://www.meersworld.net/2020/01/best-macbook-to-buy-new-apple-macbook-pro.html. We will simply replace Post_URL in the conditional tag with this URL.

<b:if cond=’data:blog.url == “Post_URL”‘>
—- Widget Code —-
</b:if>

If/Else Conditional Tags

In If/Else conditional tags you give more than one option to execute when the first condition is not met. You add Else after the If condition.

<b:if cond=’data:blog.pageType == “static_page”‘>
—- If this condition is true, means if a page that is opened is a static page, the code inside here will be executed and Else part will not be executed.—-
<b:else/>
—– If the first condition is false, means if a page that is opened is not a static page, the code inside here will be executed —–
</b:if>

More Than One If Conditions

You can add more than 1 if conditions as well. It works like AND operator means if both the if conditions are true than the code will be executed. For example we don’t want to show a widget on static pages and item pages, following will be the syntax.

<b:if cond=’data:blog.pageType != “item”‘>
<b:if cond=’data:blog.pageType != “static_page”‘>
— Widget Code —–
</b:if>

</b:if>

OR Condition

OR operator is used to execute a code when any of the IF condition is true. For instance if you want to show a widget only on two pages you can use OR condition. To implement OR condition we use more than one IF conditions. One IF above the ELSE tag and the other IF conditions inside the ELSE tags. Here we are using two IF conditions.

Syntax:

<b:if cond=’data:blog.url == “FIRST_PAGE”‘>

<b:else/>
<b:if cond=’data:blog.url == “SECOND_PAGE”‘>

————- Widget Code ————–

</b:if>
</b:if>

How To Insert Conditional Tags On Blogger Theme

You must have understood different types of pages and conditional tags. Now in this step learn how to insert these conditions in your Blogger theme. It is a good practice to take a backup of your theme before you make any changes on it.

How To Backup & Upload Blogger Template/Theme Step By Step

Sign In to your Blogger.
Click Theme.
Click the “Downward arrow” beside CUSTOMIZE button.

How To Insert Conditional Tags On Blogger Theme 1

Click Edit HTML.

How To Insert Conditional Tags On Blogger Theme 2

Click “Jump to widget” icon.

How To Insert Conditional Tags On Blogger Theme 3

It will list down all your widgets. Remember that the custom widgets will not be listed with the name. They will be listed with HTML Id like HTML 1, HTML 2, etc, but once you click the widget you will see the title of the widget along with the ID like this:

<b:widget id=’HTML5‘ locked=’false’ title=’Sports’ type=’HTML’ version=’2′ visible=’true’>

How To Insert Conditional Tags On Blogger Theme 4

Once you click the widget your cursor will go to first line of the widget code.
Scroll down slowly to find the line <b:includable id=’main’>. For some built-in widgets like Header, Featured Post have <b:includable id=’main’ var=’this’> so don’t get confused with the additional var=’this’.
You have to insert the condition below <b:includable id=’main’>, and ending tag of the condition </b:if> before </b:includable>
Widget body ends at </b:widget> tag.

<b:includable id=’main’>
<b:if cond=’data:blog.pageType == “item”‘>
<div class=’widget-content’>
<data:content/>
</div> </b:if>
</b:includable>
</b:widget>

How To Insert Conditional Tags On Blogger Theme 5

Sometimes the code from <b:includable id=’main’> to </b:includable> shrinks in one line. Click the left arrow beside the code to expand and insert the conditional tags as shown above..

How To Insert Conditional Tags On Blogger Theme 6

Save your theme by clicking at the bottom-right corner of the theme.
Refresh your blog and check whether the conditionals tags have been applied or not.
You can add any conditional tag in the similar way on any widget, custom or built-in.
Get access to all our Blogger Tutorials.

If you like this post then don’t forget to share with other people. Share your feedback in the comments section below.