Blogger Numeric Pager

Blogger Numeric Pager is an advanced pagination for Blogger that also works in searches. It stores processed data locally and only updates if the blog changes. Live Demo →

Features

• Numeric pagination: Displays numeric pagination with the number of pages.
• First and Last: Shows the first and last pages.
• Works in searches: The first numeric pagination for Blogger that works even in searches.
• Blogger integration: Works with Blogger's native Next and Previous links.
• Local cache: Stores processed data locally.
• Updates: Only updates if the blog changes.
• Customizable: Customize its appearance via CSS.

Requirements

• The blog must be public and have feeds enabled.
• Posts must correctly include the <!--more--> jump break.

Installation

npm

npm i blogger-numeric-pager

cdn

<script src="https://cdn.jsdelivr.net/npm/blogger-numeric-pager@1/dist/main.min.js"></script>

How to use

You can use blogger-numeric-pager as an ES6 module or as a global script. For example:

import BloggerPager from 'blogger-numeric-pager'

new BloggerPager().init()

If you are using it as a global script, you can access it via the BloggerPager global variable:

new BloggerPager().init()

if you want to run JavaScript code after the pagination has been initialized, you can do it like this:

new BloggerPager().init().then(() => {
  // Your code here
})

Now, you need create a container for the pagination (with the id blog-pager by default) and another for the numbers (with the id pager-numbers by default). For example:

<div id="blog-pager">
  <div id="pager-numbers"></div>
</div>

Options

You can customize blogger-numeric-pager by passing an options object to the constructor. Available options are:

| Option | Type | Description | Default | |-----------------------|---------|--------------------------------------------------|------------------------| | pagerSelector | string | Selector for the pagination container | #blog-pager | | numberSelector | string | Selector for the pagination numbers container | #pager-numbers | | numberClass | string | CSS class for pagination numbers | pager-item | | dotsClass | string | CSS class for the dots (ellipsis) | pager-dots | | activeClass | string | CSS class for active numbers | is-active | | totalVisibleNumbers | number | Number of visible pagination numbers | 6 | | checkForUpdates | boolean | Checks for blog changes to rebuild pagination | true | | enableDotsJump | boolean | Make dots clickable to jump between segments | true |

For example, to customize the number of visible pagination links and disable update checking:

new BloggerPager({
  totalVisibleNumbers: 7,
  checkForUpdates: false
}).init()

Additionally, you can configure the instantiated pagination in the HTML using data-* attributes on the pagination container. For example:

<div id="blog-pager" data-check-for-updates="false">
  <div id="pager-numbers"></div>
</div>

Methods

All methods are available through the instance of BloggerPager:

| Method | Description | Returns | |------------|-------------------------------|---------| | init() | Initializes the pagination | Promise |

Supporting

If you want to help me keep this and other related projects always up to date, you can buy me a coffee ☕. I will be very grateful 👏.

License

blogger-numeric-pager is licensed under the MIT License