Hide/Show Blogger Widgets in Homepage/Post/Static/Archive pages in Blogger Blog

We sometimes are having the use of hiding or showing blogger widgets in the posts pages or display them at home but not displaying in posts pages.

Because sometimes it happens that ads unit are placed in widgets which are displayed in privacy policy pages which lead to disabling of Adsense account.

Therefore, it is required to hide elements inside blog pages is not only a matter of design but also a requirement.

To do so follow these steps:

Step 1.Go to Blogger.com
Step 2.Go to Dashboard >Layout
Name the HTML/Javascript gadget to identify it easily while working the widgets.
Step 3.Go to Template and click on Edit HTML
Step 4.Click anywhere inside the code area and press the CTRL+F.
The search box will appear.
Step 5. Find the HTML of your widget by typing the widget’s name in the search box.
Press Enter.
For Example, my widget is “Recent Posts” then after searching the widget’s name I will get a similar code in our template:

<b:widget=”” id=”HTML1″ 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>

This code in red is the widget/gadget that we added in the layout.

Step 6. After finding the widget code, add following conditional tags marked with red just below and above to hide the widget from specific pages or posts in Blogger according to your needs:

To show the widget only in homepage:

<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 the widget only in post pages:

<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 hide Blogger widget in post pages:

<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: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 widget in particular page:

<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 widget only in static pages:

<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 widget in static pages:

<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 widget only in Archive pages:

<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>

Step 7. If you are done now you can save the template to see the changes. That’s it! Now you are all done.