How to Add in Blogger Next and Previous Post with Titles

How to Add in Blogger Next and Previous Post with Titles

August 25, 2022
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:

.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:


<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:


<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:


<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.

Share by this in:

7 Comments

avatar
Ron Ramirez December 2, 2022 at 7:32 AM

Post titles are showing up but the previous post does not seem to be getting CSS applied any ideas?

avatar
Daniel December 4, 2022 at 11:55 PM

Try to add CSS after closing tag skin, using style tag

avatar
Anonymous January 2, 2023 at 11:26 PM

Hello, the "more posts" is disappearing when entering this code?

avatar
Daniel January 3, 2023 at 12:34 AM

No. But first make copy of your theme.

avatar
Anonymous January 3, 2023 at 5:07 PM

Thank you - will do.

avatar
Walidin January 28, 2023 at 8:57 AM

If there are 3 posts on blog: post 1 on 1st january 2023, post 2 on 2nd january 2023, post 3 on 3rd january 2023.

Scenario: Now I am on Page Post 2.

I want Previous post is post 1
And Next Post is post 3.

How to do this?

avatar
Daniel January 28, 2023 at 11:03 AM

This navigation is already perform this function, so just replace in the HTML title of the "next post" with the "previous post" and vice versa.