[Blogger Tutorial] How to show or hide widget on a page on blogger

Hey guys! Welcome to another Gurusprovince tutorial.

– 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 (Popular Posts ) > After searching this name > You find a similar code like this.

<b:widget id=’HTML5′ locked=’false’ title=’Popular 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 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=’Popular 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=’Popular 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=’Popular 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=’Popular 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=’Popular 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=’Popular 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=’Popular 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. The widget must definitely show/hide the things you’ve commanded it to do.

Thats all guys!!

If you encounters any error while making use of this tutorial, kindly make use of the comment box below.

REMEMBER: Always visit for more interesting topics.