T Friday, August 22, 2014

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.

How to show and hide widgets on specific pages in blogger | 101Helper tips, tricks, widgets and gadgets for blogger

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


How to show and hide widgets on specific pages in blogger | 101Helper tips, tricks, widgets and gadgets for blogger

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

show or hide gadgets in blogger

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:


how-to-show-or-hide-widgets-in-blogger

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.


videostutorials

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.



EMBED FULL POST


10 comments :

  1. it doesn´t work with me the code to show the widget in a specific page. what could it be? thanks in advance, jaime

    ReplyDelete
    Replies
    1. Hey Jaime, Its absolutely working with me. There must be a problem with your template. Reinstall it or change your template then try again. If it still doesn't work then follow video tutorial, it will surely help you. If you still have any problem ask me :)

      Delete
  2. hi fahim. It works now. the issue was that the domain I wrote in the code was ...blogspot.nl and it has to be ...blogspot.com. thanks

    ReplyDelete
  3. I have tried many times to hide my labels gadget in all pages except one but it it still showing all pages :(

    ReplyDelete
    Replies
    1. You are doing it wrong, watch the video to understand it well

      Delete
  4. Thank you so much for this! Now I don't have my email sign up in the layout showing up on the Thank You page! Hooray!

    ReplyDelete
    Replies
    1. I am glad to know that it helpwd you, thanks for your feedback its really appreciated.

      Delete
  5. i want to show gadgets in specific lable post only how to do?

    ReplyDelete
    Replies
    1. You need to use [b:if cond='data:blog.url == "Link of category/label page"']

      Delete