Connect with us

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

How To Insert Conditional Tags On Blogger Theme

Blogger

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

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:

 

Pages:

  • Pages in Blogger are static pages that you create from Pages section like about us, privacy policy etc. They have a URL in this format: https://www.meersworld.net/p/about.html. Here /p/ tells that it is a page.

 

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.

 

Blogger Templates

 

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>

 

Pages

  • To show a widget only on the static pages:

 

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

 

  • To show a widget on all the pages except the static pages:

 

<b:if cond=’data:blog.pageType != “static_page”‘>
—— 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.

 

  • 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.

 

 

Meer Basit is the founder of Meer’s World. He’s been running the show since launching the blog back in 2018. By background he is a computer scientist. Primarily, he creates content around blogging (WordPress, Blogger, Tumblr), SEO, affiliate programs, earn-online, reviews, eCommerce, & technology. He has got years of professional experience in web programming, computer programming, databases, data warehousing, & transcription. In general, he likes traveling, gardening, watching movies, is a passionate cricketer, creative writer, and a GSD lover.

2 Comments

2 Comments

  1. Adclub

    November 14, 2020 at 1:43 pm

    how to show any widget in two specific page , when we think about it how can we put two specific page link url in condition … pls help bro…. and happy diwali

    • Meer Basit

      November 14, 2020 at 6:58 am

      Happy Diwali! Please go through “OR Condition” above I have add the solution there.

Leave a Reply

Your email address will not be published. Required fields are marked *

More in Blogger

To Top