Tech Tips on Computers, Internet, Blogging, Web Development, Social Media, Android and more

Full width home advertisement

Post Page Advertisement [Top]

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

14 comments:

  1. Very good and detailed code about designing the back/next article area on blogger. Tweaking the template can be useful for future use.

    ReplyDelete
  2. Thanks for your comment.
    Yes, indeed.

    ReplyDelete
  3. Very Good sir . Code is always working well thanks for shering your idea to all . ������������������������������������������������������ great post ������������������

    ReplyDelete
  4. Hello dear the code did not working... please help

    ReplyDelete
  5. please sir help me.. this code did not working........

    ReplyDelete
    Replies
    1. Are you using default Blogger templates or from some other?
      Are you placing the code above in the right places as described above?

      The only code required to show Prev and Next links is:
      The rest of the code used above is to check some conditions only.

      Delete
  6. Really Good Work :)
    Keep it up
    Aap bahut acchi blogging tips dete ho

    ReplyDelete
  7. great ! it worked for me :-) Is there any way to customise the buttons of prev post and newer post on blogger ? some CSS perhaps ?

    ReplyDelete
    Replies
    1. Sure you can. The only thing is to find the ID or the CLASS that encapculated the NEXT/PREVIOUS link elements. That would be specific for the Blogger theme you are using. So, you will need to find that - you can use the browser's Inspect tool.
      See here: https://techubber.blogspot.com/2016/06/tips-to-customize-blogger-template-css-inspect-element.html

      After that: write some basic CSS around it.
      If you are satisfied with the changes, copy the CSS code from the browser's Inspect tool and put it in the Blogger theme.
      Example:
      #Blog1_blog-pager-older-link {
      background-color: #aa6635;
      padding: 6px 20px 6px 20px;
      border-radius: 30px;
      color: #fff;
      margin-bottom: 10px;
      font-size: 1.2em;
      }

      Delete
  8. Really, good information.
    Thank you

    ReplyDelete
  9. Replies
    1. Thanks for the feedback. I am glad it was helpful. 👍

      Delete

Bottom Ad [Post Page]