Add Post Pagination in Blogger website

Step-1: Go to Blogger dashboard and Open a blog post in HTML view.
Step-2: Now you have to split the blog posts in the below format.

Multiple Code Boxes with Copy Buttons

<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 )
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>

        

Now publish your blog posts and you have successfully added the post pagination to your Blogger

post written by: VIGYAN