https://github.com/zkreations/blogger-numeric-pager
Blogger Numeric Pager is an advanced pagination for Blogger that works even in searches. It stores processed data locally and only updates if the blog changes.
https://github.com/zkreations/blogger-numeric-pager
blogger blogger-plugins javascript
Last synced: 8 months ago
JSON representation
Blogger Numeric Pager is an advanced pagination for Blogger that works even in searches. It stores processed data locally and only updates if the blog changes.
- Host: GitHub
- URL: https://github.com/zkreations/blogger-numeric-pager
- Owner: zkreations
- License: mit
- Created: 2025-03-04T12:20:36.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2025-04-19T20:28:26.000Z (about 1 year ago)
- Last Synced: 2025-06-25T13:55:30.204Z (12 months ago)
- Topics: blogger, blogger-plugins, javascript
- Language: JavaScript
- Homepage: https://www.zkreations.com
- Size: 139 KB
- Stars: 3
- Watchers: 0
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Blogger Numeric Pager
[](https://www.npmjs.com/package/blogger-numeric-pager) [](LICENSE)
**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 →](https://www.zkreations.com/search?max-results=8)
## 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 `` jump break.
## Installation
### npm
```bash
npm i blogger-numeric-pager
```
### cdn
```html
```
## How to use
You can use **blogger-numeric-pager** as an ES6 module or as a global script. For example:
```javascript
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:
```javascript
new BloggerPager().init()
```
if you want to run JavaScript code after the pagination has been initialized, you can do it like this:
```javascript
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:
```html
```
## 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:
```javascript
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:
```html
```
## Methods
All methods are available through the instance of `BloggerPager`:
| Method | Description | Returns |
|------------|-------------------------------|---------|
| `init()` | Initializes the pagination | [Promise](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise) |
## Supporting
If you want to help me keep this and other related projects always up to date, you can [buy me a coffee](https://ko-fi.com/zkreations) ☕. I will be very grateful 👏.
## License
**blogger-numeric-pager** is licensed under the MIT License