Implementing Pagination

Learn how to add "Next/Previous" links and numbered pagination.

Pagination allows users to navigate through older posts. Blogger has built-in data tags for simple "Next/Previous" links, which are found inside the `Blog1` widget.

Simple Next/Previous Links

Inside the `main` includable of the `Blog1` widget, you have access to `data:olderPageUrl` and `data:newerPageUrl`. You can use these to create navigation links.

Code Examples

xmlStandard Pagination Links
1
2
3
4
5
6
7
8
9
10
11
<div class='blog-pager' id='blog-pager'>
  <b:if cond='data:olderPageUrl'>
    <a class='older-link' expr:href='data:olderPageUrl' expr:title='data:olderPageTitle'>&amp;larr; Older Posts</a>
  </b:if>
 
  <b:if cond='data:newerPageUrl'>
    <a class='newer-link' expr:href='data:newerPageUrl' expr:title='data:newerPageTitle'>Newer Posts &amp;rarr;</a>
  </b:if>
 
  <a class='home-link' expr:href='data:blog.homepageUrl'>Home</a>
</div>

Pro Tip

Numbered pagination is not supported natively by Blogger data tags. It requires a custom JavaScript solution that reads the blog's feed to determine the total number of posts.

Was this lesson helpful?

Have feedback, found an issue, or have a suggestion? Let us know!

Send Feedback