How to Show and Hide some Widgets and Gadgets in Home Page, Post and static page in Blogger

by Posted on

When we are activate any widget in your blog it will be displayed in all the pages by default. But if we want a certain widget to appear only on a certain post or pages, we can do this easily using some conditional tags.

First we go to Blogger’s Dashboard > Design > Page Elements tab and add a “HTML/JavaScript” gadget. Give it a unique title so that it does not match with any of the titles of other widgets added.

Go to Dashboard > Design > Edit HTML. Check the Expand Widget Templates check box on top right of the HTML window. Find your widget in the HTML by using Ctrl+F and entering the widget Id in the search box. Let’s say I have given the title for my widget as “Recent Comments”. After searching you will find the below snippets:

<b:widget id=’HTML1′ locked=’false’ title=’Recent Comments’ 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>

It iss the widget that we have added from Page Elements tab. All is left is to add conditional tags just below and above to hide the widget form specific pages or posts in Blogger. Let us see some examples:

<b:widget id=’HTML1′ locked=’false’ title=’Recent Comments’ 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 in Post Pages only 

<b:widget id=’HTML1′ locked=’false’ title=’Recent Comments’ 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 any particular page 

<b:widget id=’HTML1′ locked=’false’ title=’Recent Comments’ 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 hide a widget only in a particular page 

<b:widget id=’HTML1′ locked=’false’ title=’Recent Comments’ 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 Archive Pages

<b:widget id=’HTML1′ locked=’false’ title=’Recent Comments’ 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>

To show widgets only in Static Pages

<b:widget id=’HTML1′ locked=’false’ title=’Recent Comments’ 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 Comments’ 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>

The code will check whether the condition is true or false. If the condition is true, then it executes and display. If the condition is false, it skips the content and hide the widget.
Click Save Template button and view your blog.

Published by vivek

4 Replies to “How to Show and Hide some Widgets and Gadgets in Home Page, Post and static page in Blogger”

  1. Hello, its understandable paragraph along with this YouTube video; I canit think that one can not understand this simple post having with video demonstration.

Leave a Reply