Related posts widgets like LinkWithin, Outbrain etc show posts related to the current one at the bottom of every post. This may not always be the desired output. For example, on your home page, you have multiple posts (snippets) and the widget shows related posts beneath every blog post which spoils the aesthetic look of your blog. The desired output would be to display the widget only on single post pages and hide it from archive pages. We will show you how to accomplish this task.

We assume that you have already added the required code for the ‘Related Posts’widget in a ‘HTML/Javascript Widget’.

There would be primarily two steps involved:

1. Finding the widget ID of the related posts widget.

2. Modifying your template code to show the widget only on post pages.

Finding widget ID

Go to Layout

Click the Edit Link of the Text/HTML Widget corresponding to the Related Posts Widget.

The URL of the pop up will be of the format

https://www.blogger.com/rearrange?blogID=8008849659088747325&action=editWidget&sectionId=main&widgetType=HTML&widgetId=HTML1

The text after &widgetId= is the widget ID of that gadget. For the above URL, the widget ID is HTML1.

Modifying the template code

Go to Template > Edit HTML

Click ‘Jump to Widget’ and select the widgetId you have found in the previous step.

You will see the following code.

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

You may have to click the expand code arrow buttons to see the complete code as shown in the figure below.

Change the above code to the following after replacing the widgetId in line 1 with the widget id of the related posts widget.

<b:widget id='HTML1' locked='false' title='Related 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 != &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>

Click Save Template.

Now, the related posts widget will be shown only on post pages.

How it works?

Blogger templates can use the <b:if> element to execute certain sections of code only if a given condition is satisfied.

Here, the condition is that the page type should be an item.

<b:if cond='data:blog.pageType == "item"'>

Pages can be of different types like index, archive, static page etc. An item page is a page containing a single blog post.