sometimes we need to show the widget only on the home page. we can show some notes for the viewers who visits our homepage. you can also hide some elements from the home page. if you want to know how then read this post.

in this post, I am gonna tell you how to show the widget only on the home page.  this is not difficult anyone can easily do it. you just need to edit your template. so let's start.
show the widget only on the home page blogger

show the widget only on the home page.


  1. Login your google account and go to the blogger.
  2. select your blog where you are going to show the widget only on the home page. 
  3. from the dashboard click on Template link. now click on the Edit HTML button. 
    show the widget only on the home page blogger
  4. you will see your template code click anywhere on the code. press ctrl+F and search the widget name that you want to show only on the homepage. 
    show the widget only on the home page blogger
  5. after finding the widget just wrap widget content with the following b: if condition code.
<b:if cond='data:blog.url == data:blog.homepageUrl'>

example your widget code is looking like the following code.
<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>
if you want to show above code only on the home page. then just add the following condition code before and after the widget contents. in the following widget, the condition code is marked with red color.
<b:widget id='HTML1' locked='false' title='Popular 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>  
that's it now click on the save button. visit your blog your widget is displaying on the home page only.

How to hide widget from the home page only?

with the same method, you can hide the widget from the home page only. the method is same but to hide the gadget from the home page only we will use the following condition.
go to the template. click on HTML search your widget code and add following condition. as we add in the above widget.

<b:if cond='data:blog.url != data:blog.homepageUrl'>
by adding this condition your widget will be displayed on all pages. but It's hidden from the home page.

3 comments:

  1. This worked. Thank you. But the pages without the widget still display the box where the widget was. I once knew how to remove it, but am unable to find my notes. Do you know how to remove the box too on the pages where the widgets were removed?

    ReplyDelete
    Replies
    1. just wrap the whole widget code with condition code....it will work..

      Delete