How To Hide Blogger Widgets From Certain Pages

How To Hide Blogger Widgets From Certain Pages?

There are several ways available on the internet for concealing / deleting widgets by utilising CSS, jQuery, or Blogger condition tags to hide the inner content of the widget. However, if you use those methods, Blogger will still load the widget, which may slow down your site's loading speed. So, we don't have any good suggestions for concealing Blogger widgets on certain pages?

No, we already have one. After some study and testing with Blogger tags, I discovered a really easy and thorough solution to delete or prohibit a widget from being loaded on specific pages. Allow me to demonstrate.

Removing or hiding a widget from the home page

For example, suppose you wish to remove a widget from your home page. To begin, go to Template / Edit HTML, then click the Jump to widget button and choose the widget you wish to hide. In this example, I'll conceal my HTML1 widget.

The regular HTML widget will have the following code:

 

<b:widget id='HTML1' locked='false' title='HTML Widget' type='HTML'>
 <b:includable id='main'>
  <!-- only display title if it's non-empty -->
  <b:if cond='data:title != &quot;&quot;'>
   <h2 class='title'>
    <data:title/>
   </h2>
  </b:if>
  <div class='widget-content'>
   <data:content/>
  </div>
  <b:include name='quickedit'/>
 </b:includable>
</b:widget>

Now, to hide this widget from home, please add below code after

<b:includable id='main'> tag:

<b:if cond='data:blog.url == data:blog.homepageUrl'>
 <b:remove/>
</b:if>

The completed code will look something like this:

<b:widget id='HTML1' locked='false' title='HTML Widget' type='HTML'>
 <b:includable id='main'>
  <b:if cond='data:blog.url == data:blog.homepageUrl'>
   <b:remove/>
  </b:if>
  <!-- only display title if it's non-empty -->
  <b:if cond='data:title != &quot;&quot;'>
   <h2 class='title'>
    <data:title/>
   </h2>
  </b:if>
  <div class='widget-content'>
   <data:content/>
  </div>
  <b:include name='quickedit'/>  </b:includable>
</b:widget>

Now, click the Save template button and inspect your home page to ensure that the widget has been entirely deleted. You may inspect the source code of the home page and locate the id of the widget (in my example, id='HTML1′), but you will not find anything. It's a miracle.

Describe how it works.

The rule is straightforward: if a widget has an undefined Blogger tag, it will be deleted entirely.

The line: <b:if cond='data:blog.url == data:blog.homepageUrl'> in the sample code above will check whether this is the home page, and the undefined tag <b:remove/> will assist us in entirely deleting the widget.

You may use a tag other than <b:remove/>, but it must be an undefined Blogger tag. For instance, <b:return/>, <b:exit/>, <b:hide/>, and so on.

Hide yourself from other pages.

Blogger Basic Global Data Tags provide further information regarding page type condition tags. In this post, I will provide some simple examples of concealing widgets for specific Blogger page kinds, as follows:

From Homepage:

<b:if cond='data:blog.url == data:blog.homepageUrl'>
 <b:remove/>
</b:if>

From Indexed Pages

home, label, search page or all posts page (include home and its older posts pages)

<b:if cond='data:blog.pageType == &quot;index&quot;'>
 <b:remove/>
</b:if>

From Static Pages

<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
 <b:remove/>
</b:if>

From Articles, Posts

<b:if cond='data:blog.pageType == &quot;item&quot;'>
 <b:remove/>
</b:if>

From Archive Pages

<b:if cond='data:blog.pageType == &quot;archive&quot;'>
 <b:remove/>
</b:if>

From Mobile

<b:if cond='data:blog.isMobileRequest'>
 <b:remove/>
</b:if>

Showing instead of hiding

If you wish to display rather than hide, use!= instead of ==. For example, if you want to show on the main page but hide from others, use the following:

<b:if cond='data:blog.url != data:blog.homepageUrl'>
 <b:remove/>
</b:if>

Or you can use ! expression. For example hide from mobile:

<b:if cond='!data:blog.isMobileRequest'>
 <b:remove/>
</b:if>

Or you can also use <b:else/> expression. For example hide from mobile:

<b:if cond='data:blog.isMobileRequest'>
<b:else/>
 <b:remove/>
</b:if>