How to Show or Hide Widget on certain Pages on Blogger

Show/Hide Widgets in Blog

Hello friends.. finally after two weeks i am back with a great blogger trick in which i will tell you about the ways by which you can show or hide blogger widgets from specific pages like static pages, particular post, archive pages or a certain page. By default blogger shows all the widgets on all page but by using this code you can configure that widget according to you.Today it became a major topic that how we can hide widgets from specific pages in blogger . I also got this problem when i am designing the html editor for my blog it also takes a large space to fit around that is why i need to remove or hide the widgets from that specific page. This way one day i got an idea to use this conditional attribute which is now i am going to share with you. So friends now don't take tension i am here to solve your problem. In this tutorial I will tell you about a simple trick for the blogger widgets. In this tutorial/trick we will discuss about how you can show or hide widgets from a certain pages. One of my blog reader asked me this question that ‘I want to hide widgets from a specific page’ in reply of that comment I am posting this tutorial for all blogger bogs and other platform. In this tutorial we will highlight some qualities of codes or conditional tags that are used to show or hide an element form a specific page. In this tutorial we will focus on seven conditional tags to show or hide widgets in static, archive or certain pages. So let’s begin-

How To Show or Hide A Widget/Gadget On a certain Page of Blogger?

Now Follow these steps below-

• Go to Blogger Dashboard > Layout > Add a Gadget > Html/java Script. 
• Go to Template and Click on Edit HTML
• Find the name of the widget by using CTRL+F.  Let’s take a widget that name is ( Recent Posts ). After searching this name. You find a similar code like this.

 <b:widget id='HTML5' locked='false' title='Recent Posts' 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>

• After you find widget’s code add the following conditional tags marked with orange just below and above to hide the widget from specific pages or posts in Blogger. 

To show the widget only in Homepage 

 <b:widget id='HTML1' locked='false' title='Recent Posts' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.url == data:blog.homepageUrl'><!-- 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:if></b:includable>
</b:widget>

 To show Blogger widget only in post pages

 <b:widget id='HTML1' locked='false' title='Recent Posts' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.pageType == "item"'><!-- 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:if></b:includable>
</b:widget>

 

To show the widget in a specific page   

 <b:widget id='HTML1' locked='false' title='Recent Posts' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.url == "URL of the page"'><!-- 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:if></b:includable>
</b:widget>

 
Note: Replace the URL of the page with your website link .
 

To hide a widget only in a particular page   

 <b:widget id='HTML1' locked='false' title='Recent Posts' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.url != "URL of the page"'><!-- 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:if></b:includable>
</b:widget>

To show widgets only in static pages   

<b:widget id='HTML1' locked='false' title='Recent Posts' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.pageType == "static_page"'><!-- 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:if></b:includable>
</b:widget>

 

To hide widgets in Static Pages   

 <b:widget id='HTML1' locked='false' title='Recent Posts' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.pageType != "static_page"'><!-- 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:if></b:includable>
</b:widget>

 

To show widgets only in Archive Pages   

 <b:widget id='HTML1' locked='false' title='Recent Posts' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.pageType == "archive"'><!-- 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:if></b:includable>
</b:widget>

• After adding any of these conditional tags in your desired widget, Save your Template and View your Blog.now that widget will show/hided according to you.

If you found this article helpful then please share our post and add your comments also.

Share This

Related Post