How To Show/Hide Widgets On Specific Pages In Blogger

There are some situations where you want to show or hide certain widgets on particular pages such as home page, post pages, static pages, archive pages and even on particular posts.So many people have a question such as “How to show/hide widgets on particular pages“.Because there are some widgets which are meant for the home page and some for static pages or post pages.Show hide widgets in blogger

Let us take an example of AdSense widget. A normal AdSense publisher is allowed to show a maximum of 3 ads(display ads) on each page if you show more than that it may lead to a ban. Also, we are not allowed show AdSense ads inside contact us, privacy policy page. So I’m here to explain to you how to do it. so let’s start to jump into the topic.Follow the steps below.

Step 1:
Go to Blogger Dashboard>Layout and find a widget which you want to show or hide.After finding just give it a unique name which doesn’t match any other widget name and click on save. Generally, we add custom widgets using HTML/CSS widget and use with a particular name to it.
Step 2:
Now click on Template>Edit HTML and check the expand widget in the template or HTML editor.
Step 3:
Next, click ctrl+f and enter the name which you have given in step 1.Let us consider the widget name as Popular posts and click Enter until you find the code which is similar to below code.

<b:widget id= 'HTML11' locked='false' title='Popular posts' type='HTML'>
  <b:includable id='main'>
          Widget code
  </b:includable>
</b:widget>

Here Green highlighted name is the Title of the widget which we are finding and the Red highlighted code is the widget code ( a bunch of code for the widget) which is different for different widgets. In the above code id, title and type are also different for different widgets.Don’t bother about widget code because we are not going to change it. 🙂
Step 4:
Now we need to show or hide widget on particular pages.We have to just use a conditional statement to do this job as shown below.


<b:widget id= 'HTML11' locked='false' title='Popular posts' type='HTML'>
  <b:includable id='main'>
    <b:if cond='data:blog.pageType != "Page_type"'>
      Widget code
    </b:if>
  </b:includable>
</b:widget>

The above code is just a sample code with a conditional statement which is highlighted by Orange color.
Step 4:
Now i will give you the exact way(code) to show or hide widgets on different pages.

To Show Blogger Widget only in Homepage

<b:widget id= 'HTML11' locked='false' title='Popular posts' type='HTML'>
  <b:includable id='main'>
    <b:if cond='data:blog.pageType == data:blog.homepageUrl'>
      Widget code
    </b:if>
  </b:includable>
</b:widget>

To Hide Blogger Widget only in Homepage

<b:widget id= 'HTML11' locked='false' title='Popular posts' type='HTML'>
  <b:includable id='main'>
    <b:if cond='data:blog.pageType != data:blog.homepageUrl'>
      Widget code
    </b:if>
  </b:includable>
</b:widget>

To Show a Widget only in Post Pages

<b:widget id= 'HTML11' locked='false' title='Popular posts' type='HTML'>
  <b:includable id='main'>
    <b:if cond='data:blog.pageType == "item"'>
      Widget code
    </b:if>
  </b:includable>
</b:widget>

To Hide a Widget only in Post Pages

<b:widget id= 'HTML11' locked='false' title='Popular posts' type='HTML'>
  <b:includable id='main'>
    <b:if cond='data:blog.pageType != "item"'>
      Widget code
    </b:if>
  </b:includable>
</b:widget>

To Show a Widget only in a Specific Page or post

<b:widget id= 'HTML11' locked='false' title='Popular posts' type='HTML'>
  <b:includable id='main'>
    <b:if cond='data:blog.pageType == "URL of the page or post"'>
      Widget code
    </b:if>
  </b:includable>
</b:widget>

Replace URL of the page or post(which is highlighted with Blue color) with URL of the page or post where you want to show the widget.

To hide a Widget only in a specific Page or post

<b:widget id= 'HTML11' locked='false' title='Popular posts' type='HTML'>
  <b:includable id='main'>
    <b:if cond='data:blog.pageType != "URL of the page or post"'>
      Widget code
    </b:if>
  </b:includable>
</b:widget>

Replace URL of the page or post(which is highlighted with Blue color) with URL of the page or post where you want to show the widget.

To Show a Widget only in Static Pages

<b:widget id= 'HTML11' locked='false' title='Popular posts' type='HTML'>
  <b:includable id='main'>
    <b:if cond='data:blog.pageType == "static_page"'>
      Widget code
    </b:if>
  </b:includable>
</b:widget>

To Hide a Widget only in Static Pages

