All About Blogging: Displaying and Hiding Widgets of Blogger in Specific Pages

Hey guys, do you want to make your blog same like the websites? If you want, then you should modify your widget position and widget location in specific place only because there can be lot of widgets in your blog. So all of them showing in all the pages looks some what badly organized. Blogger does not have facility to arrange the widgets in particular fields but now here we are going
to write about some well tips for displaying and hiding your widgets in particular pages or fields.
It is easy to show and hide widget in particular pages in the blogger blog. Lets go through step by step solution to know hiding and displaying the widget in particular place.

Warning: Don't change any code of your template without keeping back up of that template.

First of all, add a widget by going in dashboard of blogger and clicking on layout then selecting the html/javscript.
After adding gadget, go to template and click on edit html.
Now find the the name of that widget simply pressing ctrl and f. Such as if your widget name is label, find label. When you find your widget name that should seem same like the following code

<b:widget id='HTML1' locked='false' title='Recent Posts' type='HTML'><b:includable id='main'><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>

then when you find your widget name add given tags colored with blue as the given style.

# Put as following code to display 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'>
<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>

Add same as following to display in a specific page.

In the above code you should replace the URL of your blog link.<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"'>
<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>

# Put the code as following to display widgets in static pages only

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

# Add code as given below codes to hide widget in particular pages only

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

Here also your should put the URL of your blog in URL of the page

# Add the codes as give to hide blogger widget in static pages only

<b:widget id='HTML1' locked='false' title='Recent Posts' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.pageType != "static_page"'>
<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 display particular widget in archive page only, add the code as following

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

At last save the template after adding the codes.
Thank you, you have successfully done.