How to Add in Blogger Next and Previous Post with Titles

Today I will give an example of another life experience working with a blogger. I remember on my first blog I wanted to clean up a lot, this included the Next and Previous links. And you know, these components of the template should not be deleted, I can even explain why. 

In general, these links are important, both for normal SEO optimization of the site - blog and for their visitors. With them, the site - the blog becomes more SEO friendly, in short, the search engines like it, because with the help of Next and Previous links, it is easier for them to rush through your web resources. 

The same is with the visitors, only it is not SEO optimization that is friendly here, but the design or functionality as you like. A living example, a visitor of your blog has read a post and in order not to return to the main page, he can continue reading your content using these links.

How to Add in Blogger Next and Previous Post with Titles

To add this widget (DEMO) to your blog:

1. Go to your Blogger Dashboard

2. Choose Theme - Edit HTML

3. Now Press on your Keyboard CTRL+F and in the search window write  ]]></b:skin> and press Enter, before this code you need paste this CSS:

CSS.pagernav {margin-top: 20px; background:#fff;padding:10px 0;border:1px solid #eee;border-top:0;}
.turn-left{width:50%;float:left;margin:0;text-align:left;color:#bbb;transition:all .3s ease-out;}
.turn-right{width:50%;float:right;margin:0;text-align:right;color:#bbb;transition:all .3s ease-out}
.turn-right:hover .pager-title-left,.turn-left:hover .pager-title-left{color:#ddd!important;}
.turn-left a,.turn-right a{color:#999;}
.turn-right a:hover,.turn-left a:hover{color:#666!important;}
.turn-left a,.turn-right a{font-size: 22px; font-weight: 700; text-transform: uppercase;}
.pager-title-left{font-family: 'Open Sans',sans-serif;font-size:22px;font-weight:700;text-transform:uppercase;transition:all .3s ease-out}
.blog-left{margin:0}
.blog-right{margin:5px 10px 10px}
#blog-pager-newer-link{float:left;padding:0 0 0 15px;}
#blog-pager-older-link{float:right;padding:0 15px 0 0;}
.blog-pager,#blog-pager{clear:both;text-align:center} 

4. Next step, find in your Theme  data:post.body  and after it add this HTML:

HTML<b:if cond='data:blog.pageType == &quot;item&quot;'>    
<div class='pagernav'>
<div class='blog-pager' id='blog-pager'>
<div class='turn-left'>
<div class='blog-left'>
    <b:if cond='data:newerPageUrl'> 
      <span id='blog-pager-newer-link'>
       <span class='pager-title-left'>Previous Post</span><br/>  
      <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'>&#171; Prev Post</a> 
      </span>
       
<b:else/>
      <span class='current-pageleft'><span class='pager-title-left'>Latest</span></span>
    </b:if>
</div>
</div>
<div class='turn-right'>
<div class='blog-right'>
    <b:if cond='data:olderPageUrl'>
      <span id='blog-pager-older-link'>
        <span class='pager-title-left'>Next Post</span><br/>
      <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'>Next Post &#187;</a>
      </span>
<b:else/>
<span class='current-pageright'><span class='pager-title-left'>First</span></span>
    </b:if>
</div>
</div>
  </div>
<div style='clear: both;'/>
</div> 
</b:if>

5. Final step scroll page down until </body>  and paste before it this JS:

JS<script type='text/javascript'>
//Pager
$(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);
});
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> 

Now Save new settings and check the result.

If post titles not showing up just add before </head>  this jquery code:

Jquery<script src='https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js'></script>

Video instruction

That's all, enjoy. And if you have any questions write it in the comments below.