<b:widget id= 'HTML11' locked='false' title='Popular posts' type='HTML'>
  <b:includable id='main'>
    <b:if cond='data:blog.pageType != "static_page"'>
      Widget code
    </b:if>
  </b:includable>
</b:widget>

To Show a Widget only in Archive Pages


<b:widget id= 'HTML11' locked='false' title='Popular posts' type='HTML'>
  <b:includable id='main'>
    <b:if cond='data:blog.pageType == "archive"'>
      Widget code
    </b:if>
  </b:includable>
</b:widget>

To hide a Widget only in Archive Pages


<b:widget id= 'HTML11' locked='false' title='Popular posts' type='HTML'>
  <b:includable id='main'>
    <b:if cond='data:blog.pageType != "archive"'>
      Widget code
    </b:if>
  </b:includable>
</b:widget>

After adding the code of conditional tags, save your template. 🙂
You can also nest the conditional tags to show or hide widget on specific pages
If you have any queries or getting some problems feel free to comment.

32 thoughts on “How To Show/Hide Widgets On Specific Pages In Blogger”

  1. Something that I always wanted to search and apply to my blog, but, never did so far… 🙂 Thanks for this useful post :)<br /><br />Regards,<br />Sindhu<br />Tantu <br /><a href=" http://sindhudevik.blogspot.in&quot; rel="nofollow">The Arts & Me</a><br />

    Reply
  2. Hi there – thanks for this – i am trying to put this code on a static page homepage for my blog. I followed your instructions and am getting no error. The problem is that the slider widget has disappeared on the blog page, but will not appear on my static page that i am trying to make my home page. <br /><br />Is it possible that this is because I have a custom domain?

    Reply
    • Thank you so much – i greatly appreciate it! it's stlukestacoma.org, and I don't seem to be able to attach the code to this reply – i keep getting the error "Your HTML cannot be accepted: Tag is not allowed: H2 "

      Reply
    • Hello,<br /><br />No, it is not because of custom domain. It may be due to wrong condition given. Let me know your site URL and the code you used so that i can help you out.<br /><br />Thanks for commenting.

      Reply
    • Hello,<br /><br />You just need to write code of "To Show Blogger Widget Only In Homepage" in which is available in the tutorial, so that you will able to show your widget only on homepage not on other pages. If you want to show on other page then please mention that page name in the condition. For that follow the code below "To Show A Widget Only In Static Pages". Hope this will help you. Let me know if you need any further help.

      Reply
    • This is what I did, and i'm still not getting the slider widget to appear. I do know that it's almost working as it's not on the other pages, but i just can't get it to appear on the static home page. Can you tell me how to paste the code here so i can show you?<br />THANK YOU for your help!

      Reply
    • Hello, to show code in comment just convert code using html encoder here http://www.mybloggertricks.com/2008/10/convert-special-html-characters-to.html and paste the converted code in comment so that i can solve the issue.<br />

      Reply
  3. Amazing things here. I am very satisfied to see your
    article. Thanks a lot and I’m looking forward to contact you.
    Will you kindly drop me a e-mail?

    Reply
  4. Great post admin 🙂 keep up after reading this post became your fan …lots of love for you men.
    Actually many bloggers spread rumors that you can't do this or that with blogspot blog blah blah! and main thing I don't have coding expert, so i believed on their words, but that's all were fucking false you proved that. Seriously yar tumne MERA intention change kardiya thank-you. Aisa hi hum sabko accha accha post provide karte rehana 🙂

    Reply
    • Hi Pritam,

      Thanks for your kind words. We can't customise everything in blogger but still can do customise many things in blogger. 🙂

      Reply
  5. Thank you for this article

    I want you to help me, please I want to put Adsense code under my post but every time I do that it shows also in the home page, I can't add it to a widget to apply this tutorial to it, so is there any way to specific code instead of widget

    Reply
    • Hi Med,

      I understand your problem but i need to cover that that thing in a separate article. I will surely update you once it is published. Hope it helps.

      Reply
  6. Thanks For Knowledge
    <a href=' https://www.timesbuzzer.com/2019/04/how-to-show-hide-widget-in-mobile-page.html'>How To Show / Hide Widget In Mobile Page In Blogger</a>

    Reply
  7. i tired it but got this error messAGE:
    Error parsing XML, line 1989, column 12: Open quote is expected for attribute "cond" associated with an element type "b:if"

    what does it mean and how do i resolve it?

    Reply
  8. Show/Hide on specific page code is not working for me.
    Everything else works, but I can't seem to get it working with a specific page.

    Reply

Leave a Reply to St Luke's Memorial Episcopal Church Cancel reply