How To Show Elements When Viewing Posts

by

When I was thinking about writing this post I originally intended on discussing how to add a Digg button to each post in a Blogger blog. After some thought I decided to expand on that idea and explain how to show items when a visitor displays a post.

On Technically Easy I have a few items that are only displayed when a visitor views a post. These items include the Digg button, the recent posts in the right sidebar, and the social network links in the comments bar at the end of each post. In this post I will show you how easy it is to accomplish this.

Page Type

Within blogger there is a tag that contains the type of page you a viewing. This tag is called the pageType tag and can be referenced from within any widget.

There are three valid values for the pageType tag:

  1. item – indicates the current page is a post page.
  2. archive – indicates the current page is an archive page.
  3. index – indicates the current page is the home page of the blog.

For this post I will concentrate on the item value, which will allow us to only display elements when a visitor views a specific post page.

Display HTML Onley When Viewing Posts

For such items as the Digg button or the social network links in my comments bar at the end of each post, I simply use an if statement in my layout to control the display. It is easy to control when to display certain HTML elements using Blogger.

The following steps shows how to accomplish this.

  1. Edit the HTML of your layout by clicking Layout and then Edit HTML from your Dashboard.
  2. Either locate the piece of HTML code or add the HTML code to display only on your post pages.
  3. Insert a blank line before the HTML code and then one after the code. Enter the code below:
    4. <b:if cond='data:blog.pageType == "item"'>
    ... the HTML code to display only on post pages is here ...
    </b:if>

    When a visitor visits your blog, Blogger will check to see the page type, and if it is a post page it will display the HTML within the if statement. Otherwise, it won’t display that HTML.

Display Widgets Only When Viewing Posts

For my Recent Posts list in the right sidebar, you will notice that this widget is only displayed when you visit a post page. Displaying widgets in this manner can be tricky, but is also easily done.

To accomplish this, use the following steps:

  1. Add a page element to you blog.
  2. Once the element has been added click Edit HTML to display your blog layout in HTML.
  3. Locate the widget that is associated with the element you just added.
  4. Now comes the tricky part. You want to only show this widget when pageType=='item', however you can’t wrap the widget tag within an if statement. You need to enclose the if statement in a widget.

    For example, this won’t work:

    <b:if cond='data:blog.pageType == "item"'>
    <b:widget id='Feed1' locked='false' title='Recent Posts' type='Feed'>
    </b:if>

    When you try to save the above code, you will get the following error:

    The widget with id Feed1 is not within a section (actual parent element is: b:if.) Every widget should be in a section.

    To avoid this you will need to include the if statement within the widget itself as such:

    <b:widget id='Feed1' locked='false' title='Recent Posts' type='Feed'>
    <b:includable id='main'>
    <b:if cond='data:blog.pageType == "item"'>
    ... remainder of the widget code ...
    </b:if>
    </b:includable>
    </b:widget>

    The above code will now prevent the contents of the widget from being displayed, unless the page a visitor is viewing is an actual blog post page. This is how I setup the Recent Posts widget.

Summary

This post provided a quick overview of displaying items only when a visitor displays a post page on your blog. This allows you to display either HTML or specific widgets only on post pages to make your blog more dynamic.

I currently use this feature when I display the Recent Posts widget, the Digg button and the social network links.

Follow Me