How To Hide Blogger Widgets From Certain Pages?
Removing or hiding a widget from the home page
<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 != ""'> <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 != ""'> <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 == "index"'> <b:remove/> </b:if>
From Static Pages
<b:if cond='data:blog.pageType == "static_page"'> <b:remove/> </b:if>
From Articles, Posts
<b:if cond='data:blog.pageType == "item"'> <b:remove/> </b:if>
From Archive Pages
<b:if cond='data:blog.pageType == "archive"'> <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>