How to Display or Hide Widgets on Specific Pages | How to use Blogger Conditional Tags

 

Hi to all, in this article I am going to tell you all about using of blogger conditional tags to show and hide widgets in specific pages like home page, archive pages, post pages etc..

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

First of all we need to know about conditional tags and how you can use it in your blogger websites.

For example if you wan to add a side bar in your blogger website home page only and you want to exclude it in all other pages like archive and post pages, then you can easily do this by using blogger conditional tags.

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

</b:widget>

Here you have to add this tag cond="data:view.isHomepage" in the widget code to display the widget only on the home page of your blogger website.

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

Similarly you can apply a different commands for different pages as shown in below table.

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

Below are the list of conditional tags for page types

Mainly you can use if condition 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 conditional code just above and below the code.

Home Page

---

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

Archive Pages

---

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

Post Pages

---

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

Error Pages

---

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

Static Page

---

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

Specific Label page

---

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

And

---

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

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>

NOT

---

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

Specific URL

---

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

Blogger conditional tag is very very 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.

Conclusion

---

I hope that you have understood about using blogger conditional tags to show and hide widgets in specific pages in blogger website.

If you have any doubts feel free to ask me in the contact page.