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.
Here are 3 different methods you can use to add these links back:
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 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:
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:
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.
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:
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:
So the whole section for my footer looks like:
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.
The Newer/Older Posts links can also be customized to display whatever you want. This can be text, emoji, images, or any combination.
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.
and
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:
and
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:
and
You can, for example, include an <img> tag here to your own special arrow-style images hosted on Blogger.
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.
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.
Next, we should replace the "Newer/Older Posts" messages, similarly as we did in Method 2.
Replace <data:messages.olderPosts/> with the following:
And replace <data:messages.newerPosts/> with:
So they should each of those sections should look like this:
and
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!
Read more ...
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:
- Use Blogger's built-in Newer Posts and Older Posts links
- Customize the Newer Posts / Older Posts links to display what you want
- 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.
<b:includable id='nextPageLink'>
<a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + "_blog-pager-older-link"' expr:title='data:messages.olderPosts'>
<data:messages.olderPosts/> are over here < </a>
</b:includable>
and
<b:includable id='previousPageLink'>
<a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + "_blog-pager-newer-link"' expr:title='data:messages.newerPosts'>
> <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&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">&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">&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 + "_blog-pager-newer-link"' expr:title='data:messages.newerPosts'>
<span class="label">&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 + "_blog-pager-older-link"' expr:title='data:messages.olderPosts'>
<span class="blog-pager-older-title"></span>
<span class="label">&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!
