How to Add Post Pagination in Blogger website?

"Are you searching for a method to divide lengthy posts on Blogger into separate pages?"

In this article, I will show you how to add post pagination to your blogger website. So, you can break a single long blog post into multiple pages in Blogger.

Let's talk about post-pagination and its advantages and disadvantages for your blog.

What is Post pagination?

Post pagination is the technique of splitting long blog posts into multiple pages. Users can navigate to other pages by clicking on the next and previous buttons.

Using pagination in your content improves readability and allows users to easily navigate the sections they want to read.

Increasing user interaction on a webpage can boost both page views and ad revenue.

Let me provide you with clear instructions on how to split your Blogger posts into multiple pages.

How to Add Post Pagination in Blogger?

If you want to add post pagination to your Blogger blog, you can follow the steps given below.

Step 1: Go to the Blogger dashboard and Open a blog post in HTML view. 

Step 2: Now you have to split the blog posts in the below format. 

<div class="page-content">
        <div class="page active">
        <!--Page 1 content Here-->
        </div>

        <div class="page">
        <!--Page 2 content Here-->
        </div>

        <div class="page">
        <!--Page 3 content Here-->
        </div>
 </div>

Step-3: Here replace the page content in between div classes. (like First page content replaces <!--Page 1 content Here--> )

Step-4: Now paste the pagination button code after all the blog post contents. 

<!--Pagination Button-->
<div class="pagination-container">
        <div class="page-numbers-container">
            
        </div>
    </div>

Step-5: Now you have to paste the CSS code in the blog post or in the Theme code. 

<style>
/* Post Pagination by Key2Blogging */

.pagination-container {
    display: flex;
    justify-content: center;
}

.pagination-container .page-numbers-container {
    display: flex;
    font-size: 18px;
    overflow: hidden;
    font-weight: bold;
    font-family: "raleway", sans-serif;
    border-radius: 20px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}

.page-numbers-container .page-number {
    padding: 8px 24px;
    transition: all 400ms;
}

.page-numbers-container .page-number:hover {
    background: #c5c5e9;
    cursor: pointer;
}

.page-numbers-container .page-number.active {
    background: #17A589;
    color: #fff;
}

/* Page Content */

.page-content .page {
    display: none;
}

.page-content .page.active {
    display: block;
}
</style>

step-6: Now paste the Javascript code just after the CSS code. (needed for Button click)

<script> 
const pages = document.querySelectorAll(".page-content .page");
const pageNumbersContainer = document.querySelector(".page-numbers-container");

if (pageNumbersContainer) {

	let pn = localStorage.getItem("pageNumber") ? localStorage.getItem("pageNumber") : 0;

	const createPagination = () => {
	    pages.forEach((p, i) => {
	        const pageNumber = document.createElement("div");
	        pageNumber.classList.add("page-number");
	        pageNumber.textContent = i + 1;
	        pageNumber.addEventListener("click", () => {
				localStorage.setItem("pageNumber", i);
				location.reload();
	        })

	        pageNumbersContainer.appendChild(pageNumber);
	    })

	    document.querySelector(".page-number").classList.add("active");
	    pages[0].classList.add("active");
	}

	createPagination();

	const pageNumbers = document.querySelectorAll(".page-numbers-container .page-number");

	const activatePage = (pageNumber) => {
	    pages.forEach(p => {
	        p.classList.remove("active");
	    })

	    pages[pageNumber].classList.add("active");

	    pageNumbers.forEach(p => {
	        p.classList.remove("active");
	    })

	    pageNumbers[pageNumber].classList.add("active");

		localStorage.removeItem("pageNumber");
		history.scrollRestoration = "manual";
	}

	activatePage(pn);
}
</script>

After successfully adding post pagination to your Blogger website, you can now publish your blog posts.

In Blogger, you can break long posts into multiple pages, providing a better user experience.

If you have any questions or uncertainties, please feel free to ask in the comment box.