Monday, May 13, 2013

How to show/hide widgets only in home page in blogger

Many a times while adding some widgets in our blog we wants to show that specific widget only either on home page or not on home page. By default blogger shows every widget added on your site on every page . But in our this post we will learn how to hide/show a widget in blogger on specific pages. It is not a big deal to do so. By using some conditional tahgs you can do this easily. 


Note: Before going further first give a name to the widget that you want to hide/show because by doing this it will be easier to distinct that widget from other to avoid any unwanted change. You can again remove name from that widget later after successfully hiding. 

Lets go step by step to hide/ show widget:
STEP 1.  Go to thae Template and then to Edit HTML

STEP 2. Now click on Jump To Widget (Click on that widget which you want to hide/show) and Expand the code by clicking on the fold mark given on the left side
 By clicking the fold mark it will expand the code now you will make the required changes in your code .

Lets we find Recent Post code which is like to be

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


After you find the code add the following conditional codes above and below to show or hide widgets in pages, posts etc.

To show the widget only in Homepage:

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


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>


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

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>


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> 


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> 


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>

8 comments:

  1. hhhmmmmm.......... great info. i was in search of such trick from a long time.

    ReplyDelete
  2. It is not saving when i edit in html?

    ReplyDelete
  3. Thanks friend, your tutorial help-me a lot !
    The most tutorials online is for old version of Blogger, congratulations for the refresh tutorial !

    ReplyDelete
  4. Atlast someone is providing us with some up-to-date tweeks and twerks!!! Cheers for this!!

    Shooting My Journey x

    ReplyDelete
  5. thank you so much for your help ^_^

    ReplyDelete

© All about engineering, AllRightsReserved.