Once you activate any widget in your blog, it will be displayed in all the pages by default including your homepage,static,index and archives pages.But what if you want any widget to appear only on a certain page or pages? Here I have a solution of that.By using blogger conditional tags we cab do this very easily.The negative part of this trick is it doesn't work with Labels, Archive and Followers gadgets.I will publish a tutorial later on applying different styling/layout to static pages.

How To Display/Hide Blogger Widget On Specific Pages?


Step 1 - Finding Widget ID

I have posted a detailed tutorial about finding widget ID and section ID.Click here to go that tutorial and find widget ID of your specific widget.

Step 2 - Finding Widget In Template

  1. Now go to Blogger Dashboard > Design > Edit HTML. (In new User Interface - Dashboard > Template)
  2. As always Download your template.
  3. Tick Expand Widget Templates Check box.
  4. Find your widget in the template by using Ctrl+F function and entering the widget Id in the search box.


Applying Conditional Tags


After finding Widget ID in your template you will find this code like this.

<b:widget id='HTML13' 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>


Below are the some examples of conditional tags.Just pay your attention to the highlighted lines and apply the conditional tags as I have applied in below examples,but don't forgot to write </b:if> code just below/after <b:include name='quickedit'> line.

To Show Widget On Index (list) Pages


<b:widget id="HTML13" locked="false" title="Recent Posts" type="HTML">
<b:includable id="main">
<b:if cond="data:blog.pageType == "index"">
<!-- only display title if it's non-empty -->
<b:if cond="data:title != """>
<h2 class="title"><data:title></data:title></h2></b:if>
<div class="widget-content"><data:content>
</data:content></div><b:include name="quickedit">
</b:if>
</b:include>
</b:includable>
</b:widget>



To Show The Widget Only In HomePage


<b:widget id='HTML13' 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 Widgets On Post Pages Only


<b:widget id='HTML13' 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 Widget On Any Particular Page


<b:widget id='HTML13' 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 Archive Pages


<b:widget id='HTML13' 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>


To Show Widgets On Static Pages Only


<b:widget id='HTML13' 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 Widget On Post And Static Pages Only


<b:widget id='HTML13' locked='false' title='Recent Posts' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.url == data:post.url'>
<!-- 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 Widget On Label-Search Pages Only


<b:widget id='HTML13' locked='false' title='Recent Posts' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.searchLabel'>
<!-- 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>


The code will check whether the condition is true or false:

  • If the result is true, it executes (and display) the widget’s content.
  • If the result is false, it skips the content and hide the widget.

Now click on the save template button and you are done.

For an example you can see the floating go to top and comment buttos at below left of this page,you will also notice that these buttons are appearing only on post pages not on any other pages,here I have applied conditional tags.

Post a Comment

  1. Boss gimana caranya bikin daftar isi yang kayak di tab menu Archives y agan....?? mohon di balas ya

    ReplyDelete
  2. Brother I Have One Question And My Need How To Hide All Widgets In Perticular Page And Also Increace The Width Of Blog Like Contact Page,,,,

    Please Reply Me I Am Waiting

    ReplyDelete
  3. You're awesome. This is great, also using your Javascript slider. Much thanks!

    ReplyDelete
  4. hi admin, i want to ask you, how to hide adsense ini search label, this code not work, thanks

    ReplyDelete
  5. i want to show a widget only on particular label page, how can i do that?

    ReplyDelete
  6. Hello,

    Thank you, its working perfectly.

    Best Regards,
    Fun Recreational Boating

    ReplyDelete
  7. cool but I want to figure out how to change my SLIDER in my downloaded template so it only shows up on the HOMEPAGE, no other pages. At the moment it turns up on every page I click :l

    ReplyDelete
  8. thanks mate, ive already hide one of my widget on my homepage.

    ReplyDelete
  9. Nice very helpful information bout blogger conditional tags, its solved many of my blog problems thanks admin for sharing such a great information. Visit http://www.filmaxtv.com To Watch HD UK, USA TV Channels Free.

    ReplyDelete
  10. This is awesome man!! I searched the whole internet to find a way not to display my addthis widget on blogger homepage, and this one worked like a charm!! Thanks a lot!!

    ReplyDelete
  11. This comment has been removed by the author.

    ReplyDelete
  12. My blog comments doesn't show the content and those that has posted them, like how your is showing, it only shows e.g. (5 Comments)

    Need help Urgently!
    Sent your feedback to romshillzz@gmail.com

    ReplyDelete
  13. Thank you very much for this very usefull knowledge.

    ReplyDelete

If you want to be informed about any replies then check "Notify me" option (present at lower right corner of comment box and it will display if you are logged in to your google account).PLEASE DO NOT SPAM

 
Top