How To Show Or Hide Widgets On Specific Pages In Blogger

May be some of you have noticed that when you add a gadget or widget to your blog it will show up on every page of your blog. And many of you want to show widgets on specific pages for example if your blog contains contact page or sitemap and there is no need of search box and few other widgets, so you want to hide them on these pages.
Many beginners to blogging don't know how to do that. to hide or show widgets on specific pages of blogger follow the below steps:

To hide gadgets on specific pages:

(1). The first step is to name all the widgets on your blog by going to layout to make it simple for you to find the widgets in html of you template, so name all the widgets or a specific widgets which you want to show or hide. Remember to give a unique title to every widget to avoid any confusion.

(2). After naming the widgets go to template and click edit html, as shown in below image.

(3). Now jump to widget which you want to show or hide. Or if you can't do that find the name of the widget by using the combination of Ctrl+F.

(4). Now search for the widget which you want to hide or show either by Ctrl+f or by Jump to widget directly.

Suppose you are searching for search box widget and you want it to be hide on some pages.

(5). After finding the widget's code paste <b:if cond='data:blog.url != "Link of page"'> between:

<b:includable id='main'> 
<!-- only display title if it's non-empty -->

Replace Link of page with the link of the pages on which you don't want to show the search box or another widget, as I want to hide the search box in my blog's contact,sitemap and about pages therefore I have to add <b:if cond='data:blog.url != "Link of page"'> between <b:includable id='main'> and <!-- only display title if it's non-empty --> in the widget's code. similarly if you want to hide any widget in one or many pages then paste the above code for each page where you don't want the widget to show up.

(6). After following step 5 paste </b:if> above below piece of code:

</b:includable>
</b:widget>

Remember to add </b:if> for each time you add the code mentioned in step 5 otherwise template will not accept code. 

The overall code will be similar to below code:

  <b:widget id='HTML3' locked='false' mobile='yes' title='' type='HTML'>
    <b:includable id='main'>
<b:if cond='data:blog.url != "http://101helper.blogspot.com/p/privacy-policy.html"'>
<b:if cond='data:blog.url != "http://101helper.blogspot.com/p/disclaimer.html"'>
<b:if cond='data:blog.url != "http://101helper.blogspot.com/p/contact-me.html"'>
<b:if cond='data:blog.url != "http://101helper.blogspot.com/p/join-this-blog.html"'>
<b:if cond='data:blog.url != "http://101helper.blogspot.com/p/about.html"'>
  <!-- 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:if>
</b:if>
</b:if>
</b:if>
</b:includable>
  </b:widget>

Similarly to show a widget on a specific page follow the same steps except changing the code of step 5, to show a widget on a specific page use this code <b:if cond='data:blog.url == "Link the page"'>

(7). After following above steps save the template and your are done!

To show a gadget only on Homepage:

Follow all above steps to find gadget but at the time of inserting code use below code and after adding this code below <b:includable id='main'> don't forget to close it by </b:if> as shown in step 6 above:

<b:if cond='data:blog.url == data:blog.homepageUrl'>

To show gadget only in post pages:

After adding this code the gadget will only show up in post pages. It will hide that gadget from other pages which you create and also from home page and index(category page which show all posts of a category). Just paste this code <b:if cond='data:blog.pageType == "item"'> below <b:includable id='main'> and close it by </b:if> as shown in step 6 above.

To show gadgets on static pages:

Those pages which you create e.g Contact page, about page, disclaimer page etc are static pages to show a gadget on these pages only then add <b:if cond='data:blog.pageType == "static_page"'> below <b:includable id='main'> and close it by </b:if> as shown above in step number 6.

To show a gadgets on category/label pages only:

If you want to show a gadget on a category/label page use this code <b:if cond='data:blog.url == "Link of category/label page"'> below <b:includable id='main'> and close it by </b:if> as shown above in step number 6.

To hide a gadget in static pages only:

If you want to hide a gadget in all the static pages(contact, about, sitemap) but not other pages then insert the below code just below <b:includable id='main'> after finding the gadget:

<b:if cond='data:blog.pageType != "static_page"'>

To hide a gadget in Homepage only:

To hide a in homepage only use the below code:

<b:if cond='data:blog.url != data:blog.homepageUrl'>

To show a gadget only on desktop and hide on mobile:

Use the below code to hide a gadget or some text inside the template in mobile phones. This code will prevent it from showing in mobile phones. It will show the gadget or text or some code only on desktop.

<b:if cond='data:blog.isMobile == &quot;false&quot;'>

Remember to close it with </b:if> If you didn't get me then see the below example:

To Show a Gadget Only On Mobile Devices:

If you have a gadget that you would like to show only on mobile devices like search box for blogger mobile site only then you can do it by adding the following code below  <b:includable id='main'>.

<b:if cond='data:blog.isMobile == &quot;true&quot;'>

this code will show certain gadget in mobile devices only. Don't forget to add </b:if> before </b:includable>.

I hope you liked this post Don't forget to subscribe to 101Helper via Email and sharing this great article with others. If you have any problem ask me in comments.

Search Tags: How to show and hide widgets on specific pages in blogger, hide a widget in blogger pages,101helper, tips and tricks for blogger, widgets and gadgets for blogger.