Show Blogger Next And Previous Post Titles In Desired Locations (Above Post Title, Under Post Title, Below Post Body, Above Comments)

When viewing a single blog post on Blogger, "Next" or "Newer" and "Previous" or "Older" post links are displayed to let the user navigate to other posts in the blog. The default placement of the above links are way down, and user have to scroll down to find it if there are multiple comments on the blog post. To make it more visible to the reader, it is better to place the "Next" or "Newer" and "Previous" or "Older" post links in more visible locations such as- Above Post Title, Under Post Title, Below Post Body, Above Comments. Here in this post, we will see how to move Blogger's  "Next" and "Previous" Post Titles and show Above Post Title, Under Post Title, Below Post Body, Above Comments.

A) Backup the current Blogger Template:
Before making any changes to the Blogger template, let's backup the current blogger template so that we can easily revert if required.

To backup Blogger Template do the following:

• Login to Blogger and navigate to TEMPLATE
• Click BACKUP/RESTORE button on the top right corner of the page
• Click on DOWNLOAD FULL TEMPLATE
• Save the XML file on your computer

 B) Remove the default NEXT/PREVIOUS navigation link code

•  Login to Blogger and navigate to TEMPLATE
• Click EDIT HTML
• Click anywhere inside the code area and press CTRL+F and search for "<b:include name='nextprev'/>" 

You will find code something like this:

<!-- navigation -->
    <b:include name='nextprev'/>

Delete both the lines or comment out as below:

<!-- navigation
    <b:include name='nextprev'/>
-->

• Click Save Template

 Now, let's display the NEXT/PREVIOUS Links. The code used to display the NEXT/PREVIOUS Links is:

1. <!--nextprev--> 
2. <b:if cond='data:blog.pageType == &quot;item&quot;'>
3. <b:include name='nextprev'/></b:if>
4. <!--nextprev-->

 Explanation:

1&3: just comments

2: Condition to check if the page is a blog post page

3: Code to add the NEXT/PREV links

If you want to display the next and previous links for both desktops and mobile, use the code below instead of the one above.

1. <b:if cond='data:blog.pageType == &quot;item&quot;'>
2.   <b:if cond='data:mobile'>
3.     <b:include name='mobile-nextprev'/>
4.   <b:else/>
5.     <b:include name='nextprev'/>
6.   </b:if> 
7. </b:if>  

C)  Show Blogger Next and Previous Post Links> Above Post Title

• Click anywhere inside the code area and press CTRL+F and search for
  <b:includable id='post' var='post'>
  
• Right below the line <b:includable id='post' var='post'> paste the code: 
  
  <b:includable id='post' var='post'>

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

•  Save Template
• Test by viewing a single blog post
  

D)  Show Blogger Next and Previous Post Links> Below Post Title

• Click anywhere inside the code area and press CTRL+F and search for
  <div class='post-header'>
• Right above the line <div class='post-header'> paste the code: 
  
  <b:includable id='post' var='post'>

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

•  Save Template
• Test by viewing a single blog post
  

<b:includable id='post' var='post'>

E)  Show Blogger Next and Previous Post Links > Below Blog Post Body

• Click anywhere inside the code area and press CTRL+F and search for
  <div class='post-footer'>
• Right Above the line <div class='post-footer'> paste the code: 
  
  <b:includable id='post' var='post'>

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

•  Save Template
• Test by viewing a single blog post
  

F)  Show Blogger Next and Previous Post Links > Above Comments 

• Click anywhere inside the code area and press CTRL+F and search for
  <b:includable id='comments' var='post'>
  
• Right Below the line "<b:includable id='comments' var='post'>" paste the code: 
  
  <b:includable id='post' var='post'>

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

•  Save Template
• Test by viewing a single blog post

• 0comment

Endi Eichar

Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.

Related Posts

How To