How to Add Next and Previous Button with Post Titles on Blogger?

Show Next and Previous Post Titles Above Blogger Comment section. How to Show Next & Previous Post Titles in Blogger with jQuery Navigation? Use next and previous post titles as navigation in Blogger.
Blog pager is a way for navigation which can be make more user friendly by displaying Next and Previous Post Titles instead of simple link. By using jquery this is possible to replace simple navigation link with post titles. And we can also move that pager above the Blogger Comment section. 

Generally most of the cases Next and Previous link placed after comment box and it causes a problem. We have seen that some Blog posts are written with 1000+ word so in that case article's height will be longer in post pages. And this is often difficult to get the next and previous post link below comment box. 


Blog Pager

However sometime visitors skip that site. So moving that Next and Previous post link above comment section grab better attention of the Blog readers. And this will be more lively if we can display the Next and Previous post title as a replacement for monotonous link.

Live Demo
                         
The tutorial maybe found little tough. But I have tried to explain this as much as easy method. Just follow the below steps-

Step #1: Log in to your Blogger account and Go to your Blogger Dashboard

Step #2: Click on -> Theme -> Edit HTML

Step #3: Now find ]]></b:skin> by Pressing Ctrl+F (Windows) or CMD+F (Mac) 

Step #4: And Paste the below code above/before ]]></b:skin> 

/*www.bloggerspice.com Pager*/
#blog-pager-older-link h6{margin:0;padding:0;text-align:right;font-family:&#39;Oswald&#39;,sans-serif;font-size:14px;color:#333333;text-transform:uppercase;line-height:1.625em;font-weight:700}
#blog-pager-newer-link h6{margin:0;padding:0;text-align:left;font-family:&#39;Oswald&#39;,sans-serif;font-size:14px;color:#;text-transform:uppercase;line-height:1.625em;font-weight:700}
.pager-content{width:99.5%;overflow:hidden;margin:10px 0 0;padding:10px 0 0}
.pager-content a:hover,.pager-content{color:#000;text-decoration:none}
.showpageNum a,.showpage a,.showpagePoint{background:#DE3C3C;color:#FFF;font-size:15px;font-family:open sans;font-weight:700;margin-left:10px;margin-right:10px;border-radius:5px 5px 5px 5px;-webkit-border-radius:5px 5px 5px 5px;-moz-border-radius:5px;-o-border-radius:5px 5px 5px 5px;transition:background 400ms;-webkit-transition:background 400ms;-moz-transition:background 400ms;-o-transition:background 400ms;padding:10px 20px}
.showpageNum a:hover,.showpage a:hover,.showpagePoint,.blog-pager-newer-link,.blog-pager-older-link,.home-link{color:#FFF}
.showpageOf{display:none!important}

Step #5: Now find </head> by Pressing Ctrl+F (Windows) or CMD+F (Mac) 

Step #6: And Paste the below code above/before </head> 

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js' type='text/javascript'/> <link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'/> 

Step 7 Now find <data:post.body/> by Pressing Ctrl+F (Windows) or CMD+F (Mac) 


You will find 3/4 time this code go for second one.

Step #8: And Paste the below code below/after <data:post.body/>

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='blog-pager' id='blog-pager'>
 <div class='pager-content'>
<div id='blog-pager-newer-link'>
    <b:if cond='data:newerPageUrl'>
        <h6>Previous</h6>
      <a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-newer-link&quot;' expr:title='data:newerPageTitle'>
        <data:newerPageTitle/>
      </a>
    </b:if>
   </div>
<div id='blog-pager-older-link'>
    <b:if cond='data:olderPageUrl'>
        <h6>Next</h6>
      <a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-older-link&quot;' expr:title='data:olderPageTitle'>
        <data:olderPageTitle/>
      </a>
    </b:if>
   </div>
 </div>
  <div class='clear'/>
  </div>
<script type='text/javascript'>
$(document).ready(function(){
var olderLink = $(&quot;a.blog-pager-older-link&quot;).attr(&quot;href&quot;);
$(&quot;a.blog-pager-older-link&quot;).load(olderLink+&quot; .post-title:first&quot;, function() {
var olderLinkTitle = $(&quot;a.blog-pager-older-link&quot;).text();
$(&quot;a.blog-pager-older-link&quot;).text(olderLinkTitle);//rgt
});
var newerLink = $(&quot;a.blog-pager-newer-link&quot;).attr(&quot;href&quot;);
$(&quot;a.blog-pager-newer-link&quot;).load(newerLink+&quot; .post-title:first&quot;, function() {
var newerLinkTitle = $(&quot;a.blog-pager-newer-link:first&quot;).text();
$(&quot;a.blog-pager-newer-link&quot;).text(newerLinkTitle);
});
});</script>
</b:if>

Hiding The Existing Next and Previous Text Links

In this steps we will hide the existing Next and Previous text links. because after following the above steps you will Next and Previous post title above comment box. 

I mean end of Blog post. But previous Next and Previous text link still visible below the comment box. So simply we will hide that. Just follow the below steps-

Step #9: Find the default Blog Pager code like below.

<div class='blog-pager' id='blog-pager'>
    <b:if cond='data:newerPageUrl'>
      <span id='blog-pager-newer-link'>
      <a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-newer-link&quot;' expr:title='data:newerPageTitle'><data:newerPageTitle/></a>
      </span>
    </b:if>
    <b:if cond='data:olderPageUrl'>
      <span id='blog-pager-older-link'>
      <a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-older-link&quot;' expr:title='data:olderPageTitle'><data:olderPageTitle/></a>
      </span>
    </b:if>
    <a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a>
    <b:if cond='data:mobileLinkUrl'>
      <div class='blog-mobile-link'>
        <a expr:href='data:mobileLinkUrl'><data:mobileLinkMsg/></a>
      </div>
    </b:if>
  </div>

Step #10: Now wrap the above code inside below conditional tag.

<b:if cond='data:blog.pageType != &quot;item&quot;'> <b:if cond='data:blog.pageType != &quot;static_page&quot;'> Place the above code Here </b:if></b:if>
  • For example the final code will be like below
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
  <div class='blog-pager' id='blog-pager'>
    <b:if cond='data:newerPageUrl'>
      <span id='blog-pager-newer-link'>
      <a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-newer-link&quot;' expr:title='data:newerPageTitle'><data:newerPageTitle/></a>
      </span>
    </b:if>
    <b:if cond='data:olderPageUrl'>
      <span id='blog-pager-older-link'>
      <a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-older-link&quot;' expr:title='data:olderPageTitle'><data:olderPageTitle/></a>
      </span>
    </b:if>
    <a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a>
    <b:if cond='data:mobileLinkUrl'>
      <div class='blog-mobile-link'>
        <a expr:href='data:mobileLinkUrl'><data:mobileLinkMsg/></a>
      </div>
    </b:if>
</div>
</b:if></b:if>

Step #11: Now simply hit the Save Theme button.

So that's all and check your Blogger template and see the Next and Previous Post Titles Above Blogger Comment section. For further help feel free to write me.

Thank You.
Go Up