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 on specific pages like the 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/ Category pages |
| 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 |
You can Learn more about how this Conditional Tags works in Blogger website by watching this below video.
List of Conditional tags for page types
You can use if condition in blogger to load the CSS or Javascript file on specific pages like the homepage, post pages, archive pages, etc. You need to wrap the if conditional 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 at both search pages and index pages 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 loads on pages where the code is actually needed and excluded from all other pages
Read Also: How to Load widgets or Script only in desktop or mobile devices in Blogger
If you have any doubts feel free to ask me in the comment section. or ask in our Telegram Group.
how can I avoid specific labels from showing in the home page?