How to Show and Hide Widgets in Blogger ?

Published By: Ashu Insan Published On: 1:46 AM
If you are a Blogger user, you'd realized that Blogger widgets are set in a way that every single page will display these widgets, let it be the home page, post pages, static pages, specific URL pages or archive pages.

Its really important to control widget Display in Blogger. Some widgets are meant for homepage only while some makes sense when you show it at your Contact Pages, About Me pages or static pages. If you using a lots of widgets can make a blog/site to look unprofessional, increasing page loading time, therefore visitors will lose their patience.

So how do we actually do this. The trick is really simple. You just need to enclose your widgets in few pieces of codes. So lets jump straight on how to manage widgets on different pages in blogger.

For Example:

If you want to hide your Recent Post Widget in Homepage, just follow this steps.
  • Login to your Blogger Dashboard.
  • Click the drop-down menu and select Template.
  • Backup your Template before making any changes.
  • Click Edit HTML ---> Proceed ---> Expand Widget Templates. (How To Edit HTML)
  • Click Ctrl+F to find your Widget.
  • Enter widget's name in the search box. Let's say i have given the title for my widget as "Recent Posts". After searching you will find the below snippets:
<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 != &quot;&quot;'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>
<b:include name='quickedit'/>
</b:includable>
  • This code represents the widget that you have added in the Page Elements location. All you have to do is to add the following conditional tags marked with Red just below <b:includable id='main'> and above </b:includable> to hide the widget in Homepage.
<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 != &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>
  • After you have added the conditional tags, Click "Save Template" and view your blog.

Advanced:

How to Show Widgets Only On Homepage?

Simply enclose the code inside HTML/JavaScript widget between these lines,
<b:if cond='data:blog.url == data:blog.homepageUrl'>
WIDGET CODE GOES HERE
</b:if>
where WIDGET CODE GOES HERE is the code of the widget you want to show or hide.

How to Show Widgets On Post Page?

Simply enclose the code inside HTML/JavaScript widget between these lines,
<b:if cond='data:blog.pageType == "item"'>
WIDGET CODE GOES HERE
</b:if>
where WIDGET CODE GOES HERE is the code of the widget you want to show or hide.

How to Show Widgets Only On Static Pages?

Simply enclose the code inside HTML/JavaScript widget between these lines,
<b:if cond='data:blog.pageType == "static_page"'>
WIDGET CODE GOES HERE
</b:if>
where WIDGET CODE GOES HERE is the code of the widget you want to show or hide.

How To Hide Widgets On Static Pages?

Simply enclose the code inside HTML/JavaScript widget between these lines,
<b:if cond='data:blog.pageType != "static_page"'>
WIDGET CODE GOES HERE
</b:if>
where WIDGET CODE GOES HERE is the code of the widget you want to show or hide.

How to Show Widgets On Selected Post Only?

Simply enclose the code inside HTML/JavaScript widget between these lines,
<b:if cond='data:blog.url == "URL OF Selected Post"'>
WIDGET CODE GOES HERE
</b:if>
where WIDGET CODE GOES HERE is the code of the widget you want to show or hide.

How to Hide Widgets On Selected Post Only?

Simply enclose the code inside HTML/JavaScript widget between these lines,
<b:if cond='data:blog.url != "URL OF Selected Post"'>
WIDGET CODE GOES HERE
</b:if>
where WIDGET CODE GOES HERE is the code of the widget you want to show or hide.

How to Show Widgets Except Post Pages?

Simply enclose the code inside HTML/JavaScript widget between these lines,
<b:if cond='data:blog.pageType == "index"'>
WIDGET CODE GOES HERE
</b:if>
where WIDGET CODE GOES HERE is the code of the widget you want to show or hide.

How to Hide Widgets Except Post Pages?

Simply enclose the code inside HTML/JavaScript widget between these lines,
<b:if cond='data:blog.pageType != "index"'>
WIDGET CODE GOES HERE
</b:if>
where WIDGET CODE GOES HERE is the code of the widget you want to show or hide.

How to Show Widgets Only on Archive Pages?

Simply enclose the code inside HTML/JavaScript widget between these lines,
<b:if cond='data:blog.pageType == "archive"'>
WIDGET CODE GOES HERE
</b:if>
where WIDGET CODE GOES HERE is the code of the widget you want to show or hide.

How to Hide Widgets Only on Archive Pages?

Simply enclose the code inside HTML/JavaScript widget between these lines,
<b:if cond='data:blog.pageType != "archive"'>
WIDGET CODE GOES HERE
</b:if>
where WIDGET CODE GOES HERE is the code of the widget you want to show or hide.
You can do this with as many items in your sidebars as you like and with any gadgets, if you need extra help you only need ask in the comments.
Share this article :

Stay Connected To Get Free Updates!

Subscribe via Email

Follow us!

 

Your feedback is always appreciated. We will try to reply to your queries as soon as time allows.
Note:
1. Make sure to click the "Subscribe By Email" link below the comment to be notified of follow up comments and replies.
2. Please "Do Not Spam" - Spam comments will be deleted immediately upon our review.
3. Please "Do Not Add Links" to the body of your comment as they will not be published.
4. Only "English" comments shall be approved.
5. If you have a problem check first the comments, maybe you will find the solution there.

 
Copyright © 2012-13. NewBloggerTips - All Rights Reserved
Home | About | Disclaimer | Privacy Policy
Supported by : BharatNewsPortal | IBPSExamsPaper | BharatJobsPortal
Designed by: Ashok Lothia | Proudly powered by Blogger
DMCA.com