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. 

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

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

Suppose you want to display sidebar widgets only on the 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 on the homepage. 

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

You can similarly apply a different rule for different pages. 

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

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 condition to apply multiple conditions to the same code. Here in the above example, you can see it is targeted both search page and an 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 conditional 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.

Choose Language

Content Creator, Blogger, Front-end Developer
Bookmark This Blogger: 😌