Hide/Show Widgets/Gadgets in Home/post/static/archive pages in Blogger

As you may already know, all the widgets or gadgets that you add on your blog will be displayed on all the pages by default, including the homepage as well. What you may not know yet is that AdSense could disable your account if you place ad units inside the contact or privacy policy pages. So, hiding certain elements inside your blog pages is not only a matter of design, but it is also a requirement.

To hide (or show) widgets in particular posts, static pages, homepage or archive pages, you can use conditional tags.

How to Show or Hide Widgets in Specific Blogger Pages?

Step 1. Log into your Blogger account, then go to Layout. Give a title to the HTML/JavaScript gadgets that you have already added so that you can easily identify the widgets that you have in your Blogger template. Give them a unique title so that it does not match with any of the titles of any other widgets already added.

Step 2. Next thing to do is to go to "Template" and click the "Edit HTML" button.

blogger template, edit html

Step 3. Click anywhere inside the code area and press the CTRL + F keys to open the search box

blogger template, ctrl + f, search box

Step 4. Find the HTML of the widget by typing the widget's name in the search box - hit Enter to find it.

Let's say that the title for one of my widgets is "Recent Posts". After searching for the widget's name, I will find a similar code in the template's HTML:
<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 represents the widget/gadget that I have added in the Page Elements location (Layout).

Step 5. After you've found your widget's code, add the following conditional tags marked with red just before and after to hide the widget from specific pages or posts in Blogger. For instance, if you want:

To show the Blogger widget only in Homepage

<b:widget id='HTML1' locked='false' title='Recent Posts' 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>
</b:widget>

To show Blogger widget only in post pages

<b:widget id='HTML1' locked='false' title='Recent Posts' 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 != ""'>
<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:widget id='HTML1' locked='false' title='Recent Posts' 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 != ""'>
<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:widget id='HTML1' locked='false' title='Recent Posts' type='HTML'>
<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>

Note: Replace URL of the page with the address of the page in which you want the widget to appear. Please note that if you don't have a domain, the URL should end in .com, otherwise this will not work.

To hide a widget only in a particular page

<b:widget id='HTML1' locked='false' title='Recent Posts' type='HTML'>
<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 widgets only in static pages

<b:widget id='HTML1' locked='false' title='Recent Posts' 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 != ""'>
<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 widgets in Static Pages

<b:widget id='HTML1' locked='false' title='Recent Posts' 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 != ""'>
<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 widgets only in Archive Pages

<b:widget id='HTML1' locked='false' title='Recent Posts' 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 != ""'>
<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 6. After you have added the conditional tags, Save Template and view your blog.

That's it!

