Post pagination in Blogger's newer themes (including custom next/previous post titles)

Here are 3 simple ways for you to add pagination back to posts in the newer Blogger templates.

These newer (2017) themes remove or hide the links to your next or previous posts, which were available in the older themes. Luckily it's not too hard to get them back.

Add post pagination back to new Blogger themes

Here are 3 different methods you can use to add these links back:

1. Use Blogger's built-in Newer Posts and Older Posts links
2. Customize the Newer Posts / Older Posts links to display what you want
3. Show the titles of the next and previous posts as links to those posts

Note: I used the Soho theme for my testing, so these methods will all work great there. Contempo and Notable themes may require some slight tweaking, such as adding the pagination code to a different part of the template or adjusting the CSS selector. Emporio should work similarly, but I was unable to make the page pagination appear in that theme.

Before starting: Add custom CSS code

Before we start, for all 3 methods, we should add a line of CSS to make sure the links get displayed. So go to [ Theme > Customize > Advanced > Add CSS ] and add this line:

.blog-pager .blog-pager-newer-link, .blog-pager .home-link {display: block;}

This will stack the links. If you prefer them in a row or on the left/right sides of the page, just as the pager links used to look in the older themes, add this here also:

.blog-pager-newer-link {float: left;}
.blog-pager-older-link {float: right;}
.blog-pager .home-link {text-align: center;}

Method 1 - Use Blogger's built-in "Newer Posts" and "Older Posts" links

This is very easy. This will add simple links that read Newer Posts and Older Posts at the footer of your posts, along with a Home link.

Blogger's default Newer/Older Posts pagination links on a blog post 

Edit your theme's HTML, and find where you want the next/prev post links to appear. I think the footer is a good place, so I'll find this line in the theme:

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

Depending on which theme you're using, you may have more than one instance of this line. Check that you've found the one within the "Blog1" widget.

Now just add the following line under there:

<b:include cond='data:view.isPost' name='postPagination'/>

So the whole section for my footer looks like:

<div class='post-footer'>
    <b:include name='footerBylines'/>
<b:include cond='data:view.isPost' name='postPagination'/>    <b:include data='post' name='postFooterAuthorProfile'/>
  </div>
</b:includable>

That's it! Now on your blog, you should see links to Newer Posts, Older Posts, and Home at the bottom of individual posts.

This is a good method for blogs that may have international readers or multiple languages, because this relies on Blogger's own internal variables. This means that visitors who use another language will automatically see "Newer Posts / Older Posts / Home" translated in their own language.

Method 2 - Customize the "Newer Posts / Older Posts" links to display what you want

The Newer/Older Posts links can also be customized to display whatever you want. This can be text, emoji, images, or any combination.

Customized next/prev post links in Blogger's newer themes

First you should do the same steps as in Method 1.

When that is finished, find these two lines of code in your template HTML. Each is in a different, separate location within the Blog1 widget.

<b:includable id='nextPageLink'>

and

<b:includable id='previousPageLink'>

Expand their content by tapping the 3 grey dots (or small black arrow), and then edit their content to say whatever you want. Specifically, you'll want to find this line in both sections:

<data:messages.newerPosts/>

and

<data:messages.olderPosts/>

Replace those lines completely, or simply add text alongside them. Those are the codes that will display the phrase "Newer Posts" and "Older Posts" in the user's language.

You can include text, emoji, or other HTML to display images. Just ensure that your new content is enclosed. within the <a> if you want it to be linked.

Here's an example of what the section would look like. I've added a custom message alongside the original Blogger newer/older posts message, and an emoji (well, just an arrow like ">" but you can include any emoji using its decimal code:

 <b:includable id='nextPageLink'>
  <a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-older-link&quot;' expr:title='data:messages.olderPosts'>
    <data:messages.olderPosts/> are over here &#60;  </a>
</b:includable>

and

 <b:includable id='previousPageLink'>
  <a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-newer-link&quot;' expr:title='data:messages.newerPosts'>
    &#62; <data:messages.newerPosts/> are over there   </a>
</b:includable>

You can, for example, include an <img> tag here to your own special arrow-style images hosted on Blogger.

Method 3 - Show the linked titles of the next and previous posts

A bit more complicated, but you can also display the actual titles of the next/previous posts as links directly to those posts. This is a nice way to give a small preview of what else your blog offers.

Titles of the next/previous posts, displayed and linked directly to those posts

This will require adding some custom code to grab the post titles. Blogger natively can grab the links to the next/previous posts, but not their titles, it seems.

Copy the following code, and paste it where ever in your blog template that you'd like the links to appear. For example, you can paste it under <b:includable id='postFooter' var='post'> for the links to appear in the post footer. 

<div class='next-previous-post-title-links'>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js?attredirects=0&amp;d=1"></script>
<script type="text/javascript">
$(document).ready(function(){
 var olderLink = $("a.blog-pager-older-link").attr("href");
 $(".blog-pager-older-title").load(olderLink+" .post-title:first", function() {
  $(".blog-pager-older-title").text($(this).text());
 });
 var newerLink = $("a.blog-pager-newer-link").attr("href");
 $(".blog-pager-newer-title").load(newerLink+" .post-title:first", function() {
  $(".blog-pager-newer-title").text($(this).text());
 });
});
</script>

Next, we should replace the "Newer/Older Posts" messages, similarly as we did in Method 2.

Replace <data:messages.olderPosts/> with the following:

<span class="label">&amp;laquo;</span>
<span class="blog-pager-newer-title"></span>

And replace <data:messages.newerPosts/> with:

<span class="blog-pager-older-title"></span>
<span class="label">&amp;raquo;</span>

So they should each of those sections should look like this:

<b:includable id='previousPageLink'>
<a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-newer-link&quot;' expr:title='data:messages.newerPosts'>
<span class="label">&amp;laquo;</span>
<span class="blog-pager-newer-title"></span>
</a>
</b:includable>

and

<b:includable id='nextPageLink'>
<a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-older-link&quot;' expr:title='data:messages.olderPosts'>
<span class="blog-pager-older-title"></span>
<span class="label">&amp;raquo;</span>
</a>
</b:includable>

And that's it! Again, you may need to make slight tweaks or modifications to get it working right other than on Soho. For example, Contempo required different CSS. But you can play around with it. You may want to display:none the "Home" link, for example.

Have fun!