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

As some of you may have noticed, all the widgets/gadgets you add to your blog, will be displayed on all the pages by default, including the homepage as well. And I'm sure very few know that AdSense could disable your account in case you've put ad units inside the content of your contact or privacy policy pages. Therefore, 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.

Step 1. Go to Blogger's Dashboard > Layout and name the HTML/Javascript gadgets that you have already added. Doing this, it will be easier for you to identify the widgets that you have in your Blogger's template. Give it 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 on Edit HTML

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 your widget by typing the widget's name in the search box - hit Enter.

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 my template:
<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 below and above to hide the widget from specific pages or posts in Blogger. For instance, in case you want:

To show the 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

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> 

Note:  Pay attention each time you're adding a new address which should end up with .com, otherwise it may not work.

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

That's it!
Share this post:

    Random Posts

116 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. I have tired it very much but failed to me . Please you must do it for me (Admin)as you know all blogger . I have idea ! download teamviewer and you do it for me . My skype id is ali1881992 . Add me contact then i will accept you . Please help me for little work .

      Delete
    3. Anonymous2/21/2013

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

      Delete
    4. Anonymous4/22/2013

      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. Anonymous8/24/2012

    It works great ! Thank you.

    ReplyDelete
    Replies
    1. You're welcome. Thanks for visiting!

      Delete
  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. Anonymous10/04/2012

    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. Is there any way to put a code like this in the HTML for the page itself? I have a fairly long list of URLs that I don't want adsense on, but I don't want to have to add all of them to my template page.

    ReplyDelete
  17. very nice widget and trick, thanks alot

    ReplyDelete
  18. 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
  19. 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
  20. Hi Admin,
    I wondering which code is to show the widget in all pages.
    Please help me.
    Thanks a lot.

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

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

    and the widget still appear

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

    ReplyDelete
  24. in this code? how to declare different urls?

    example link1 link2 ?

    ReplyDelete
  25. 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
  26. I redirected my hone to a new static page how to show it on a specific static page

    ReplyDelete
  27. 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
  28. Can you tell me how to show the widget only on a specific static page

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

    ReplyDelete
  30. 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
  31. I have been looking for this
    http://www.tech-fans.com/

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

    ReplyDelete
    Replies
    1. You're welcome :)

      Delete
    2. 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
    3. Hi Tasha,

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

      Delete
  33. 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
  34. 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
    3. the admin is right in his description. In your html code change save your url as (dot)in and it will be done. country specific url may be causing the problem for you all the bloggers who have the blogger extension of blogspot.com will be redirected to country specific url and they must save their url in (dot)in format if you are from india, from www.sortofinformation.blogspot.com

      Delete
  35. 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
  36. 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
  37. Hello admin....how to hide sidebar likes your static pages?....such as http://helplogger.blogspot.com/p/acceptance-of-terms-by-accessing.html.

    ReplyDelete
  38. 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
  39. 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
  40. 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
  41. 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
  42. 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
  43. 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
  44. doesnt work at allllllllllllllllllll

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

    ReplyDelete
  46. I must say, you are superb

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

    ReplyDelete
  48. 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
  49. did, for popular post in my blog www.widgetpedia.org but i think it must be ended with too :)

    ReplyDelete
  50. 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
  51. This comment has been removed by a blog administrator.

    ReplyDelete
  52. Thank you so so so much . These are the code that i was googling for a while . So finally i've got them now :)
    http://adeelzsoft.blogspot.com

    ReplyDelete
  53. 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
  54. 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
  55. 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
  56. 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
  57. How to hide a widget in mobile browsing.

    ReplyDelete
  58. Thank you so much for this :)

    ReplyDelete
  59. 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
  60. Anonymous9/13/2013

    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
  61. Thank You! I did it on my reviews
    http://www.pinoymoviereviews.net/

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

    ReplyDelete
  63. 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
  64. 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
  65. 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
  66. Anonymous10/22/2013

    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
  67. 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
    Replies
    1. Is there a way to fix this?

      Delete
  68. Hi how about hide a certain html code? thnks

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

    ReplyDelete
  70. Anonymous11/23/2013

    its not working :-(

    ReplyDelete
  71. works perfectly, thanks

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

    ReplyDelete
  73. I tried this,

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

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

    ReplyDelete
  75. 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
  76. Thank you!!! Phew, it was driving me mad. Thanks so much :)

    ReplyDelete
  77. Anonymous5/27/2014

    GOD Bless
    Thanks :)

    ReplyDelete
  78. 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
  79. 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
  80. 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
  81. 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
  82. fudbalzona7/04/2014

    how to display widgets based of post labels (tags)

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

    ReplyDelete

Although every comment is appreciated, due to time limitations I might not be able to respond to everyone. Keep in mind that comments are moderated and may take some time to appear. All spam comments will be deleted. Thanks for understanding!