5 places to move "older" and "newer posts" on blogger

View demo.


This is a continuation of rename "older posts" and "newer posts" to post titles on blogger. This time, let's move them to different sections of the post page.

How can we make "older post" and "newer post" appear on post page only?

Post Page, the landing page for each and every blogger post.

First, let's remove it from blogger homepage. Dont forget to backup your template!
1. Go to EDIT HTML page.
2. Tick EXPAND WIDGET TEMPLATES.
3. Press CTRL + F, type in <b:include name='nextprev'/> on the search bar.
4. You'll see a similar code like this:

<!-- navigation -->
  <b:if cond='data:mobile'>
    <b:include name='mobile-nextprev'/>
  <b:else/>
    <b:include name='nextprev'/>

DELETE the highlighted line: <b:include name='nextprev'/>.
5. SAVE TEMPLATE.

THE CODE.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<b:include name='nextprev'/>
</b:if>

what it means.
<b:if cond='data:blog.pageType == &quot;item&quot;'> if the page type is "item" page or also known as "post" page,
<b:include name='nextprev'/> show or "include" next and previous links

Where can we strategically place "previous post" and "next post" inside the post page?

-above title
-below title
-below post body
-on footer section
-above comments

Before we move them, make sure to:
1. Backup your template as always.
2. Go to EDIT HTML page.
3. Tick EXPAND WIDGET TEMPLATES.

Let's get on with it. To move "older/previous posts" and "newer/next posts"..

.. ABOVE TITLE.

1. Press CTRL + F, search for <b:includable id='post' var='post'>
2. BELOW that line, add the code.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<b:include name='nextprev'/>
</b:if>

It will look something like this:

3. SAVE TEMPLATE.

.. BELOW TITLE.

1. Press CTRL + F, search for <div class='post-header'>
2. ABOVE that line, add the code.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<b:include name='nextprev'/>
</b:if>

It will look something like this:

3. SAVE TEMPLATE.

.. BELOW POST BODY.

1. Press CTRL + F, search for <div class='post-footer'>
2. ABOVE that line, add the code.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<b:include name='nextprev'/>
</b:if>

It will look something like this:

3. SAVE TEMPLATE.

.. ON FOOTER SECTION.

1. Press CTRL + F, search for <div class='post-footer'>
2. BELOW that line, add the code.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<b:include name='nextprev'/>
</b:if>

It will look something like this:

3. SAVE TEMPLATE.

.. ABOVE COMMENTS.

1. Press CTRL + F, search for <b:includable id='comments' var='post'>
2. BELOW that line, add the code.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<b:include name='nextprev'/>
</b:if>

It will look something like this:

3. SAVE TEMPLATE.

Bugs, Errors, Glitches, Fixes when moving "older" and "newer" post links.

There are two of them.
Search for <b:include name='nextprev'/>. There should only be one.

It's missing. I can't find it.
Search for <b:include name='nextprev'/>. If there is none, make sure that the EXPAND WIDGET TEMPLATES is ticked. If it's still missing, choose from the above options where you'd like it to appear and follow the instructions.

I prefer my "older/previous post" on the left, "newer/next post" on the right.
You can switch their places easily by using Blogger's $startSide and $endSide. See Blogbulk's tutorial on this.

Other "Older Posts" and "Newer Posts" Tweaks.

4 ways to hide older posts and newer posts on blogger
2 ways to rename older and newer posts to post title on blogger

Related Blog and Discussion.

Customizing Blogger Post Navigation Script
"Home" "Older and "Newer" links