How To Hide And Show Widgets In Blogger

How to Hide/Show Widgets/Gadgets in Home/Posts/Static/Archive page 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.

How 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

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

how to in blogger

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:

How To show the widget only in Homepage:

convertkit

 <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>

How 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>

How 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>

How 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

How 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> 

How 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> 

How 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> 

How 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.

Read more about Blogger

(Visited 14 times, 3 visits today)

Racham Victor

I love writing articles about how to make money from home, affiliate marketing and blogging tips. As a writer and freelancer, I provide a professional service to my client, and I love to be part of my friends' life by caring for them but most of all I value my relationship with God.

Leave a Reply

error: Content is protected !!