Hide or Show a Widget on some Pages Blogger

Pin It
show and hide blogger widgets
Hi Bloggers, 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.

Today I'll show you the easiest and simple ways to show or hide any widget in your blog to show on pages you like. So let's start.

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

How to Hide or Show a Widget on some Pages Blogger


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

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 your widgets is "Recent Posts". After searching for the widget's name, You 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 you 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.

Summary:

1.  See which widget you are willing to hide or show in some pages.
2.  Give that widget a Title in you Blogger Layout.
3.  Search it in your HTML code and use the above tags.

That's it!  Have a Good Day :)

PLEASE NOTE:

If you have any questions regarding this article,please comment and I'll reply as soon as possible.

We have Zero Tolerance to Spam. Comments with Links will be deleted.

5 comments:

  1. Good day dear admin please this article is too hard to understand for new bees

    ReplyDelete
    Replies
    1. I have added Summary for your better understanding.

      Any way you can ask your question in comments here. :-?

      I would love to answer you :)

      Delete
  2. Please Admin which one these tutorials are you using?. Because i will love to use the one you are using please let me know.

    ReplyDelete
    Replies
    1. These are the basics tags, you should learn them to show or hide various components on your site pages. I am using all these tags on all my sites.

      These tags are very important for your site design. Try to use them for widgets,meta tags,placing ads on specific pages etc

      Delete
  3. and please explain it to me better here in your comment please.

    ReplyDelete
Emoticons Smileys for Blogger Comments
Show Emoticons >>

PLEASE NOTE:

If you have any questions regarding this article,please comment and I'll reply as soon as possible.

We have Zero Tolerance to Spam. Comments with Links will be deleted.