Sunday, September 27, 2009

How to display a widget on a specified page in Blogger

From this tutorial, you will be able to control whether or not to have a widget displayed on a specific page of your Blogger blog. When designing your Blogger’s template, you may prefer to have certain elements to be displayed on certain pages of your blog. This can come handy for any blog and can be done with the use of the if conditional tags.


Before you begin, make sure you back up your current template in case it doesn’t turn out as expected.

In order for Blogger to detect a widget on your template, you must first create one and place it where you would want it to appear. Here’s a screen shot of mine:
Steps to follow:

1. Login to your Bloggers dashboard

2. Go to Layout > Edit HTML (Click on “expand widgets” box)

3. Locate the widget code you’ve just added. Here’s a screen shot of mine:

To display only on home page
Once you’ve located your widget section code, add the following section code in red to its location:


<b:widget id='HTML8' locked='false' title='Tips Categories:' 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 != &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>
</b:widget>

To display only on all post pages but not the home page
Once you’ve located your widget section code, add the following section code in red to its location:

<b:widget id='HTML8' locked='false' title='Tips Categories:' 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>
</b:widget>


To display only on archive page
Once you’ve located your widget section code, add the following section code in red to its location:

<b:widget id='HTML8' locked='false' title='Tips Categories:' 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 != &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>
</b:widget>

To display only on a specified link from your blog
Once you’ve located your widget section code, add the following section code in red to its location:

<b:widget id='HTML8' locked='false' title='Tips Categories:' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.url == &quot;http://www.blogspotvision.com/search/label/tips&quot;'>
<!-- 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>
</b:widget>

note: replace the link in blue with the link you want it to show up on.

No comments:

Post a Comment