Methods to Display/Hide Blogger Widget in Specified Pages

The default Blogger’s hosted blog will display widgets on all posts and pages. There can be times when you only want to display certain widgets on certain page. I display certain widgets only in post page as if I squeeze all my widgets in the list page, the loading will crash my readers PC if they are using Internet Explorer. I want my loading speed to be optimal. They can be a lot of reasons why to be selective and it is all up to your need.

There are two methods which I used to display widgets on certain pages.

Method 1 – Installed the conditional tags in the body section of the template.
Method 2 – Installed the conditional tags in the head section of the template.

I prefer the second method as it look tidier to me and if I have to change the blog design, I will be able to remember which tweak I made before in the blog template.

Backup and save a copy of your template before you do any adjustment.

Method 1
Log in to your Blogger’s dashboard, click on ‘LAYOUT’ tab and click on ‘EDIT HTML’. There is a checkbox to ‘EXPAND WIDGET TEMPLATES’. For method 1 you need to expand the widget templates and dig in the mess of codes, this is another reason why I prefer using method 2.

Locate the widget ID (That is the particular widget you are messing with.) Search for this line,

<b:includable id='main'>

and apply conditional tag/tags just after it.

Search for this line

</b:includable>

a few lines further below the first line that you have just found previously. Close the conditional tag/tags just above this line.

Here is an example to display a widget only in home page.

<b:section class='Sidebar' id='Sidebar2' maxwidgets='1' showaddelement='no'>
<b:widget id='HTML999' locked='true' title='TabSideBar' 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>

Pictorial Description: Click on Image to Enlarge

Below is the list of Conditional Tags;
Use this when you want to;

display the widget only in home page;
<b:if cond='data:blog.url == data:blog.homepageUrl'>

display the widget in home page, archive and label page;
<b:if cond='data:blog.pageType == "index"'>

display the widget only in post page;
<b:if cond='data:blog.pageType == "item"'>

display the widget only in static page;
<b:if cond='data:blog.pageType == "static_page"'>

display the widget only in archive page;
<b:if cond='data:blog.pageType == "archive"'>

display the widget only in specific page;
<b:if cond='data:blog.url == "http://kingofcomplain.blogspot.com/2009/05/showing-widget-on-specific-pages-in.html"'>

You can also work the other way round by hiding the widget in certain page.
Use this when you want to;

hide the widget only in home page;
<b:if cond='data:blog.url != data:blog.homepageUrl'>

hide the widget in home page, archive and label page;
<b:if cond='data:blog.pageType != "index"'>

hide the widget only in post page;
<b:if cond='data:blog.pageType != "item"'>

hide the widget only in static page;
<b:if cond='data:blog.pageType != "static_page"'>

hide the widget only in archive page;
<b:if cond='data:blog.pageType != "archive"'>

hide the widget only in specific page;
<b:if cond='data:blog.url != "http://kingofcomplain.blogspot.com/2009/05/showing-widget-on-specific-pages-in.html"'>

You can add as many tags as you like only to remember to apply closing tag to all of them.

Method 2
You don’t have to ‘EXPAND WIDGET TEMPLATES’ in this method. Find this line

</head>

and apply the opening and closing tags directly above it.

Here is an example to display a widget of ID HTML999 only in home page. You will need to add in the CSS style also.

<b:if cond='data:blog.url != data:blog.homepageUrl'>
<style>#HTML999{display:none;}</style>
</b:if>
</head>

Here is an example to hide a widget of ID HTML999 only in home page.

<b:if cond='data:blog.url == data:blog.homepageUrl'>
<style>#HTML999{display:none;}</style>
</b:if>
</head>

You can add as many tags as you like also in the second method. The conditional tags in method 1 are applicable in method 2. Method 2 is just in reverse with method 1 with the same functions. Thank you for reading and let me know if it helps.

Link To This Complain:
<a href="http://kingofcomplain.blogspot.com/2010/04/methods-to-displayhide-blogger-widget.html" target="_blank" rel="dofollow">Methods to Display/Hide Blogger Widget in Specified Pages</a>