how to show and hide widgets in blogger on home page

Widget/Gadget hide and show in Blogger home page is very use full trick as we know homepage is special page of our blog that’s why we always want keep our home page special we don’t want to show many widget in our homepage and some special widget we want to show only in home page. My many friends ask to me how to Show / Hide Gadget/Widget. So friends in today this post we learn how to show and hide widget in home page.

What is Home page?

A Home page is index page or main page in website is Home page.

1.       How to Display a Widget only on Homepage?

If you want to show widget only in home page Just paste the HTML/JavaScript or CSS Coding between below lines. It will show the gadget only on the homepage of your website. It would hide the gadget from Post pages and static pages.

Use below code for show widget only in home page

<b:if cond='data:blog.url == data:blog.homepageUrl'> Past your Code here </b:if>

2.       How to hide widget only in homepage?

If you want to hide widget only in home page Just paste the HTML/JavaScript or CSS Coding between below lines. It will hide the gadget in homepage.

Use below code for Hide blogger widget in homepage

<b:if cond='data:blog.pageType == "item"'>                                               Past your Code here </b:if>

How to hide & show Blogger’s Official Widgets or default widget?

The same procedure can be applied to Blogger’s Default widgets like About Me, Archives, etc. For controlling that widgets do this,

1. Go To Blogger > Template > Edit HTML
2. Backup your template (How to Backup)
3. Search for the title of the widget you want to Show and hide only in homepage
4. The code for the widget will look something similar to this one,

<b:widget id='HTML' locked='false' title='WIDGET-TITLE-HERE' type='Profile'>  <b:includable id='main'>  WIDGET CODE </b:includable>  </b:widget>

On finding the title in place of WIDGET-TITLE-HERE you will find two similar codes like those I have shown in bolded Red you just need to add the Controlling codes in the following manner. For example if you wish to show a widget at Homepage only then do this,

<b:widget id='HTML' locked='false' title='WIDGET-TITLE-HERE' type='Profile'>  <b:includable id='main'> <b:if cond='data:blog.url == data:blog.homepageUrl'> LARGE CHUNK OF WIDGET CODE </b:if> </b:includable>  </b:widget>

Note: - If you want to hide widget only in homepage just replace  <b:if cond='data:blog.url == data:blog.homepageUrl'> in above code with <b:if cond='data:blog.pageType == "item"'>