How to Show or Hide Widgets Only on Homepage or on Specific Post Pages in Blogger


How To Show or Hide Widgets Only on Homepage or on Specific Post Pages in Blogger? Installing any widget in your blog will display it in all the pages by default including your homepage.

What if you want only certain widgets to appear only on certain pages? you can do this easily with conditional tags.







 Follow those steps:



Create any widget, and place it where-ever you want, and save the template. Check if it is working (should be displayed in all the pages). Remember to give a TITLE to it, like Archives/BlogRoll/Maps/Clock, anything unique or number of widget.





First log in to your Blogger account back-up your template

Then click Template >> Edit HTML

Chose Proceed to start editing the HTML code.

Cick Expand Widget Templates box

Ctrl F and find the following code



It will be something like this:



<b:widget id='HTML3' locked='false' title='UNIQUE WORD OR TITLE HERE' 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>
HTML3=Widget Number

UNIQUE WORD OR TITLE HERE=Widget Title if have otherwise it will be like title=''



Now follow below steps as your need:



To SHOW the code/widget only in HomePage

<b:widget id='HTML3' locked='false' title='UNIQUE WORD OR TITLE HERE' 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 != &quot;&quot;'>

<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 "All Posts", but NOT in HomePage

<b:widget id='HTML3' locked='false' title='UNIQUE WORD OR TITLE HERE' 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 != &quot;&quot;'>

<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 any specific/particular page

<b:widget id='HTML3' locked='false' title='UNIQUE WORD OR TITLE HERE' type='HTML'>

<b:includable id='main'>

<b:if cond='data:blog.url == "SPECIFIC_BLOG_POST_URL"'>

<!-- 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:if>

</b:includable>

</b:widget>


To Hide the widget in any specific/particular page

<b:widget id='HTML3' locked='false' title='UNIQUE WORD OR TITLE HERE' type='HTML'>

<b:includable id='main'>

<b:if cond='data:blog.url != "SPECIFIC_BLOG_POST_URL"'>

<!-- 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:if>

</b:includable>

</b:widget>


To SHOW widgets only in Static Pages

<b:widget id='HTML3' locked='false' title='UNIQUE WORD OR TITLE HERE' 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 != &quot;&quot;'>

<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='HTML3' locked='false' title='UNIQUE WORD OR TITLE HERE' 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 != &quot;&quot;'>

<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>
You are done and enjoy.

Subscribe to Get Newest Articles By Email!

Follow us!

2 comments:

  1. Great post. Thanks to author. I was Searching it during long time.

    ReplyDelete
  2. It’s hard to find knowledgeable people on this topic, but you sound like you know what you’re talking about! Thanks
    website design

    ReplyDelete