How to use Blogger Conditional Tags to show/ hide widgets in specific page

 In this article, I will show you how you can use the Blogger conational tag to show or hide any widget in specific pages like homepage, post pages, archive pages etc. 

How load widgets on specific page using blogger conditional tag

Conditional tags in Blogger theme code allows us to dynamically inject any code to a specific page and exclude it from all other pages. so, in this way we can easily speedup our blog loading speed. 

So, let's understand what the conditional tags and how you can use on your blogger website. 

Suppose you want to display a sidebar widgets only on homepage and exclude it from all other pages like post pages or archive pages. 

Then you can easily do that by using the blogger conditional tag in the theme code. 

<b:widget cond='data:view.isHomepage' id='HTML1' type='HTML'>

</b:widget>

Here you have to add the cond="data:view.isHomepage" in the widget code to display the widget only in the homepage. 

So, after adding this conditional code, this widget will stop loading from all other pages except homepage. So, in this way you can block unnecessary code from loading in a page. 

You can similarly apply different rule for different pages. 

No Command Description
1 data:view.isHomepage Specifies the homepage of blogger blog.
2 data:view.isPost Specify the posts or article page
3 data:view.isPage Specifies the pages in blogger, not posts.
4 data:view.isArchive Specifies the archive page of your blogger blog
5 data:view.isLabelSearch Specifies whether the page is search by label or not
6 data:view.isMobile Specifies whether the client device is mobile or not.
7 data:view.isLayoutMode Determine the layout mode of your blogger blog

List of Conditional tags for page types

You can use if condtion in blogger to load the CSS or Javascript file in specific pages like the homepage, post pages, archive pages etc. You need to wrap the if constional code just above and below the code.

1. Homepage

<b:if cond='data:blog.url == data:blog.homepageUrl'> 
<!-- only homepage -->
</b:if>

2. Item (post) pages

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

3. Archive page

<b:if cond='data:blog.pageType == "archive"'>
<!--archive_Page-->
</b:if>

4. Error Page (404)

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

5. Static page

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

6. Specific Label Page

<b:if cond='data:blog.searchLabel == "blogging"'>
<!-- content of label Blogging -->
</b:if>

7. AND

<b:if cond='data:blog.pageType == "index"'>
  <b:if cond='data:blog.searchQuery'>
    <!--search_page AND index_page-->
  </b:if>
</b:if>

You can use And condtion to apply multiple condtion to the same code. Here in the above example you can see it is targeted both search page and index page at the same time.

8. OR

<b:if cond='data:blog.pageType == "index"'>
<!-- static page OR index page' -->
<b:else/>
<b:if cond='data:blog.pageType == "static_page"'>
<!-- static page OR index page' -->
</b:if>
</b:if>

9. NOT

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

9. Specific URL

<b:if cond=’data:blog.url == “URL of the page“‘>
 <!--Your HTML, CSS or JS code-->
</b:if>

Blogger condtional tag is super helpful to load the CSS and javascript efficiently and only load on pages where the code is actually needed and excluded from all other pages

If you have any doubts feel free to ask me in the comment section.