How To Show And Hide Blogger Widgets In Specific Posts Or Pages

If you are a Blogger user, you'd realized that Blogger widgets are set in a way that every single page will display these widgets, let it be the home page, post pages, static pages, specific URL pages or archive pages.

Its really important to control widget Display in Blogger. Some widgets are meant for homepage only while some makes sense when you show it at your Contact Pages, About Me pages or static pages. If you using a lots of widgets can make a blog/site to look unprofessional, increasing page loading time, therefore visitors will lose their patience.

So how do we actually do this. The trick is really simple. You just need to enclose your widgets in few pieces of codes. So lets jump straight on how to manage widgets on different pages in blogger.


How To Show And Hide Blogger Widgets in Specific Posts or Pages?

Step 1 - Backup your template

Before tweaking your Blogger template, always make a backup of your template in case of any mistakes.

Step 2 - Finding Widget ID

This is particularly important to identify the widget that you'd like to tweak.

1. Login to your Blogger Dashboard
2. Navigate to 'Template'
3. Select 'Edit HTML' and then 'Proceed'
4. Expand the widget template
5. Search (Ctrl + F) for the name of your widget (in this case it's 'Example'). The full code would be something like below.

<b:widget id='HTML1' locked='false' title='Example' type='HTML'>

Note: Where 'HTML' can be HTML, Text, Image or other types of widgets available, '1' can be any numbers depending on the number of widgets your have and 'Example' being the name of the widget

Step 3 - Insertion of conditional tags

After identifying the widget ID, navigate to the template and search for the specified widget ID (not necessary for method 1 as you've already found it in the template). As a general rule,

1. Insert the conditional tags after <b:includable id='main'> and above </b:includable> like the codes in red below

Show widget only on home page

<b:widget id='HTML1' locked='false' title='Example' 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 != &quot;&quot;'>
    <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>

Show widget only on Blogger post pages

<b:widget id='HTML1' locked='false' title='Example' 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 != &quot;&quot;'>
    <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>

Show widget only on specific URL pages

<b:widget id='HTML1' locked='false' title='Example' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.url == "The specific page's URL"'>
  <!-- only display title if it's non-empty -->
  <b:if cond='data:title != &quot;&quot;'>
    <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 specific page's URL with the address of the page in which you want the widget to appear

Show widget only on static pages

<b:widget id='HTML1' locked='false' title='Example' 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 != &quot;&quot;'>
    <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>

Show widget only on archive pages

<b:widget id='HTML1' locked='false' title='Example' 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 != &quot;&quot;'>
    <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>

2. After you have added the conditional tags, Save Template and view your blog.

I hope this was useful. Feel free to share your thoughts through comments.

Seo Free Directory