Completely Hiding Blogger Widgets from Certain Pages

I searched some tips around on the internet for hiding / removing widgets by using CSS, jQuery or using Blogger condition tags to hide the inner content of widget. But when using those ways, Blogger will still actually load the widget, and this problem may affect the loading speed of your site. So, we have no any properly tips for hiding Blogger widgets for specific pages?

No, we have one. After researched and tested with some Blogger tags, luckily, I found a very simple and completely way to remove or prevent a widget to be loaded on certain pages. Let me show you.

First try: hiding widget from home page

Example, you want to hide a widget from home page. First, please access Template / Edit HTML, then click Jump to widget button and select the widget you want to hide. In this example, I will hide my widget HTML1.

Completely Hiding Blogger Widgets from Certain Pages

The normal HTML widget will have a full code like below:

<b:widget id='HTML1' locked='false' title='HTML Widget' type='HTML'>
 <b:includable id='main'>
  <!-- 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:includable>
</b:widget>

Now, to hide this widget from home, please add below code after <b:includable id='main'> tag:

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

The final code will  be like this:

<b:widget id='HTML1' locked='false' title='HTML Widget' type='HTML'>
 <b:includable id='main'>
  <b:if cond='data:blog.url == data:blog.homepageUrl'>
   <b:remove/>
  </b:if>
  <!-- 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:includable>
</b:widget>

Now, click Save template button and check your home page to see, the widget was completely removed. You can view source of home page and find the id of the widget (with my case is id=’HTML1′), you would not found anything. It’s magic 🙂

Explain how it works

The rule is simple: if a widget contains undefined Blogger tag, it will be removed completely.

In example code above, the line: <b:if cond='data:blog.url == data:blog.homepageUrl'> will check if this is the home page and the undefined tag <b:remove/> will help us removing the widget completely.

You can use another tag than <b:remove/>, but it must be an undefined tag of Blogger. Example: <b:return/>, <b:exit/>, <b:hide/>, .etc…

Hide from other pages

You can read more information about Blogger page type condition tags at: Blogger Basic Global Data Tags. In this article, I will list some basic example for hiding widgets for certain page types of Blogger as below:

Hide from home page

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

Hide from index pages

(home, label, search page or all posts page (include home and its older posts pages).

<b:if cond='data:blog.pageType == &quot;index&quot;'>
 <b:remove/>
</b:if>

Hide from static pages

<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
 <b:remove/>
</b:if>

Hide from item pages

(articles, posts)

<b:if cond='data:blog.pageType == &quot;item&quot;'>
 <b:remove/>
</b:if>

Hide from archive pages

(showing posts by months / years)

<b:if cond='data:blog.pageType == &quot;archive&quot;'>
 <b:remove/>
</b:if>

Hide from 404 pages

<b:if cond='data:blog.pageType == &quot;error_page&quot;'>
 <b:remove/>
</b:if>

Hide from mobile

<b:if cond='data:blog.isMobileRequest'>
 <b:remove/>
</b:if>

Showing instead of hiding

If you want to show instead of hide, you must use != instead of == . Example, if you want to show on home page, but hide from others, use this:

<b:if cond='data:blog.url != data:blog.homepageUrl'>
 <b:remove/>
</b:if>
Or you can use ! expression. For example hide from mobile:
<b:if cond='!data:blog.isMobileRequest'>
 <b:remove/>
</b:if>
Or you can also use <b:else/> expression. For example hide from mobile:
<b:if cond='data:blog.isMobileRequest'>
<b:else/>
 <b:remove/>
</b:if>
If your case is not in the above list, please comment below then I can update a new code for you.

YOU WILL ALSO LIKE:

COMMENTS

  • comment-avatar

    Cách mà mọi ng hay dùng và chia sẻ trc đây sau khi ẩn đi nó vẫn để lại một khoảng trống nho nhỏ. Hy vọng cách này biến mất hẳn. Thank bác

  • comment-avatar

    Nó có mất hẳn không bác?

  • comment-avatar

    Em đang dùng và thấy mất hẳn, thank bác 😀

  • comment-avatar

    I use this tips to hide a widget from a specific page, if i access mobile url (with ?m=0) the widget always there. So, I must put both, desktop url and mobile url to your code.

  • comment-avatar

    Hi. I just updated the code for mobile. You can check to apply.

    M=0 is mean NOT mobile so of course the widget will still show (even you are using mobile). Blogger only use m=1 to tell to developer that they are showing a mobile template for a device (may be desktop or mobile). This is weakness of Blogger, we must wait for a future update.

  • comment-avatar

    Sorry for my bad english. I mean this code work if i access normal url, but if i just add ?m=0 to url. This code not work. So, I must put both url, like

  • comment-avatar

    I still not understand clearly. Can you share your code and describe more about your problem? When not m=0, what happen, when m=0, what happen?

  • comment-avatar

    It's my code to show widget at a spesific post to work correctly both url and url with m=0. If i just insert first url, the widget removed if i access url with m=0.

  • comment-avatar
  • comment-avatar
    EFBumi 6 months

    What if i want to show sidebar on all static page? for example on http://www.efbumi.net/p/about-me.html please help

  • Leave a Reply