119 comments:

  1. thanks a lot

    very helpful post..I already apply this trick.
    http://einews.blogspot.com

    ReplyDelete
  2. Hi, Can i check, I've tried this method for the "To show widget in a specific page" but it ends up hiding the widget in all my pages. Am i doing something wrong such as pasting the wrong URL?

    ReplyDelete
    Replies
    1. It depends on what you want to do. The method you have chosen will hide the widget in any other pages but not from the specific page you've typed between the quotation marks..

      Delete
    2. "To show widget in a specific page" not working for me also..

      Delete
    3. the same problem

      Delete
  3. Dear Brother I Have One Question How To Hide All Widgets In Perticular Page Like HTML Editor, COntant Page ETC.
    So Please Give Me help Full Answer...Thanks

    ReplyDelete
  4. It works great ! Thank you.

    ReplyDelete
  5. Thank u so much for great post.... but I think this post needs little update. This basic code don't match new basic code...
    So, what can I do now?

    ReplyDelete
  6. Hi,

    As "Paper Crane", I have tried to display a widget on a specific page but it ends up hiding the widget in all my pages.
    Have you try it personally?

    Thks

    ReplyDelete
    Replies
    1. Do you have a region specific blog?
      Example: blogger.com.au
      If yes, try removing the last extension ".au" in the urls.

      SO, if you are using:

      use the url like this:
      http://helplogger.blogspot.com/2012/03/hideshow-widgetsgadgets-in.html
      and NOT
      http://helplogger.blogspot.com.au/2012/03/hideshow-widgetsgadgets-in.html

      hope it makes sense...

      Delete
    2. I CAN ONLY SAY: T H A N K Y O U !!!!!! More than a month trying... Have a wonderful day!

      Delete
  7. This works well. In my blog, I present widgets on both sides of the page on the homepage, while the widgets on the right sidebar disappear in the rest of the pages (they are not needed in further pages). I'm wondering if there is a way in those pages for the blog posts to expand into the right sidebar area. (Right now, the blog posts in those pages just occupy the center of the page, and the right sidebar is empty.)

    ReplyDelete
  8. This sounds super helpful! i am definitely going to try this. Thanks so much for sharing :) and keep up the good work.

    ReplyDelete
  9. If the widget doesn't show up, make sure your URL does not end country specific. blogspot.com.br for example... remove the br.


    What if I want a widget to appear in two specific pages?

    ReplyDelete
  10. This is great! I've searched high and low for a way to hide blog posts from the homepage but not any other page and this is the only one that worked. THANK YOU!

    ReplyDelete
  11. Thanks for this information. I was able to have my "sharethis" buttons to only show on post pages. I find it annoying when people share a page from a homepageurl or other non-post page, and then I can't find the page. That's why I wanted these button to only show on my post (item) pages...and you showed me how! :)

    ReplyDelete
  12. Hi, This is Neel. I saw your blog looks intresting. I want to create similar setup for my blog. I want to have a blog with posts. My basic needs are below

    1. Image, video post
    2. Post with author information displaying
    3. SEO ready
    4. A contact page
    5. Social integration
    6. From one post link to similar posts
    7. Home screen displaying About and link to all tags/labels

    Also, I want to have it with low cost, as it is just a personal blog. Can you please help me understand how to go with this ? you can reach me at nilanchala@outlook.com

    ReplyDelete
  13. How do I keep a widget from showing in a particular label (tag)?

    ReplyDelete
  14. Just want to check 1 thing please.

    In this line of code:


    do we replace
    blog.homepageUrl
    with
    blog.ourdomainnameUrl

    thaks

    ReplyDelete
  15. Hi I did the "To hide widgets in Static Pages" and it works. Thank you. But it hides my header on all of the static pages aswell which I didn't want. Could you help me figure it out? Thank you.

    ReplyDelete
  16. very nice widget and trick, thanks alot

    ReplyDelete
  17. Hi. Thanks for this tutorial. I learned something from it. Thanks.

    Anyway, I just would like to know how to apply this in "Labels" page, or in a page where the clicker will be redirected to if the clicker clicks on a "Label" or "Tag" or a "Category". Thanks for any answer! :).

    Have a good one.

    ReplyDelete
  18. Hey!!This post was really helpful and i needed it so much but i have a problem and i need some advice..i followed the steps of your tutorial("To show the widget in a specific page") but my gadgets leave a blank space in the pages that they dont appear any more..What can i do??

    ReplyDelete
  19. Hi Admin,
    I wondering which code is to show the widget in all pages.
    Please help me.
    Thanks a lot.

    ReplyDelete
  20. Great job, Very nice post-I'm looking for.

    ReplyDelete
  21. help it not work with me....
    everytime i put the code
    when i save it changed to

    and the widget still appear

    ReplyDelete
  22. Works great. Thank you very much! :)
    My blog = http://flutelyrics.blogspot.com/

    ReplyDelete
  23. I have been looking for this tweak for quite a long time and you gave me an answer to my questions. Thanks for the tutorial. :)

    ReplyDelete
  24. I redirected my hone to a new static page how to show it on a specific static page

    ReplyDelete
  25. I'm trying to hide the Archives and Lables gadgets from my other pages. I just want them visible on my homepage. When I used the snippets used in your "Recent Post" example I got errors. Please, help!?!

    ReplyDelete
  26. Can you tell me how to show the widget only on a specific static page

    ReplyDelete
  27. Can you please give me the code to display a widget only in homepge and label pages

    ReplyDelete
  28. hey it worked well. Well could you tell me how to show a widget on a specific static page. Eg only on about us static page.

    ReplyDelete
  29. I have been looking for this
    http://www.tech-fans.com/

    ReplyDelete
  30. Thanks so much for this post! You saved me a huge headache! LOL :)

    ReplyDelete
    Replies
    1. So I had to change my template back to the default blogger templates because the one I had was giving me grief! Now I am having a problem doing what worked for me before:( I want to hide my sharethis widget on my blog from the static front page and display them on "posts only". I put the code you gave here: To hide widgets in Static Pages

      If you look in my template the code in red you said to put is there and is implemented properly but it's not working:( Please help!

      Delete
    2. Hi Tasha,

      Could you please send me a copy of your template to helplogger76@gmail.com ? Thanks.

      Delete
  31. How do I use these codes in xhtml? I am getting an error message, Error parsing XML, line 2139, column 3: The element type "b:if" must be terminated by the matching end-tag "". Help please?

    ReplyDelete
    Replies
    1. Most likely, you didn't add the closing tag in the right place. Make sure that you add the </b:if> closing tag right after <b:include name='quickedit'/> and the conditional tag after <b:includable id='main'>.

      Delete
    2. I have the same issue. I have double checked this to make sure I'm inserting in the correct place.. Still get the above error.

      Delete
  32. Hello I've tried the "hide in a specific page" method but it hides in all pages, and I did exactly how the example shows. Can someone in lighten me how to solve the problem? Ty.

    ReplyDelete
    Replies
    1. Please check your URL, it should end up with .com
      See the bolded part in my address:
      http://helplogger.blogspot.com/2012/03/hideshow-widgetsgadgets-in.html

      Sorry for the late reply.

      Delete
    2. My URL is .in
      Will the code work to show widget on a specific page only?

      Delete
  33. I tried this for the sharethis widget to appear only on posts and not on static pages and it worked! Thanks! However I tried to hide my Adsense widgets from my contact and privacy pages using your code To hide a widget only in a particular page and it didn't work. Please help!

    ReplyDelete
    Replies
    1. You should hide the entire sidebar in those pages. Please check this tutorial: How to Hide Blogger Sidebar to Display AdSense For Search Results

      It was initially written for the search results page but it works on other pages, as well.

      Delete
    2. yeah, works great, the problem was with the new domains from blogger, was easier when it just ended in .com ! ty

      Delete
  34. Friend, I wanted to show the gadget only on one specific page, I tried your code, everything worked perfectly(code), but the gadget doesn't appear on any page. What's the problem!

    ReplyDelete
  35. Hello admin....how to hide sidebar likes your static pages?....such as http://helplogger.blogspot.com/p/acceptance-of-terms-by-accessing.html.

    ReplyDelete
  36. hey hi admin can you tell me where is the feed url of blog?
    and how to keep privacy policy,disclaimer and terms of service?

    ReplyDelete
  37. Thank you so much for this trick! I used to to add a widget on my homepage only, right above the posts and it worked. I have one problem: on the other pages of my blog there is now a gap above the title of the page where the widget goes on the home page. Is there any way to get rid of this gap?

    ReplyDelete
  38. mine does not display the widget on any page.

    I have a very long list of labels that I would like to either be hidden from the homepage OR display only on a static page I've made just for this purpose. As I cannot place the widget directly onto the body of the page (right?) I've settled for having the list display only where needed.

    My trouble is, with this code, no matter what I try, exclude from specific page (the home page)) or show only on a specific page (the story page), it disapears from all pages.

    The code i've used for the hide only from home is(sniped of course)




    blah blah rest of code



    My website is a .ca one.. so I've changed from blogspot.ca to .com as suggested above, but that did not help either.

    Any assistance would be helpful. Thanks.

    ReplyDelete
    Replies
    1. Same happens with me...it disappeared from all pages

      Delete
  39. This is brilliant. Thanks for so clearly illustrating what to do for different pages, such as hiding on static pages versus displaying for only one particular page.

    ReplyDelete
  40. Hi how do you do this on the new html blogger format? I noticed "-- only display title if it's non-empty -->" in my sidebar before 'grab my button' I looked in layout none of my widgets have this and both widget above and below has a title. Any further tips?

    Would you mind taking a look? I am sure its newly appeared.
    http://www.kellymartinspeaks.co.uk

    ReplyDelete
  41. crap my code on my blogger looks nothing like this at all so i have no clue where to place the code. tried a few times but not working

    ReplyDelete
  42. doesnt work at allllllllllllllllllll

    ReplyDelete
  43. Nice ! It works :) I've used it on my site
    http://collegemarketing101.blogspot.com/
    Thank you!

    ReplyDelete
  44. Thanks a lot. That was really helpful for hiding my author info box on a guest post!

    ReplyDelete
  45. This is the best page on this stuff!

    One question though. Is it possible to do 2 things at once:

    1.) Hide on home page IF post has jump link, but
    2.) Show on home page IF post has NO jump link?

    I cannot figure out how to do this. Thanks again for your awesome page!!

    ReplyDelete
  46. did, for popular post in my blog www.widgetpedia.org but i think it must be ended with too :)

    ReplyDelete
  47. Its not working for me. I wanted to show the widget to a specific page only. I implemented the code but now the widget is neither seen in the home page nor in the specific page with label 'xyz'

    ReplyDelete
  48. This comment has been removed by a blog administrator.

    ReplyDelete
  49. I've tried using the method "to hide widgets only in particular page, but it does not work, what is still missing for example in css .. so I expect your help, my blog http / / propofit3.blogspot.com.thank you very much

    ReplyDelete
    Replies
    1. Hi I have the same problem, did you get help?

      Delete
  50. I have been applying your tutorials a lot. Thank you so much.

    One question. The widget that is being hidden from the other pages has a background. A small portion of that background still shows on the pages where it the widget is hidden. Is there a way to address this issue? I've just removed the background in the past, but the background helps with the design.

    See the corners of backgrounds at http://www.thegwinnetthomepages.com/p/peace-of-mind.html. See the widgets at http://www.thegwinnetthomepages.com/p/about-gwinnett-county.html

    ReplyDelete
  51. Hello, please forgive me for posting twice.

    Thank you for these great tutorials.


    A portion of the backgrounds from hidden widgets are appearing on other pages. Is there a way to fix that? See the white boxes mid screen on the right of http://www.thegwinnetthomepages.com/. Those are the backgrounds from the search boxes at http://www.thegwinnetthomepages.com/p/about-gwinnett-county.html

    Thanks again.

    ReplyDelete
    Replies
    1. same problem with me, the background of the widget remain in the page

      Delete
  52. This is always helpful to me. But, it it possible to hide the widget from multiple pages, not just one? Thanks.

    ReplyDelete
    Replies
    1. retype the red lines as much as your links, like this:
      ...
      ...
      <b:if cond='data:blog.url != "URL of the page1"'>
      <b:if cond='data:blog.url != "URL of the page2"'>
      ...
      ...
      </b:if>
      </b:if>
      ...
      ...
      ...

      Delete
  53. How to hide a widget in mobile browsing.

    ReplyDelete
  54. hi there, i tried to hide all my widgets from my Home page. However, after i typed in the code that was provided by you (also type in theURL of the particular page). My widgets are still there... any advice?

    ReplyDelete
  55. Dear Sir,

    I want to know how to permanent remove "Subscribe to: Post Atom:" from blogger. How it remove from all pages including home, static, archive, and all pages of blog. Please suggest and reply on my mail.

    ReplyDelete
  56. Thank You! I did it on my reviews
    http://www.pinoymoviereviews.net/

    ReplyDelete
  57. Thank you very much!!!
    It worked fine for me

    ReplyDelete
  58. Would you kindly help me? I'm trying to show an image gadget in one specific static page, I did exact as you told. I does not work.. It doesnt show the gadget anywhere.

    ReplyDelete
  59. Hi :)

    I used this before and it worked, however now it won't let me.
    It comes up with this error:

    The widget with id "HTML5" cannot contain element: "b:if". A widget can only contain b:includable elements.

    Any idea why?

    Thank you :)

    ReplyDelete
  60. For some reason after I complete step 2 I can't find the "expand widget templates" box, is it me or have they just updated the software? I have also been trying to enable the widgets that already exist after you create a post. The very tiny ones but I can't seem to find any directions on how to change this anywhere. At this point I haven't been able to connect any of my social media pages at all. Any help would be greatly appreciated, www.hikinginnewjersey.blogspot.com

    ReplyDelete
  61. Hi, thanks for the help you provide here. I've got a sidebar widget which i tweaked 2 years ago to show up only on homepage. But now, i want it to show up on both the HOMEPAGE and also on SEARCH LABEL pages i.e. on both www.yourblogname.com AND also www.yourblogname.com/search/label/~.

    Please how do i tweak this?

    Once again, thanks so much!

    ReplyDelete
  62. Thanks, the widget-hiding worked!

    However, on pages where the widget isn't shown, they have these tiny horizontal lines substituting the hidden widget. I'm not bothered by it except for the fact that those lines then push all the other widgets down a notch, which makes it look weird.

    ReplyDelete
  63. Hi how about hide a certain html code? thnks

    ReplyDelete
  64. It's an awesome trick.Thanks for sharing

    ReplyDelete
  65. its not working :-(

    ReplyDelete
  66. one of the best blogs to help me make a good blog.. thank you guys

    ReplyDelete
  67. I tried this,

    but it just won't appear on the specified page. Why????
    HELP!

    ReplyDelete
  68. Thanks so much! It really helped and I must say that in the Universe of Learning, you're an awesome teacher :)

    ReplyDelete
  69. Amin please solve issue my template problem. I want to show 6 post in my blogger home page. I am doing 2 ways No1. setting..post and comments No.2 layout go to post. show 6. But isn't working. Only 6 post showing in my homepage. Please help me. I apply a lots of template in my blogspot. But final reason isn't working. PLEASE http://www.wallpaperyork.blogspot.com/

    ReplyDelete
  70. Thank you!!! Phew, it was driving me mad. Thanks so much :)

    ReplyDelete
  71. GOD Bless
    Thanks :)

    ReplyDelete
  72. Thanks once again. It took some doing on my part but this helped a lot.
    This site is a must have!

    VindictusTrix.blogspot.com

    ReplyDelete
  73. Hi, works like a charm on most of my widgets.

    It doesn't work on my Follow on Blogger gadget though, everytime I edit the html and save it, then refresh it, the codes are not there. stretchyourpeso.blogspot.com

    Still, thanks!

    ReplyDelete
  74. hi admin. I've tried it and its working fine. But is there an easy way to remove all widgets on a particular page?i'd like to remove widgets on this particular page http://mahubya.blogspot.com/p/photography.html . Hope to hear from you soon. Thanks!

    ReplyDelete
    Replies
    1. Hi Chud,

      To hide your sidebar, you will need to add this code just below ]]></b:skin>
      .container_6 .grid_2 {display: none;}
      Then add the appropriate conditional tags. For more info, please refer to the 88.a comment or read this tutorial. Sorry for the late reply...

      Delete
  75. Ok. I have created an a store, so I don't want all of the widgets on that page. Just the amazon widget. How do I modify the code to hide the widgets just for that single page...

    ReplyDelete
    Replies
    1. Hi Jessica,

      First off, you will need to identify the ID for each widget by searching for their exact names - Recent Posts, Recent Comments etc. For example, here the id is HTML1:
      <b:widget id='HTML1'.........

      Then, write the IDs for each widget and separate them by a comma, eg:
      #HTML1, #HTML2, #HTML13 {display: none;}
      And add the conditional tags before and after. Please check this tutorial for more info:
      How to Hide Blogger Sidebar to Display AdSense for Search Results (it should work for any widget you might have (display: none; will be enough)).

      I hope this will help you!

      Delete
  76. how to display widgets based of post labels (tags)

    ReplyDelete
  77. Thank you very much... keep gog...

    ReplyDelete
  78. can you tell me how to use this trick in wordpress need urgent help please reach me neha jain -9799775796

    ReplyDelete
  79. Great stuff! Q: Is it possible to have two urls as the result of the conditional? Right now all my widgets are on specific pages, but I would like another page that shows all of them at once.

    ReplyDelete
  80. Hi the post is really helpful. But, i have some background color to my gadgets. The gadget box shows up as blank after hiding the gadgets. I have tried changing the colors to transparent. But, that doesn't seem to be helping. Any suggestions?

    ReplyDelete
  81. thanks Bro, finally i made it to hide widget in static page

    ReplyDelete
  82. Thanks Sir it help me to get out of my problem

    ReplyDelete
  83. Thank you, this is so helpful! I'm using this to show certain ads on different pages. Question: At the bottom of the home page there is the option of "older post, newer post or home". When you click older post, I thought that was an archived page, but I guess not, because the code for archive page is not working. What kind of page is this, maybe a search page? Is there way to show the widget/gadget on this page? example: http://www.scatteredthoughtsofacraftymom.com/search?updated-max=2014-09-06T17:22:00-05:00&max-results=5

    Thanks for your help!
    ~Jamie

    ReplyDelete
  84. how to hide older/newer home post links only in pages????

    ReplyDelete